Nintex Forms – Using Javascript Libraries
I wouldn’t consder myself a Javascript expert, but I like to dabble. Basically, I know just enough to be dangerous. When Nintex Forms became available, many moons ago, I found that it’s ability to allow users to add Javascript code, really exposed a lot of possibilities. Not many of which are obvious when you first look at it.
For those who are not very experiences in Javascript, you should know that there are a lot of Javscript libraries out there on the internet. Some a free and some are commercial. But both can save you a bunch of time, not having to reinvent the wheel.
Here, I wanted to show how easy it is to incorporate some of these libraries.
One library I found a while back was the “Raphael – Javascript Library”. It can be found here: http://raphaeljs.com/ . There are some awesome examples of how it can be used. Being an aussie, I was immediately drawn to one fo the examples that shows the map of Australia. So I endeavored to see if I could put it in a Nintex Form. This is what it looks like on my Nintex Form. I can move my mouse over the different Australia states and get information.
Incorporate the Raphael Library into a Nintex Form
First step is to download the Javascript library : http://github.com/DmitryBaranovskiy/raphael/raw/master/raphael-min.js
Notice it has a “min” at the end of the name. That means that the javascript has been shrunken to remove any whitespace that is not needed, but still leaves valid Javascript. The reason for doing this, is so that it takes less time for the client (IE, FireFox etc) to download all the associated Javascript files because they are of smaller size.
Store this JS file in a document library in your SharePoint farm, because you’ll be pointing to it from the form.
Now you can go to your Nintex Form designer page and click on Settings. Expand that advanced section and in the “Custom Javascript Includes”, add the url to your Javascript file.
Now that that part is done, we need to add some HTML to our page. The way to do this, would be to add a Rich Text control onto your form. When you go into the settings of this control, click inside the big edit box and you’ll a ribbon appear. On that ribbon is a button called “Edit Source”. This is where you add your HTML.
We can type or paste in some HTML. Then we’re done.
The only piece we have left, is to now add some Javascript that actually calls into your newly available Javascript library.
Where do you add Javascript to your Nintex Form?
Here we go to the fun part. We go back to our form, click on Settings in the ribbon and there is a Custom Javascript section that we expand. This is where you add your Javascript.
That is all there is to it. We simply publish this form, and it should all work. “Should” :).
Demo Video
Downloads
Download the Form – Download and import it into the Form Designer Page
Download the Raphael JS Library – Download and import it into a SP Document Library
