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.
Here is what’s added to the page, below the
<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">
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.
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
HTML 5 doctype:
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.
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.
If you need to set a class on the body tag of an XPage, you can do so via a page property. In this post I’ll show how to set it and the effect that it has on an XPage and Custom Control.
Default Body Class
If you create a blank XPage and display it in a browser, you’ll see that the body tag gets two classes by default:
<body class="xspView tundra">
Dojo generally looks for a theme name in the body class and
tundra is the Dojo theme that XPages uses by default.
If you want to change this, you can do it application-wide via a theme or you can change the class of the
body tag on a single page.
Adding a Body Class
You can change the body class by selecting the
xp:view tag, going to
All Properties > styling > styleClass
This changes the body tag sent to the page to be this:
<body class="myNewClass xspView tundra">
Note 1: I’ve seen other cases where it removed existing body classes and only used the one specified in the page property. I would guess this has to do with the theme in use, but I haven’t tested it further. Just look at the page output before and after to see the effect.
Note 2: If this messes up styling of standard XPages controls, you can add multiple classes — just separate each one with a space like you would when adding multiple classes to any HTML element.
Setting the styleClass of a Custom Control
The same property is available on a custom control. However, as you might expect, the effect is different, since the page only has 1
If you set the property on a custom control, it leaves the page’s
body tag alone but rather adds a
div with that class to surround the contents of the custom control.
<body class="xspView tundra"> ... <div class="myClass"> </div>