There is no greater sacrifice anyone can make than to die for your country in the name of defending freedom.

Ever country has people who have to made the ultimate sacrifice and given their life for their country.

I am very grateful that I am able to live my life because someone else chose to give theirs. If you think about it, and don’t take life for granted it is quite humbling.

In this article I will describe how to implement and provide examples of use the jQuery plugin PageSlide within an XPage. This is a fairly simple plugin with very few parameters but provides an alternate method for displaying information to users

PageSlide.js

Demonstration

The XPages integration of PageSlide is demonstrated here

Download

The demonstration database can be downloaded from the link above or from here

Introduction

PageSlide by Scott Robin is a simple plugin which allows external content to be displayed in a sidebar on the page. There are only two parameters, direction (left or right) and modal (true or false).  It is really quite simple. As you will see my implementation does not use XPage XML markup to add resources or to activate the capability. I found that this caused issues in the browser. The capability works well using the example code from the website, applied in an XPage.

PageSlide showing data from another XPage to the side of the main

How does it work?

I added jQuery, the pageslide js library and the pageslide.css stylesheet to my database through the WebContents folder and added them to to my XPage via script and link tags.

		  <script src="js/jquery.pageslide.js"></script>
		  <script src="js/jquery-1.7.1.min.js"></script>
		  <link rel="stylesheet" type="text/css" href="css/jquery.pageslide.css" />

The basic concept works like this:

• You create a link on the page
  • < a href=”xSomething.xsp” class=”aClass”>
• You select the link in question
  • $(“a.aClass”).
• You pageslide it
  • pageslide({direction: “left”, modal: false})

	<a href="xPageSlide_1.xsp" class="myClass">Display user information</a>
	<script>$("a.myClass").pageslide({ direction: "left", modal: false});</script>

When clicking on the link this produces the effect of opening xPageSlide_1.xsp in the right hand panel of the screen (direction: left moves everything to the left).
If the modal = true paramater is included then the “slide” can only be closed programmatically. This forces user interaction with the information. If not included or modal = false then clicking anywhere in the screen will make the slide disappear.

And that is pretty much it….. nothing complicated this week

More examples
I created a custom control with custom parameters so that the capability can be added to any page.

Custom Control properties

The example page contains a demo of this custom capability and it is build like this:

• A link with a dynamic href is added to the form along with
• A scriptBlock which adds the PageSlide capability to the link passing the custom parameters as necessary.

<xp:link escape="true" text="CompositeData example"
	id="compositeDataExample"
	value="${compositeData.content}" styleClass="marky">
</xp:link>
<xp:scriptBlock id="scriptBlock1">
	<xp:this.value><![CDATA[
		bModal = "#{compositeData.modal}"
		bModal == "false" ? false : true
		$("[id$=compositeDataExample]").pageslide(
			{ 	direction: "#{compositeData.direction}",
				modal: bModal
			});
	]]></xp:this.value>
</xp:scriptBlock>

The other example I created involves using sessionScope variables to look up information dynamically.

sliding in a new XPage with dynamic content

There is a hidden anchor tag on the form which is has PageSlide attached to it in a similar way as described above. It is hidden becasue we are going to “click” it programmatically when a user is selected in the comboBox.

<a href="xPageSlide_1.xsp" class="marky2" style="display:none">Display user information</a>
<script>$("a.marky2").pageslide({ direction: "right", modal: true });</script>

The combobox has a simple SSJS lookup formula showing the first column of the AllContacts view
#{javascript:@DbColumn(“”, “AllContacts”, 1)}

<xp:comboBox id="comboBox1" defaultValue="Pick a person">
	<xp:selectItem itemLabel="Pick a person" itemValue="Pick a person"></xp:selectItem><xp:selectItems>
		<xp:this.value><![CDATA[#{javascript:@DbColumn("", "AllContacts", 1)}]]></xp:this.value>
	</xp:selectItems>
	<xp:eventHandler event="onchange" submit="true" refreshMode="partial" refreshId="computedField1">
	</xp:eventHandler>
</xp:comboBox>

In the onChange event I perform a partial refresh of the computedField1. computedField1 looks like this and returns some JavaScript which triggers the link “.click()”

<xp:text escape="false" id="computedField1">
	<xp:this.value><![CDATA[#{javascript:var person = sessionScope.person=getComponent("comboBox1").getValue();
		var disp = "<script>$('a.marky2').click()</script>";
		disp2 = (person == "Pick a person" ? "" : disp);
		return disp2
	}]]>
	</xp:this.value>
</xp:text>

• If a person is picked the computed field is refreshed
  • The computed field sets a sessionScope variable based on the value selected
    • var person = sessionScope.person=getComponent(“comboBox1″).getValue()
  • The refreshed value contains a script tag which executes when the refresh is loaded.
    • var disp = “// “;
      disp2 = (person == “Pick a person” ? “” : disp);
      return disp2
  • $(‘a.marky2′).click() clicks the hidden link opening the page slide

The xPageSlide_1.xsp page takes the sessionScope variable and looks up the user’s information based on the variable set in the computedField1 above.

<xp:div id="div1" style="display:nonex">
				    <h2 style="color: white">User Information</h2>
				    <xp:br></xp:br><xp:br></xp:br>
					<xp:text escape="true" id="computedField1"><xp:this.value><![CDATA[#{javascript:var per = sessionScope.person;
@DbLookup(@DbName(), "vwContacts", per, 4)}]]></xp:this.value></xp:text>

					<xp:br></xp:br>
					<xp:br></xp:br>
					<xp:text escape="true" id="computedField5"><xp:this.value><![CDATA[#{javascript:var per1 = sessionScope.person;
@DbLookup(@DbName(), "vwContacts", per1, 5)}]]></xp:this.value></xp:text>
					<xp:br></xp:br>
					<xp:br></xp:br>
					<xp:text escape="true" id="computedField3"><xp:this.value><![CDATA[#{javascript:var per2 = sessionScope.person;
@DbLookup(@DbName(), "vwContacts", per2, 6)}]]></xp:this.value></xp:text>
					<xp:br></xp:br>					<xp:br></xp:br>
										<xp:button id="button1" value="Close" style="display: block">
		<xp:eventHandler event="onclick" submit="false">
			<xp:this.script><![CDATA[parent.$.pageslide.close()]]></xp:this.script>
		</xp:eventHandler></xp:button><xp:br></xp:br>

</xp:div>

and with a little styling we are done for a consistent look and feel

<style>
DIV {
    background-color: #333333;
    color: #FFFFFF;
    height: 100%;
    padding: 20px;
    position: fixed;
    top: 0;
    width: 260px;
    z-index: 999999;
}

H2 { color: white }
</style>

Conclusion

I could easily see myself using PageSlide if I wanted to use a hidden menu or if I wanted to have a status update bar running in the background of my webpage which was accessed and made visible to the user when they wanted it to be there.

This is certainly the simplest plugin I have written about, but this is a very elegant solution to displaying hidden information to a user on demand.

Demonstration

The XPages integration of PageSlide is demonstrated here

In these two articles I am going to illustrate and describe how to implement an alternative to the XPage typeAhead, using the “jQuery Tokeninput“. Unlike the XPages typeahead the jQuery Tokeninput has a large and flexible paramaterized API which allows for control over how the results are displayed, how the results are created and the source of the data. We are going to look at how to search a basic JSON string, a notes agent generated JSON feed, a twitter JSON feed, and an XPage REST JSON feed.

Tokeninput.js

Introduction
Tokeninput provides a typeAhead-like capability whereby a user is presented with matching options as they start to type into a text field. The source of the data can either be a local JSON object or a web provided JSON object.

Basic Tokeninput user interaction

Tokeninput with facebook look and feel

Tokeninput with mac look and feel

The search results are determined from a JSON string and can come from any web source; flickr, twitter, facebook and domino to name but a few examples. What is really nice about Tokeninput is the control and flexibility provided to the developer out of the box allows you to make some very impressing, interactive webpages with very little effort. Unlike the XPage typeahead Tokeninput will also allow you to select multiple values and the display of these values can be controlled using a CSS.

Example Twitter feed with formatted results

Demonstration

The XPages integration of Tokeninput is demonstrated here

Download

The demonstration database can be downloaded from the link above or from here

How does it work in XPages?

For a more detailed dive into how the examples can be recreated and function in an XPage please check out the how does it work article

Tokeninput API

Tokeninput is extremely versatile and has a large number of parameters (as of v1.6) – these are taken straight from the website and you should check out all the examples on the website to get a good idea of all the capabilities

Search Settings

• method
  • The HTTP method (eg. GET, POST) to use for the server request. default: “GET”.
• queryParam
  • The name of the query param which you expect to contain the search term on the server-side. default: “q”.
• searchDelay
  • The delay, in milliseconds, between the user finishing typing and the search being performed. default: 300 (demo).
• minChars
  • The minimum number of characters the user must enter before a search is performed. default: 1 (demo).
• propertyToSearch
  • The javascript/json object attribute to search. default: “name” (demo).
• jsonContainer
  • The name of the json object in the response which contains the search results. This is typically used when your endpoint returns other data in addition to your search results. Use null to use the top level response object. default: null.
• crossDomain
  • Force JSONP cross-domain communication to the server instead of a normal ajax request. Note: JSONP is automatically enabled if we detect the search request is a cross-domain request. default: false.

Pre-population Settings

• prePopulate
  • Prepopulate the tokeninput with existing data. Set to an array of JSON objects, eg: [{id: 3, name: "test"}, {id: 5, name: "awesome"}] to pre-fill the input. default: null (demo).

Display Settings

• hintText
  • The text to show in the dropdown label which appears when you first click in the search field. default: “Type in a search term” (demo).
• noResultsText
  • The text to show in the dropdown label when no results are found which match the current query. default: “No results” (demo).
• searchingText
  • The text to show in the dropdown label when a search is currently in progress. default: “Searching…” (demo).
• deleteText
  • The text to show on each token which deletes the token when clicked. If you wish to hide the delete link, provide an empty string here. Alternatively you can provide a html string here if you would like to show an image for deleting tokens. default: × (demo).
• animateDropdown
  • Set this to false to disable animation of the dropdown default: true (demo).
• theme
  • Set this to a string, eg “facebook” when including theme css files to set the css class suffix (demo).
• resultsFormatter
  • A function that returns an interpolated HTML string for each result. Use this function with a templating system of your choice, such as jresig microtemplates or mustache.js. Use this when you want to include images or multiline formatted results default: function(item){ return “<li>” + item.propertyToSearch + “</li>” } (demo).
• tokenFormatter
  • A function that returns an interpolated HTML string for each token. Use this function with a templating system of your choice, such as jresig microtemplates or mustache.js. Use this when you want to include images or multiline formatted tokens. Quora’s people invite token field that returns avatar tokens is a good example of what can be done this option. default: function(item){ return “<li><p>” + item.propertyToSearch + “</p></li>” } (demo).

Tokenization Settings

• tokenLimit
  • The maximum number of results allowed to be selected by the user. Use null to allow unlimited selections. default: null (demo).
• tokenDelimiter
  • The separator to use when sending the results back to the server. default: “,”.
• preventDuplicates
  • Prevent user from selecting duplicate values by setting this to true. default: false (demo).
• tokenValue
  • The value of the token input when the input is submitted. Set it to id in order to get a concatenation of token IDs, or to name in order to get a concatenation of names. default: id

Callbacks

• onResult
  • A function to call whenever we receive results back from the server. You can use this function to pre-process results from the server before they are displayed to the user. default: null (demo).
• onAdd
  • A function to call whenever the user adds another token to their selections. defaut: null (demo).
• onDelete
  • A function to call whenever the user removes a token from their selections. default: null (demo).
• onReady
  • A function to call after initialization is done and the tokeninput is ready to use. default: null