Wednesday, August 4, 2010

JSHeader equivallent in XPages

JsHeader section in the custom forms is one place on which a traditional web developer will rely upon mostly in my perspective. Having to do that all over the years, XPages all of a sudden felt too crude to me most of the times untill now. 'cos I never knew the existence of the awesome tag named "xp:scriptBlock" . Mind the case, it is B and not b.

Yes this is one place which I find very similar to the JSHeader section in the Notes form for the XPage. A simple syntax of the tag can be described as follows,

<xp:scriptBlock type="text/javascript">
<xp:this.value><![CDATA[             -- your javascript functions go here--    ]]></xp:this.value>

Following is a small illustration of the usage of the same.

I have declared a function named greetings() inside the script block in an Xpage. Its purpose is to get the user name from a field (xpage edit box) and greet the user. This function is called by a button on the same page and yeppi that works.

Note:This solution is for clientside javascript alone and does not work with XPages. Also I have not performed any exhaustive test with this. So dont hate me if it does n't work for you :)

The code of the entire XPage is as follows,

<?xml version="1.0" encoding="UTF-8"?>
<xp:view xmlns:xp="">

<xp:scriptBlock type="text/javascript">
<![CDATA[function greetings() {alert('Hi '+document.getElementById("#{id:userName}").value+'.. Having fun with XPages!!!')}]]>
User Name : &#160;
<xp:inputText id="userName"></xp:inputText>

<xp:button value="Call the javascript function defined with in the XPage"
<xp:eventHandler event="onclick" submit="false">

Hope this helps :)


  1. soon there will be an xp:headTag also:

  2. thanks for the posting. This helped with a current issue I was having with XPages.