XPages Tip — Adding Attributes to the HTML Tag

By default, the HTML tag rendered for an XPage only includes an attribute for the page language (<html lang="en">). In this post I’ll show how to add additional attributes to the HTML tag rendered for the page.

Adding an Attribute

You can add an attribute to the HTML tag via the attrs property, which can be found in All Properties > basics > attrs. Click the plus (+) button to add an attribute and then specify the attribute name and value.

HTML Attribute

Here is what’s added to the page, below the tag:

<xp:this.attrs>
  <xp:attr name="myAttribute" value="myValue"></xp:attr>
</xp:this.attrs>

When the page is loaded in the browser, you can see the attribute in the source:

<html lang="en" myAttribute="myValue">

Usage

One handy use for this is the HTML5 manifest attribute, which specifies the location for caching the page for offline and faster access.

Here’s an example:

<xp:this.attrs>
  <xp:attr name="manifest" value="myCache.appcache"></xp:attr>
</xp:this.attrs>

Note: If you want to use an HTML5 feature, you need to change the HTML doctype to HTML5 on the Page Generation tab of the Xsp Properties design element.

Default doctype:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">

HTML 5 doctype:

<!DOCTYPE html>

There are other global attributes that can also be applied to the HTML tag, such as id, style, dir (page direction – left to right or right to left), but there are other built-in properties for those on an XPage, so there isn’t a need to set them with a page-level attribute.

Note

In order to be applied to the HTML tag, the attribute must be defined at the XPage level. If added to a custom control, they’ll become attributes of a <div> tag.

Advertisements

Tags:

4 responses to “XPages Tip — Adding Attributes to the HTML Tag”

  1. Scott H says :

    Excellent, this helped me out of a bind! Thanks so much!

  2. Sjef Bosman says :

    Worth knowing that the styleClass attribute for an xp:view tag results in a class-attribute on the body-tag, whereas the xp:attr name=”class” attaches the class to the html-tag.

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: