Archive | HTML RSS for this section

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.

XPages Tip: Setting the Body Class

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

BodyClass

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 body tag.

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>