Vadim Tabakman

Logo

Lame picture above ha? :)

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).

 Form Design

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.

Cookies Javascript

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 :

Firstname

and likewise for the Lastname and Department controls:

Lastname

Department

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

Posted by Vadim Tabakman Saturday, April 27, 2013 9:05:00 AM Categories: Cookies Javascript Nintex Nintex Forms
Copyright Vadim Tabakman
Rate this Content 0 Votes

Comments

Friday, October 9, 2015 4:22:42 AM
Leif Frederiksen
Gravatar

re: Nintex Forms - Cookies

Hi,

This solution works - almost....

My problem is, that I have dropdowns that are populated from Sharepoint list data. That means, that when the NWF$(document).ready event fires, the lists may not yet be loaded.

Is there another event hook, that I can use instead of the document ready event?

 

Regards

Leif

Friday, October 9, 2015 5:57:29 AM

re: Nintex Forms - Cookies

Hi Leif,

the only events I know off are described here: https://community.nintex.com/docs/DOC-1217

I haven't messed around with getting the event for when a list lookup is populated.  You may want to reach out to the Nintex support team to see if they have anything.

cheers,

Vadim

Tuesday, October 13, 2015 4:28:25 AM
Leif Frederiksen
Gravatar

re: Nintex Forms - Cookies

Will this work on Nintex Mobile App forms? Both in online and offline scenarios?

Tuesday, October 13, 2015 5:42:31 AM

re: Nintex Forms - Cookies

hi Leif,

this won't work for the mobile app. The app is not browser based and so it doesn't have a concept of cookies.

 

vadim

Wednesday, October 14, 2015 1:08:45 AM
Leif Frederiksen
Gravatar

re: Nintex Forms - Cookies

Hi Vadim,

 

I struggled some more, and came up with something that seems to work. I introduced another function called handleCookieDefaulting, so the code needed to write in the "Custom Java Script" editor can be minimized to a call to this function. It takes two parameters: The client ID javascript variable, and the name of the cookie. Basically I just want the name of the cookie to be the name of the javascript variable, that way minimizing the function to have only one parameter, but could not get that to work.

Anyways, my version of NFCookies.js looks like this:

---------------------------------------------

function handleCookieDefaulting(variable,name) {
    var element = NWF$('#' + variable);
    var cookieValue = readCookie('NFCookie_' + name);
    if (cookieValue != null) {
        var options = element[0].options;
        element.val(cookieValue);
    }

    element.change(function() {
        var cookieValue = readCookie('NFCookie_' + name);
            
        // No value yet selected - initialize from cookie...
        if (NWF$(this).val() == '' && cookieValue != null) {
            NWF$(this).val(cookieValue);
        }
        // User changed the value from one thing to another - update the cookie...
        else if (NWF$(this).val() != cookieValue) {
            createCookie('NFCookie_' + name,NWF$(this).val(),10000);    
        }
    })
}

function createCookie(name, value, days)
{
    if (value == '') {
        return;
    }
    
    if (days) {
        var date = new Date();
        date.setTime(date.getTime() + (days * 24 * 60 * 60 * 1000));
        var expires = "; expires=" + date.toGMTString();
    }
    else {
        var expires = "";
    }
    
    document.cookie = escape(name) + "=" + escape(value) + expires + "; path=/";
}

function readCookie(name)
{
    var nameEQ = escape(name) + "=";
    var ca = document.cookie.split(';');
    for (var i = 0; i < ca.length; i++)    {
        var c = ca[i];
        while (c.charAt(0) == ' ') {
            c = c.substring(1, c.length);
        }
        
        if (c.indexOf(nameEQ) == 0) {
            var ret = unescape(c.substring(nameEQ.length, c.length));
            return ret;
        }
  }
  return null;
}

function eraseCookie(name)
{
  createCookie(name, "", -1);
}

 

Regards

Leif

Thursday, October 15, 2015 9:47:23 AM

re: Nintex Forms - Cookies

Thanks for sharing that Leif.

Tuesday, October 20, 2015 2:45:59 AM
Leif Frederiksen
Gravatar

re: Nintex Forms - Cookies

Oh, really bad news that it will not work in the Mobile App.

Any suggestions on how to handle the with "defaulting to last used value in drop down" in that environment?

Are there other stuff that one should be aware of that is different from the browser version?

Regards

Leif

Tuesday, October 20, 2015 8:56:36 AM

re: Nintex Forms - Cookies

hi Leif,

I don't have any recommendation for this feature in the Nintex mobile app. I'd recommend you put the request on Nintex.uservoice.com

cheers,

Vadim

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

Statistics

  • Entries (279)
  • Comments (1769)

Categories