Vadim Tabakman

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.

Interactive Item

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.

Custom Javascript Includes

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.

Edit Rich Text with 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.

Custom Javascript

That is all there is to it.  We simply publish this form, and it should all work.  "Should" :).

Demo Video

 

Downloads

Nintex Forms 2013

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

Gravatar
Posted by Vadim Tabakman Thursday, October 10, 2013 12:11:00 PM Categories: Javascript Nintex Nintex Forms Nintex Forms 2013
Copyright Vadim Tabakman
Rate this Content 0 Votes

Comments

Monday, October 13, 2014 11:30:42 AM
MikeK
Gravatar

re: Nintex Forms - Using Javascript Libraries

Vadim,

I thoroughly appreciate your posts so far!   I'm new to Nintex so your wisdom has been very helpful.   I have an extensive background in SharePoint and InfoPath though.   I'm struggling with the InfoPath simplicity of setting multiple form field values via a button (i.e. to initialize or reset several fields).  As I understand it JavaScript (JS) would need to be used to accomplish this in a Nintex Form (NFM).   I am new to JS.   Do you have any tips, references, or examples on how to do this?   How do I know how to reference the desired source and destination fields (syntax)?

Thanks much!

Thursday, October 16, 2014 5:30:57 AM

Use of Relative URL in file reference

Just FYI if anyone need a relative URL in the Custom JS / CSS just like I did, you can actually use a Nintex reference to Common property "Site URL"  but it is not showing in the Advanced/Custom JavaScript Includes field.  Just add the Reference in the Custom Javascript eg:

Site URL/Style Library/scripts/MyLib.js

and cut/paste it into the Advanced/Custom JavaScript field box.

Just thought it's useful because I tried it without really knowing if it worked. Surely next version of Forms will show a little "Add reference" button next to that fields.

Thursday, October 16, 2014 8:38:21 AM

re: Nintex Forms - Using Javascript Libraries

That's awesome. Thanks for sharing that Francois.

 

 

 

Vadimcheers,

Thursday, April 30, 2015 9:04:41 AM
Ankita Rikhab Chand
Gravatar

re: Nintex Forms - Using Javascript Libraries

 How to restrict JavaScript from being called on  button click?

Wednesday, July 8, 2015 7:05:40 AM
Gopal H
Gravatar

re: Nintex Forms - Using Javascript Libraries

I have the same question Ankita aksed... In my Nintex form, I have some choice controls with the validation functions on them. All the calculations are done correctly on change of the values in choice control fields. But when I click on Submit button, the functions are called again and resetting the options I selected.

I think the better option would be to restrict from executing the Javascript functions on Button click. If someone has soulution/work around for this, please share.

Thursday, July 9, 2015 10:01:37 AM

re: Nintex Forms - Using Javascript Libraries

Hi Gopal.

you should look into what is actually causing your controls to get reset, because that sounds like odd behavior.

 

cheers,

Vadim

Tuesday, February 9, 2016 4:12:47 AM
Khalil
Gravatar

re: Nintex Forms - Using Javascript Libraries

@Fran├žois, Thanks for the solution, this is not obvious but worked for me, I'm asking myself how did you figured it out :)

You must sign in to this site to post comments.
Already Registered?
Sign In
Not Yet Registered?
Register

Statistics

  • Entries (279)
  • Comments (1769)

Categories