oliverschneider

Using multiple Forms instead of one large

Blog Post created by oliverschneider on Oct 17, 2018

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

 

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

 

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

 

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

 

Regards,

Oliver

Outcomes