Nintex Forms – Cookies

Cookies are a common technology used when filling in forms online (and they have other uses).  I found a common theme in some of the forms I was designing using Nintex Forms and I thought I’d utilize cookies to store some information on the client machine, so that the user wouldn’t have to retype the same thing over and over again.

A common scenario would be a very simple form where you fill in your Firstname, Lastname and the Department you work in.  For the most part, this information won’t change.  To save yourself some keystrokes, especially for people with really long names :), you can store and retrieve that information in cookies in the browser.

SharePoint List

Firstly, I created a SharePoint list where you can create items and I assigned a Nintex Forms to that list.  The contains 2 text fields (Firstname and Lastname) and a choice field (Department).

Cookies Javascript

Based on some Javascript I found online (not sure where now), I put together a small Javascript file that contains 3 functions – createCookie, readCookie, and eraseCookie.  You can download the file at the bottom of this post, in the Downloads section.

To use it, I put it into the “Styles Library” on my SharePoint site.  In my Nintex Form, I clicked on Settings in the Ribbon and added this file path to Javascript Includes.

We now have the ability to read and write cookies from our Nintex Form.

Using the Cookie functioniality

We have 2 things we need to do.

1. Write Cookies based on what a user has filled into the form

2. Read Cookies and update the fields so that the user doesn’t have to type them in again.

In order to do any of this, our Javascript needs to find the controls so that it can read and write to them.  The easiest way to do this, is to open the properties of each control, expand the Advanced section and store each controls ID into a Javascript variable.

For the Firstname text fields :

and likewise for the Lastname and Department controls:

Now we are reading to work with these controls and write the appropriate Javascript to read and write to them.

Below we have some Javascript that will run each time the form is loaded.

It first finds all the controls, adds an on-change event handler so that when a text field or choice field is changed and we update the appropriate cookie.

Then we add the Javascript that will read the cookies and update the appropriate controls, so that on loading up the form, if the cookies exist, the data will auto-populate the fields, saving us a lot of time and we can concentrate on filling in the important parts of the forms (if we had some).

Note : in the createCookie function calls below, I have the number 31.  This is the number of days this cookie will be alive.  You can decrease or increase as you see fit.Nintex Forms Javascript 

NWF$(document).ready(function()
{
  var txtFirstname = NWF$('#' + varFirstname);
  var txtLastname = NWF$('#' + varLastname);
  var choiceDepartment = NWF$('#' + varDepartment);

  choiceDepartment.change(function()
  {  
    createCookie('NFCookieDepartment',NWF$(this).val(),31);
  });

  txtFirstname.change(function()
  {  
    createCookie('NFCookieFirstname',NWF$(this).val(),31);
  });

  txtLastname.change(function()
  {  
    createCookie('NFCookieLastname',NWF$(this).val(),31);
  });

  var cookieValue = '';

  cookieValue = readCookie('NFCookieFirstname');
  if(cookieValue != '')
    txtFirstname.val(cookieValue);

  cookieValue = readCookie('NFCookieLastname');
  if(cookieValue != '')  
    txtLastname.val(cookieValue);

  cookieValue = readCookie('NFCookieDepartment');
  if(cookieValue != '')  
    choiceDepartment.val(cookieValue);

});

Video of Forms Cookie in Action

In the video, you’ll see the first time I go to create an item, none of the field (except Department) are set.  When I fill them in and save the item, the next time I go to create a new item in this list, all 3 fields are prepopulated with the data I typed in or selected previously.

Downloads

 Cookies Javascript File: Download Javascript File

 Form Design: Download Form Design

 List Template: Download List Template