In the introduction to this series, I mentioned several techniques that can be used to make an XPages view panel control more flexible.
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:
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.
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:
(This column didn’t need to have the HTML content type, but it doesn’t make a difference for this purpose.)
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
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.
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.