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
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.
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.
Initial XPages form
Submitting the form gives us our new value
XPage with new Apples value added
The XPage is laid out very simply and our View control is called viewPanel1
View Panel on the XPage
We add the drawHighchart Custom Control to the XPage
Adding the drawHighchart custom control to the page
And let’s refresh our webpage – et voila – a chart
A simple Highchart added to our XPage
Changing the chart type is as simple as selecting a new theme and/or a new chart type
Changing the Highchart style
For more information on how this works check out the next article
Web Components – Entering the ShadowDOM….
Wed, Jul 9th 2014 9:18p Mark Roden Web Components – the future
You should first ground yourself on Web Components and read this article on Web Components and concepts, ShadowDOM, imports, templates, custom elements by Todd Motto.
Then listen to this Podcast (thanks to Steve for pointing it out) - Web Components with Peter Gasston
Once you have read/listened you will have some idea and concept about Web Components and how they are the future…..
But what I wanted to show briefly was how to enable the ShadowDOM in C [read] Keywords: agent
Hi Chicago – what changed?
Wed, Jul 2nd 2014 7:16a Mark Roden Well it has been on the cards now for 6 months but we finally did it. My family and I moved from Virginia to Chicago and I have started working out of the PSC office in Schaumburg, IL.
I was asked nearly 18 months ago if I would consider moving, but for mostly family reasons it took a year or so to organize and agree this was the right thing to do for my career and just as importantly for the family. Working at home has been wonderful for the past two years. But it was also a little limiting [read] Keywords: office
Angular.js in XPages #5 – Routing
Sun, May 25th 2014 6:52p Mark Roden In this article I will show how angular using routing to create a bookmarkable URL string and how that fits together with additional controllers. This will start us on the path to creating our basic CRUD application. This article is based on the Routing and Multiple views tutorial
Way back when the world was young (in internet terms a couple of years ago), when single page apps were all the rage, it was noticed that there was a significant drawback to only having one URL index.html; [read] Keywords: ibm
jQuery Promises – Taking action .when() multiple ajax calls are complete
Wed, May 7th 2014 6:52p Mark Roden jQuery.when() – “Provides a way to execute callback functions based on one or more objects, usually Deferred objects that represent asynchronous events”
Wouldn’t it be nice to be able to know when two ajax calls are both complete – and then process the data returned from both, at the same time ?
Off the top of my head I would normally achieve this using a callback – and I have done so in some of my ExtJS in XPage [read] Keywords: xpages ajax