Archive | December 2012

Getting the most out of the XPages View Panel Control – Part 1: Passing client-side JavaScript through a view column

In the introduction to this series, I mentioned several techniques that can be used to make an XPages view panel control more flexible.

Several of those techniques are built on client-side JavaScript passed through a view column, so let’s lay the groundwork by seeing how that’s done.

It’s a lot simpler than it sounds. All you have to do is add a column to any view panel control and, on the Display subtab of the properties view, set the Content Type to HTML. This sets it to pass the content of the column directly through to the browser without altering it for display. This property sets the following attribute in the xp:viewColumn tag:


Then, on the Data subtab, set ‘Display data using:’ to ‘Computed Value’, rather than ‘View column’. Now you’re ready to pass through HTML and client-side JavaScript.

This screen shot shows 5 examples of pass-through content:View Panel - Passthru HTML Columns

Column 1  – Plain HTML

The first column passes plain HTML through.

return '<h1><i>Italicized H1 text</i></h1>';

Column 2 – Simple SSJS

The second column is a simple SSJS statement that displays the note ID of the document. In order for this to work, you need to define the row variable for the view panel so you can get a handle to the view entry in order to retrieve the note ID.

View Panel - Variable
To define the row variable, select the view panel (it’s easiest to do via the Outline view), click on the Properties tab and select the All Properties subtab. Expand the data section and locate the var property. For this example, I set mine to rowHandle.

To display the document’s note ID, compute the column value to this:

 return rowHandle.getNoteID();

(This column didn’t need to have the HTML content type, but it doesn’t make a difference for this purpose.)

Column 3 – Simple JavaScript

The third column executes simple JavaScript code for each row in the view. To execute client-side JavaScript directly, enclose the code within a <SCRIPT> tag.

In this example, it’s just printing a date. Here’s the column value:

 return '<SCRIPT>document.write("Date: " + new Date());</SCRIPT>';

Column 4 – HTML Button with onclick event alert

To make it a little more complicated, let’s create a button with HTML and add a JavaScript alert when it’s clicked. The fourth column generates an HTML button that executes a JavaScript alert statement when the button is clicked.

This is what we want the server to write onto the page in order to create this button:

 <INPUT TYPE="BUTTON" VALUE="Click Me" onclick="alert('Hello World');>"

In order to generate that, we need to set the column value like this:

 return '<INPUT TYPE="BUTTON" VALUE="Click Me" onclick="alert(\'Hello World\');">';

All you need to do is wrap the entire string in single quotes, but be careful to escape the nested quotes within the alert statement. I find it very helpful to first write out the code that needs to be generated by the page and then work on modifying it to pass through via SSJS.

I tend to use the single quotes to surround the SSJS values and double quotes for the client-side quotes to pass through. When you need to nest quotes in the client-side JavaScript, you can use the JavaScript escape character (\), followed by a quote to keep it straight.

Column 5 – Mixing client-side JavaScript with SSJS

To take this one step further, let’s mix in some SSJS. The fifth column generates an HTML button that executes a JavaScript alert that displays the view entry’s note ID when clicked.

Remember, we’re writing the computed column values with SSJS, but sending *client-side* HTML and JavaScript.

Since it uses SSJS and we have a handle to the view entry via our rowHandle variable, we can execute server-side code to get information from the view entry or its underlying document. We can mix this logic in with the client-side code that will be written out to the page.

Here’s how to get the note ID of the current row and generate an HTML button that will display it in an alert box when clicked:

var id = rowHandle.getNoteID();
return '<INPUT TYPE="BUTTON" VALUE="Display Note ID" onclick="alert(\'Note ID:' + id + '\');">';

Again, be careful to watch the quotes. In this case, when we want to mix in the id variable, we need to close the outer string, because we’re working with the SSJS variable at this point.

These techniques open the door for a lot of ways to enhance the view panel. As this series progresses, I’ll use these concepts to add even more functionality.