An Effective Use of the ‘attr’ Property on xPage Elements

JQuery is a common javascript library today that can be used for any number of client side operations.  Sometimes it can be difficult to construct the right selector with xPage elements due to the way the engine renders the id tag.  Sure it is common to use the elements class attribute as a selector but sometimes that can only serve to muck up your design as you may already have several style sheets used for design.  That is where I have found a nice use for the ‘attr’ tag in xPage elements.

Consider the following use case.  I have a timesheet form that has a repeat control nested inside another repeat control.  The first repeat loops through the days of the week while the second loops through a set number of possible project entries per day.  I want to have all but the first row hidden for each day on load of a new timesheet, then have buttons to add a line and remove a line.  I can use jQuery but instead of trying to add the row number to my class attribute of each row, or trying to parse out the id I can use a new attribute called “rowNum” and grab that on the client side.

xPage Markup

<xp:repeat id="timesheetCard" indexVar="idx" var="rowNum" repeatControls="true" rows="7">
 <xp:this.value><![CDATA[#{javascript:var arrRow = [0,1,2,3,4,5,6]; return arrRow;}]]></xp:this.value>
 <xp:attr name="row">

So here I have used the ‘attr’ property of the xpage element to calculate an attribute I called “row”.  I could have done this using straight HTML but by converting the tag to an xPage tag I could access it though the designer properties section and get myself a javascript editor to use.

Now, on the client side wherever I want to have access to this row I can access it via jQuery as shown here:


The above code will find the row with a row=5 and show that row.  This would be useful if I had that row hidden previously.

The above is not the only possible use case for ‘attr’.  You can use it anywhere you want to add additional metadata to your markup for use client-side.  A nice tool to have in your toolbox!