I am delighted to present the first in my series of articles highlighting some extremely cool jQuery plugins and how to integrate them within XPages. During the course of the articles I will always demonstrate at least at some level, basic integration with XPages. In many cases I will not be able to cover all the examples of everything possible with each plugin, but I hope to give at least a good teaser to the possibilities and show the myriad of possibilities.
I have to also say a HUGE thank you to David Leedy (www.notesin9.com) who is hosting my demonstration for this and the rest of this series when I get to them.
So without further ad0 – welcome to jQuery in XPages #1 🙂
Highcharts
For full disclosure, Highcharts is not free for commercial use.
“Do you want to use Highcharts for a personal or non-profit project? Then you can use Highchcarts for free under the Creative Commons Attribution-NonCommercial 3.0 License.”.
But part of the reason I chose it as the #1 is because it really rocks well with an XPage environment. It has direct business applicability, unlike many other jQuery plugins which are pretty, but hardly “corporate”. The format and structure of the chart instantiation also jibes well with XPages and I was able to create a custom control which can be applied to any formatted viewPanel or dataTable.
The Demo
Here is the demonstration site
and here is the demo dataabase
Link download the demo database
In the example below you can see a simple form with a viewPanel. Adding a new value to the form refreshes the page and displays the value entered. The exact same functionality would be seen if I had a basic data table looking at the same view of data.
The Example
Submitting the form gives us our new value
The XPage is laid out very simply and our View control is called viewPanel1
We add the drawHighchart Custom Control to the XPage
And let’s refresh our webpage – et voila – a chart
Changing the chart type is as simple as selecting a new theme and/or a new chart type
For more information on how this works check out the next article
jQuery in XPages #1 – Highcharts – how does it work?
Xomino 
Hi Mark,
Cool example, how to use JQuery inside XPages.
When I download the sample app, I am not able to open the database. Because of an encryption error.
aaaargh I am a dumbass – sorry Frank (everyone).
i will fix it – will post when fixed.
Frank – I uploaded a new zip database and changed the link above – some caching issues apparently in the db for some reason,
http://demo.xomino.com/xomino/jQinX.nsf/SampleDB/jQInX.zip
[…] how does it work article is a follow on from the original jQuery in XPages #1 – Highcharts and goes into depth as to how the functionality was created and how you can modify it […]
Hi, I’m trying to dynamically create a data table inside a dialog with a checkbox and a and editbox. I have tried jquery but i cant update the java objects I had it associated with it, the get methods are accessed but not the set methods. I also tried using a dojo dialog but then the problem is that any button wont work in it after i place the datatable. It just wont close, it seems that the event isn’t firing.
Any pointers on the subject would be greatly appreciated.
Gabriel – if you are not using the XPages controls then the back end is not bound to the front end – you can load the data in the jQuery objects when the page is loaded but they are not “bound” in the same way because you are rolling your own js functionality. If you are rolling your own dojo that might be the same reason but I couldn’t say for sure.
One way you can simulate the set functionality using “roll you own” is to create a button on the page hidden with style display:none and then use your jQuery to click that button – if you write the button to execute a set then it that will send data back to the back end that way
Hope I understood the problem and I that helps 🙂
Hi Marky, Can you help to re-upload that nsf attachment? the link didn’t work anymore…thanks…or…can you send me one? thanks
Sean