Changing the Output Tag on a Computed Field in XPages

By default, a computed field writes out a <span> tag to the page around the contents of the field, but you can use the tagName property to change that.

For example, this computed field…

<xp:text escape="true" id="computedField1" 
  value="#{javascript:return 'Hello, World';}">
</xp:text>

… will result in this html:

<span id="view:_id1:computedField1" class="xspTextComputedField">
  Hello, World
</span>

But, if you change the tagName property to something else — for example a list item (li)…

<xp:text escape="true" id="computedField1"
  value="#{javascript:return 'Hello, World';}" 
  tagName="li">
</xp:text>

… it will produce this html:

<li id="view:_id1:computedField1" class="xspTextComputedField">
  Hello, World
</li>

The class name stays the same, but the surrounding tag changes. This can come in very handy.

Advertisements

9 responses to “Changing the Output Tag on a Computed Field in XPages”

  1. Martin Rolph (@MartinRolph) says :

    Yep this is very handy, especially for LI tags. If you code them manually with a computed text in the middle like so.. you can’t then set the render property on the whole li.
    Doing it how you have described is a great way to selectively render li tags, which is perfect for menu items in frameworks such as bootstrap

  2. timtripcony says :

    This also works for panel components… which has some interesting implications when you consider that panels can also have their own data sources (and data contexts).

  3. Bruce Elgort says :

    I get giddy when XPages developers actually care about the emitted HTML 🙂 Good stuff Brad.

  4. Paul Withers says :

    I often use it for things like h2 etc. It’s very useful.

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s

%d bloggers like this: