XPage Tips & Tricks
Johan Poot | Senior Consultant | Primaxis
www.primaxis.com.au
A quick introduction
• My name is Johan Poot
• 16 years’ experience working with IBM technologies, including over five years
working with XPages.
• Consultant for Primaxis (formerly Dr Notes) for nearly three years and
specialising in Domino Application Development.
• 13 years experience within private organisations as a business/system analyst
doing domino development, system analysis and project management.
Meet.Share.Learn.Connect
@AusLUG
#@Inform2015
June 11th & 12th, Melbourne, Australia
XPages tip to make your web application look
and feel good
• Enhancing applications with dojo
• Adding loading gifs to let the user now that 'stuff' is happening
• Charts!
• Putting it all together
Meet.Share.Learn.Connect
@AusLUG
#@Inform2015
June 11th & 12th, Melbourne, Australia
Dojo
• Most of the what I am going to talk about is how to incorporate dojo into an
XPage.
• Dojo comes installed with later versions of domino, so you don't have to worry
to much about loading the necessary JavaScript files
• com.ibm.xsp.context.DojoLibraryFactory.getDefaultLibrary().getVersion()
• Dojo is client side orientated, so you need a good understanding of client vs
server side activities
• A lot of components in XPages automatically use dojo, but I'm not going to talk
about this. There is more value in understanding how to use dojo and make it
work on your XPages.
• If you know how to incorporate client side JavaScript like dojo, it opens a world
of rich functionality only a google search away (and not just limited to dojo)
Meet.Share.Learn.Connect
@AusLUG
#@Inform2015
June 11th & 12th, Melbourne, Australia
Incorporation of dojo and how to implement in
XPages
• A simple example, the rotator – this creates an animated sliding panel that will
impress the end user
• A quick search for 'dojo rotator' lets you find what you want.
Meet.Share.Learn.Connect
@AusLUG
#@Inform2015
June 11th & 12th, Melbourne, Australia
Demonstration of dojox.widget.Rotator
• You will often find samples that you can run, complete with source code.
Meet.Share.Learn.Connect
@AusLUG
#@Inform2015
June 11th & 12th, Melbourne, Australia
XPages and dojo
• Here is a quick example of how to copy the source code and make it work on an
xpage.
Meet.Share.Learn.Connect
@AusLUG
#@Inform2015
June 11th & 12th, Melbourne, Australia
Ends up looking like this
Meet.Share.Learn.Connect
@AusLUG
#@Inform2015
June 11th & 12th, Melbourne, Australia
Demo
Show rotator.xsp
Meet.Share.Learn.Connect
@AusLUG
#@Inform2015
June 11th & 12th, Melbourne, Australia
Loading Indicators
• Showing a loading indicator is a relatively simply development task that will
hugely improve the user experience
• Unfortunately partial refreshes in XPages give no indication to the user that
'something is happening'
• This can lead to click happy users bombarding the page with mouse clicks and
can produce unexpected behaviour
• There are some 'hidden' event handler functions that are extremely useful,
particularly: <xp:this.onComplete> and <xp:this.onError>
• These events are client side events
Meet.Share.Learn.Connect
@AusLUG
#@Inform2015
June 11th & 12th, Melbourne, Australia
Type ahead does show these event Listeners
Meet.Share.Learn.Connect
@AusLUG
#@Inform2015
June 11th & 12th, Melbourne, Australia
• So you can create a button that:
– a) First calls a client side function that makes a loading indicator visible
– b) Then performs the server side function/partial refresh
– c) When completed hide the loading indicator
– d) If there is an error, do something else.
• You’ll need to put your code between <![CDATA[code]]>
Meet.Share.Learn.Connect
@AusLUG
#@Inform2015
June 11th & 12th, Melbourne, Australia
Meet.Share.Learn.Connect
@AusLUG
#@Inform2015
June 11th & 12th, Melbourne, Australia
Meet.Share.Learn.Connect
@AusLUG
#@Inform2015
June 11th & 12th, Melbourne, Australia
JSON/REST Services
• I'd like to jump to how to create some pretty pie charts, but before I go any
further I need to quickly mention RESTful web services. This the format by
which data will be transferred between the client and server.
• Note: It is possible to create charts using server side rendering and therefore
avoid having to build a REST service. You can build your html/javascript with
server side script then render it via a computed field. In this scenario you are
leaving the server to do all the work which will impact the load time of your
page. For large queries this could take a lot of time.
Meet.Share.Learn.Connect
@AusLUG
#@Inform2015
June 11th & 12th, Melbourne, Australia
The advantages to using the REST service
approach is:
• a) You can load your page, show a loading gif ( giving the user something to
look at) THEN go and get your data via an asynchronous ajax call. (This is kind
of like doing a partial refresh in your XPage). The user will also have the option
to click away from the page, if they don't want to wait for the chart to load
• b) Learning how to separate design and data has its advantages, as there are
many other functionally rich JavaScript frameworks that use REST services that
you could look at incorporating (ie not just Dojo)
• c) Your REST API can be consumed by other web pages and platforms. Visa
versa as well, you could consume data from other systems that use RESTful
services. Great for system integration
Meet.Share.Learn.Connect
@AusLUG
#@Inform2015
June 11th & 12th, Melbourne, Australia
There are several different ways of creating a
web services
• Use whatever method you are comfortable with
– Service side JavaScript called via the after render response on an XPage
– Java functions (called via the after render response event on an XPage)
– via ?OpenAgent URL(ie you could use lotus script to create your JSON output)
– Extension library REST Service control
Meet.Share.Learn.Connect
@AusLUG
#@Inform2015
June 11th & 12th, Melbourne, Australia
JSON
• JSON (JavaScript Object Notation) is standardised representation of data, it is
light weight and easy to read. Your data is essentially a text label and text value
(or array of text values). When creating REST services you are going to want to
verify them. There are lots of great sites that can validate your JSON data (and
you will need them!). Just google "JSON Verify". I rather like this one
http://jsonformatter.curiousconcept.com/
• Its is especially useful to track down problems characters like:
– linefeeds
– carriage returns
– double quotations
– tabs
– back slashes
• These need to either be removed or properly escaped.(ie add a backslash \”)
Meet.Share.Learn.Connect
@AusLUG
#@Inform2015
June 11th & 12th, Melbourne, Australia
Dojo Charts
• Now lets look at a real example. This time a pie chart that lets you drill down
into the pie slices.
• The concept here is take your typical 'Notes' style categorised view and use
dojo charts to give it a bit of a face lift.
Meet.Share.Learn.Connect
@AusLUG
#@Inform2015
June 11th & 12th, Melbourne, Australia
Lets look at how it hangs together.
• Essentially the web page has three parts:
– a) Chart
– b) View Container
– c) Custom Form Control
• Behind the scenes there is:
– a) Server side JavaScript library to provide Rest service based on a
NotesViewNavigator
– b) Client side functions to access the rest service and render the graph
Meet.Share.Learn.Connect
@AusLUG
#@Inform2015
June 11th & 12th, Melbourne, Australia
Include the specific dojo modules
Meet.Share.Learn.Connect
@AusLUG
#@Inform2015
June 11th & 12th, Melbourne, Australia
The chart div
Meet.Share.Learn.Connect
@AusLUG
#@Inform2015
June 11th & 12th, Melbourne, Australia
Drill down
• This hidden content has a two things
– A field to capture which ever pie slice has been clicked
– A button to do a partial refresh on a view container
More on this later …
Meet.Share.Learn.Connect
@AusLUG
#@Inform2015
June 11th & 12th, Melbourne, Australia
Rotator
• Contains a customer control with an editable area where you can drag your
view and form
Meet.Share.Learn.Connect
@AusLUG
#@Inform2015
June 11th & 12th, Melbourne, Australia
onClientLoad
• Call client side function that will get your data and build the dojo chart
Meet.Share.Learn.Connect
@AusLUG
#@Inform2015
June 11th & 12th, Melbourne, Australia
Quick note on ViewContainer
• Used View Container, but could have also done something else like a Data Grid
• Clicking the company link gets the unid and transfers it to field, slides to the
form div, then the inplace form is partial refreshed
Meet.Share.Learn.Connect
@AusLUG
#@Inform2015
June 11th & 12th, Melbourne, Australia
dojo.xhrGet
• After building your url get your data from your REST service
• After you get your response call your build chart function (and hide your loader)
Meet.Share.Learn.Connect
@AusLUG
#@Inform2015
June 11th & 12th, Melbourne, Australia
Build the Chart
• Response is shown below, need to convert to JSON object.
• JSON.parse(response)
Meet.Share.Learn.Connect
@AusLUG
#@Inform2015
June 11th & 12th, Melbourne, Australia
• Make sure there is no chart already in the div that you want to build a chart
Meet.Share.Learn.Connect
@AusLUG
#@Inform2015
June 11th & 12th, Melbourne, Australia
Build chart
Meet.Share.Learn.Connect
@AusLUG
#@Inform2015
June 11th & 12th, Melbourne, Australia
Dojo documentation
• Complete with examples
• https://dojotoolkit.org/reference-guide/1.10/dojox/charting.html
Meet.Share.Learn.Connect
@AusLUG
#@Inform2015
June 11th & 12th, Melbourne, Australia
Drill down
Remember this?
loadDetail function populates field and clicks a button
Meet.Share.Learn.Connect
@AusLUG
#@Inform2015
June 11th & 12th, Melbourne, Australia
What is the evt variable
• Print values to console to have a good look at them
Meet.Share.Learn.Connect
@AusLUG
#@Inform2015
June 11th & 12th, Melbourne, Australia
REST code
• Create response writer and set headers
• Create JSON content then write it
Meet.Share.Learn.Connect
@AusLUG
#@Inform2015
June 11th & 12th, Melbourne, Australia
Example of ViewNavigator Loop
Meet.Share.Learn.Connect
@AusLUG
#@Inform2015
June 11th & 12th, Melbourne, Australia
Enhancing the chart example
• Click through two categories
Meet.Share.Learn.Connect
@AusLUG
#@Inform2015
June 11th & 12th, Melbourne, Australia
But what about custom searches?
• NotesViewNavigator will be nice and fast but you can’t really do a search
• Add search filters to view container
• Discard NotesViewNavigator and user FTSearch instead
• You will need to loop through categories to get axis data
• If you need totals, you will need to loop through collection to add values
Meet.Share.Learn.Connect
@AusLUG
#@Inform2015
June 11th & 12th, Melbourne, Australia
Quick word on FTSearch
• Is powerful, but has some pitfalls
• Words like NOT, AND and some special characters will cause issues
• Is best to update index whenever something is saved to ensure data is
immediately available for reporting. This can be coded
• Dates in particular can be painful
• I like to store date seconds as a field value, works well with javaScript
Date.parse
• You could use db.Search(strFormula), it takes longer but less prone to search
syntax problems
• I still prefer FTSearch
Meet.Share.Learn.Connect
@AusLUG
#@Inform2015
June 11th & 12th, Melbourne, Australia
Summary
• Once when you get your head around dojo, you can add rich functionality to
your web page
• Be aware of response times and provide loading indicators
Meet.Share.Learn.Connect
@AusLUG
#@Inform2015
June 11th & 12th, Melbourne, Australia