We have worked in a solution for the annually employee’s performance review process. The whole solution is powered by Nintex Technologies for SharePoint 2010 (I know, caveman here, sorry!), but that was not even the worst part. We faced few problems related to the fact that the form was pretty large and some users will need to have the form opened for a long period of time - typically during a manager/employee meeting that can last one or two hours. The issue is that SharePoint, by default, has the form digest value set to 30 minutes. This means that after this period, when one attempts to submit the form, the user will receive a nasty error message and will lose of all the data entered. This is a terrible situation and in this article, I will try to suggest two functionalities that combined can offer a way better user experience:
 

• “Save”, “Save and Submit” and validation rules: Apparently with NF 2013 version and higher, the “Save and Continue” would do the job, but for 2010 we need to take the longer journey. On this must read post,   explains pretty well the solution at the workflow level: http://vadimtabakman.com/nintex-forms-save-or-submit.aspx , but at the form level, “save” should ignore the validations and “save & submit” should apply the validation rules. That’s exactly what I will try to handle on the first part of this article.
  Note that the "Causes Validation" property is only supported for JavaScript button types
  
  After following the steps described on the Part I of this article, the form should handle “save” (ignoring the validation rules) and “save & submit” (applying the validation rules).
   

• Keep form data alive: The “Save” button will give the possibility to save your form, but the user will have to do that every 30 minutes. In addition, the form will get closed after clicking on “Save”. Not handy at all. On this article http://www.ashu-tosh.com/2017/01/nintex-forms-implementing-auto-save.html Ashutosh describes an approach for  auto saving the form, but saving kicks the validation rules which could be a problem (addressed on the part of my article) and the form is closed after saved. While it is good that the work is automatically saved, the user will have to open the form again and continue with the editing.  What if we don’t wanna save, but continue to work on the form without interruption (well, with a minor post back interruption)? That’s what is addressed on the second part of this article.

Part I - Save, Submit and validation rules

1 – Create a textbox and name it Validate – add this anywhere in the form as this control will be hidden at the end.

2 – Set the textbox properties - set the default value to 0 and the Data Type to Integer. On the advanced tab, click make sure to set “yes” to the “Store Client ID in JavaScript variable” to yes and name the variable, like varValidate.

3 – Change the labels for the “Save” and “Save & Submit” buttons to “Save Backend” and “Submit Backend” respectively. Also change the css class to be saveButton and submitButton.

4 - Move these buttons to another area of the form, as they will be hidden at the end. Then create two new buttons “Save” and “Save and Submit”, but change the button action to be “JavaScript” for both of them. Those are the buttons that will be shown to in the form.

5 – Here is where we will do the logic with the Validate control. Basically we want to allow our users to Save or Save & Submit (our backend buttons), but we want to change the validate control (flag) on or off. So, the save button will change the value of the Validate control to 0 and then call the click event for the Save Backend button by using JavaScript.

The very same logic should be applied to the Submit button, but with a reference to the submitButton class on the Client Click.

NWF$("#" + varValidate).val(1);NWF$('.submitButton').click();

6 – Now we need to change our validation rules to consume the Validate flag. For exemplo, if you have a validation rule like…

You will need to add the “and” function and get check if the value of the validate control is equal to 1.

We will have to change each and every validation rules in the form in the same way.

7 – The very last part is to make sure the Validate, Save Backend and Submit Backend are hidden. Note that if you try to change the visible property to false, you will have an error because the control needs to exists as HTML element because it will used on the JavaScript code. So, we can just create a "HideAlways" Formatting rule.

And apply to the Save Backend, Submit Backend and Validate controls, by selecting them and choose “Add to selected controls”

Part II - Keep form data alive – auto form session renewal

1 – Add a button to the form in any location as it will be hidden at the end. Set the Button Action to “JavaScript” and change the CSS class to “AutoRefreshButton”.

In “Advanced”, for the Client Click, add the following piece of JavaScript code:

NWF$(this.form).submit();

So, the control settings should look like the image below:

2 – The end result will be that from time to time a post back will be fired and the page will be loaded again. We want to present to the users how long time it will take until the session is refreshed with a countdown. For that we need to add a text box control and a label control “form session renewal in”:

For the TextBox control we need to set “Store Client ID in JavaScript variable” to Yes and give the variable name “varSessionCountdown”

3 – We need to make sure that the AutoRefresh button (step 1) is "clicked" after (mins) minutes. So, in the form settings, add the following JavaScript:

var mins = 28;

var secs = mins * 60;

var currentSeconds = 0;

var currentMinutes = 0;

NWF$(document).ready(function () {

    SetAutoFormRefreshTimer();

});

function SetAutoFormRefreshTimer() {

    if (Is New Mode || Is Edit Mode )

    {

        setTimeout('Decrement()', 1000);

    }

}

function Decrement() {

    currentMinutes = Math.floor(secs / 60);

    currentSeconds = secs % 60;

    if (currentSeconds <= 9) {

        currentSeconds = "0" + currentSeconds;

    }

    secs--;

    //Set the element id you need the time put into

    NWF$("#" + varSessionCountdown).val(currentMinutes + ":" + currentSeconds);

    if (secs > -1) {

        setTimeout('Decrement()', 1000);

    }

    else {

        isFormSubmittedAlready = NWF$('.AutoRefreshButton').is(':disabled');

        if (!isFormSubmittedAlready) {

            NWF$('.AutoRefreshButton').click();

        }

    }

}

Note: Remember to replace the  "Is New Mode" and "Is Edit Mode" in the code with the proper references:

4 – The very last part is to hide the Auto Refresh Button and for that we can use the rule HideAllways mentioned on the step 7 of the first part of this post. You may also want to hide the controls related to the counter when in display mode. For that, just applied the rule below on the selected controls.

For testing, change the "mins=28" to "mins=1" and take it for a spin. 

That’s all folks! Happy Nintexing!