Skip to main content

I had the problem with a very large form. It was about 6000px long and had too many fields, calculated fields, JavaScript... When a colleague open it, it takes about 30 seconds to load. It is our form to place an internal order.

 

I found a lot about multiple forms with Tabs, but this didn't solve the Problem because all the stuff had to load when the form was opened. So here is my solution and I hope someone can use it too.

 

First of all I exported the old form. You can load it into every step and delete the parts you don't need in the actual step. I don't want to build it from scratch... wink.png

 

What are the problems with multiple forms?

- You can built a few workflows and use the startforms.

- How can you address these forms form the previous form?

- Can I go back to the previous form to do some changes?

- If I use Links for the "Save"-Buttons is there a validation?

- When starts the regular Workflow?

 

It is not so hard as it seems...

... with a few tricks and a little bit JavaScript... grin.png

 

So here we go:

  • For the first form I use the startform from the element (New Element in SharePoint-List). So I did my changes to the old form and save it.
  • Then I generate a new listworkflow and open the "Workflow-Settings" -> "Startform". Here I place the second part of my form.
  • Go on and generate as much workflows with parts of your form as you need...

 

There are a few things you have to do with these Workflows:

1. Set both start workflow settings to "NO"

2. There are no actions in these "form"-workflows. But you need to place one to save and publish the workflow. I usually use a protocol action.

The values form the forms are saved with the form itself. So connect your fields to the listcolumns!

 

Links between form part 2 and part x

Now I had 6 forms aka 6 Steps of my form. The Problem is how to jump from one part to another?

First you need the address of the following form. You will get these by starting every workflow at an element. The form appears and you can copy it form your browser e.g. this one (with all it's IDs):

 

http://YOURWEBSITE/_layouts/15/NintexForms/InitiateWorkflow.aspx?List={lsitID}&ID=89&ItemGuid={itemID}&TemplateID={templateID}&Source=sourcehtml

 

The ID is the most important value here, because you need to reference the right element. Save all href of your formparts.

 

For step two to the last part of your form (workflow) this is easy. Just enter the href of the next part in "Settings" -> "Advanced" -> "Redirect URL" and don't Forget to reference the ID with the ID of your element.

 

If you want to have back-Buttons (previous formpart) you can insert Javascript buttons with the following code in "Advanced" -> "userclick":

window.location.href='href to your formpart';

 

 

Link between startform and form part 2

Here is the problem with the startform of an new element. There is no element until you save your form. So how to get an ID of the element we just want to save? This can be solved with JavaScript.

 

  1. Delete the regular button "Save and Submit" and replace it with "Save and Continue". This saves the data and generate our element with its ID.
  2. To jump to the next form insert the following JavaScript into "Settings" -> "Custom JavaScript"

    if (NWF$('.nf-validation-summary').css('display') == 'none') { 
    var elementID = ID;
    if (elementID > 0) {
    window.location.replace('http://YourWebsite/_layouts/15/NintexForms/InitiateWorkflow.aspx?List={listID}&ID=ID&ItemGuid={itemID}&TemplateID={templateID}&Source=sourcehtml'); 
    }
    }

    So the href is only triggered when the validation is good and an element-ID is given.

 

This brings us to another problem. The validation is to slow and the script shoots you to the next form. Here is a Workaround for this one:

 

 

  1.  You need another button. Button 1 is the "Save and Continue" button.
    Change the css-class to "savebutton"
  2. Button 2 is a regular "cancel" button
  3. Button 3 is a JavaScript button with the following script:
    Page_ClientValidate();
    if (NWF$('.nf-validation-summary').css('display') == 'none') { NWF$(".savebutton").click(); }
  4. To hide the button 1 use the following css in "Settings" -> "Custom CSS"
    .savebutton{ visibility: hidden; }

Please make sure you have all the dots in the declarations... wink.png

 

Start your workflow 

To start your workflow after the last form you have two options.

1. Insert your actions in the workflow of the last form, then it will start after the user click Save and Submit.

2. Or place an "update element" Action and place a "Go" in a special column. I set my main workflow to start by condition "Go" in my column. So it will start when it get the Go!

 

Make sure you set up an extra workflow to delete an element, when the user clicks cancel.

 

 

 

Hope this is helpful grin.png

 

Regards,

Oliver

Which nintex / sharepoint platform have you made this guide? (we have sp2013 on-prem)


Hi Bente,

This guide is on Nintex 2013 with SharePoint 2013 Foundation on premise.


Hi Oliver Schneider,

That is a very interesting way to solve the problem of long forms when you don't have the option of adding 'pages' into the design. The sooner Nintex gives you the option of having pages in forms the better (Nintex Workflow Cloud isn't an option right now).

I came across your post purely by accident, however I'm going to be starting a piece of development for a client next week where they have a *very* long form (25 pages in a word document). This looks almost perfect. I'm just hoping that it will work in O365.

My only question for you is what does your list look like? Is it just a normal list with 150 (for example) columns in it?


Hi Nigel,

my list have nearly 180 columns. So a much data is used just in the list. There are much more fields on the form for calculated values or lookup fields...


Another approach could be to create the first form as the list form and then start a workflow when the user clicks submit. 

But instead of multiple start forms use tasks in a workflow with custom task forms, which represent the additional steps. This way you could model conditional steps in the workflow, which could be very easy to understand and to visualize. 


Hi Henning,

this is the usual way, but I have 8 Steps and every time an user click submit he has to wait for the next step and open an email with a link to the next task. I want to avoid that. It is very disappointing for the user to open 8 emails and then he have to wait a minute or more until the next email is showing up.

After the last step I start the regular workflow. There can be more tasks too.


Reply