Conditionally Render a Passthru tag within the body of an XPage.

I recently had a need to conditionally include a new client-side javascript library on an XPage after another library was loaded. The other library was loaded within the body of the page and not within the header, so, in this case, it did not work to include the new library as a page resource.

However, when I put an <xp:script> tag within the body of the page, I received this error:

The complex type tag (xp:script) must be within a property tag, like <this.something>

Normally, those tags appear within <this.resources>.

So, I needed a way to conditionally include a passthru <script> tag to load the library.

My solution was to wrap it within an <xp:span> tag. Since it’s an xp tag, I can use a server-side rendered formula. If it returns true, then the passthru script tag will be added to the page. Admittedly, it feels like a bit of a hack, but it does the job:

<xp:span rendered="#{javascript:context.getUserAgent().isIE()}" >
	<script src="MyLibrary.js" />
</xp:span>

For the record…

I’m not advocating this as ideal design. But if there is some case where you need to conditionally include a script tag within the bod of an XPage, this will do the trick. In my case, I was updating an application and needed to keep the changes to a minimum.

Library Relative Reference

There’s a secondary tip in here, which Marky Roden pointed out. With a passthru <script> tag, do not start the src url with a backslash (/), even though that’s what the <xp:script> tags do. On a passthru <script> tag, that will be relative to the server root.

Advertisements

8 responses to “Conditionally Render a Passthru tag within the body of an XPage.”

  1. Naveen says :

    You can look into the Output Script (xp:scriptBlock) control – http://www.openntf.org/xspext/xpages%20extension%20library%20documentation.nsf/xpages-doc/xp_scriptBlock.html – which has src and rendered property.

  2. Sven Hasselbach says :

    Another alternative is a xp:text element and set the tagName property to “script”. With the attrs properties you can define the “src”.

  3. Howard says :

    You could also use a panel or computed text and both have a disableOutputTag property if you didn’t want the span tag to be on the page.

  4. Chris Toohey says :

    Suggestion: use an xp:panel without an ID, therefore no HTML Element will be generated “surrounding” your content.

    Here’s what I do, which might be something you’d be interested in:

    – Create a custom control named inlineResources.
    – Create two properties: renderDefault and renderThis.

    Now, here’s your inlineResources control markup:

    Now, to see this in use:

    What this will do is give you the ability to load common xp:scriptBlocks, let’s say jQuery, at the bottom of your XPage vs. in the HTML Head, as well as conditionally have unique per-XPage xp:scriptBlocks. The custom control properties, of course, give you the ability to turn these on and off at will. Of course, you could also apply a rendered to the xp:scriptBlock itself (the one in the callback) to make this completely customizable.

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: