Getting Started with Nintex Forms

Welcome to the first blog of my new series!

Nintex vTE Giving back to the Community:  Getting Started with Nintex Forms

As a Nintex vTE I’m approached daily by colleagues and customers making requests of me to come up with creative and efficient solutions for some super complex business problems.  This blog isn’t about any of that though.  Rather, its purpose is to help those of you who may be new and perhaps struggling to get started.  It’s my intention to save you time by avoiding some common pitfalls, while teaching you some of the basics.  Moreover, it’s about giving back to the Community.  Join me now as we explore Nintex Forms.

Assumptions:  Nintex forms is already installed; User possesses general SharePoint knowledge. 

Intended Audience:  Someone new to Nintex Forms.  Although the examples in this tutorial were done in on-prem, O365 will be very similar. 

Level:  Beginner

Version Information:  Sharepoint 2013 (On-prem), Nintex Forms Version: 2.9.4.0

You’ve just received word that Nintex Forms has been installed and couldn’t run back to your desk fast enough.  Having heard so many great things about it, you know that glory is yours for the taking! 

Eagerly, you begin clicking around SharePoint looking for that shiny
New Form Button.  After five minutes of hide and seek, you sit contemplating whether you should call your Sys. Admin and let him know how great the install went, or commence with banging of head-on-keyboard. 

Hold the phone and save some brain… I think I can help.

Creating your first form

Nintex Forms are usually created in one of three ways:

1.      On a list/library
2.      Directly on a Content type
3.      At the start of a workflow

Let’s walk through the steps for creating a form on a list.  This method is practically identical between on-prem and O365 versions of the product.:

Steps for Creating a Form on a List:

1) Create the list

From Site Contents -> Click Add an app
 

 2) Create the columns that you plan to use 

List Settings -> scroll down and click Create Column

Create the following fields in the list:

      -FirstName and LastName columns as Single line of text.

      -DOB column as type Date (no time).

      -LoginAccount column of type Person or Group.

      -Industry column of type Choice (as a drop-down): 
       Use [Business, Information Technology and Healthcare] as its options.
 

 (Helpful Tips)
 

• Creating columns before generating the form is optional, but it can save time.  Nintex auto-populates forms with controls connected to these columns.  This saves from having to drag-n-drop/connect them later. 
   
• Not all columns will result in a control being created.  Exceptions exist, such as calculated fields.  Don’t sweat it though, Nintex has its own calculated control available.

(Pitfall Alerts)
 

• Avoid special characters in list titles and columns.  Use CamelCase instead.  Renaming a column’s display value later is an option. 
   
•  Avoid using names that are already used internally by the system.  Doing so could result in things not working as expected and cause hard to troubleshoot situations.
   

3) Locate the list and open it up. 

Click on the List tab, which in turn will reveal the Nintex Forms icon. 

4) Click the Nintex Forms icon to bring up the Nintex Form designer. After a few moments, the newly minted form will appear:

Notice that an Attachments control along with a Save and Cancel button have been automatically placed on the form.  The coolest part is that everything works right out the box.  We could stop right here, click Publish, and be done with it all.   But, I can tell you are hungry for more, so let’s continue.

Previewing Your Form

The Preview option allows for the testing of a form before it is published.  Saving a form while previewing will not create an item in the backing list.   Clicking the Preview icon will bring up a Preview Settings screen.  It allows for the testing of formatting and validation rules, as well as any other customizations such as executing some JavaScript.  Exit preview by clicking the Cancel button on your form. 

Leave the defaults for now, and click Generate Preview.  Several options are presented to allow for customizing how you wish to interact with the form.  This includes options for type of Device, Platform, and which Mode to render:

• New and Edit modes allow users to interact with the form.  Display is intended as a read-only view of the form.   Built in rules will allow for neat things such as hiding controls based on the current mode. 
   
• If you do not see this icon (or any other), maximize the form designer window. Icons change appearance based on how much real-estate they have.
   
• If the preview window comes up blank or does not render at all, that indicates something is configured wrong.   Likely culprits are wrongly written rules, or custom JavaScript.   The same is true when viewing a live form.

Modifying the Form

Let’s add some spacing to our labels: FirstName, LastName, and LoginAccount so that they appearas First Name, Last Name, and Login Account.   To edit a specific control, double click it OR right-click and select Settings from the menu that appears; either method will open the Control Setting page.  

Make the desired changes, and click Save.  Repeat this for each of the label controls.

• Each control type has a unique Control Settings page with properties specific to that type of control.

Manipulating Controls:  Moving, Resizing, Deleting…

This may sound like a lot to learn, but believe me when I say it is simple.

Controls can easily be moved around the design surface by click-n-drag, or by using the directional arrows on your keyboard.  Simply give a control focus, and then move it to the desired position. 

Selecting more than one control at the same time can be accomplished by clicking just outside the form, and holding the mouse down while selecting the desired controls.  Use CTRL+click to select multiple controls in cases where they are not adjacent.

Moving Controls

Let’s go ahead and select all the controls starting with Title and move them down until Save and Cancel are within 2 squares worth of pixels to the bottom of the form. 

Next let’s select Login Account (both label and input control) and move them to sit right above Title. 

Finally let’s scoot everything beneath DOB back up until it touches its bottom border.

Your form should now look like the following:

Resizing Controls

Resize controls by dragging their handles either horizontally, vertically, or diagonally.  We’ve decided First Name, Last Name, and Industry could use some adjusting:

Deleting Controls

Deleting a control is as easy as giving a control focus and pressing Delete on your keyboard.  You will be prompted with a confirmation box asking you if you are sure you want to delete the selected control(s), at which point you can press OK or Cancel.  We won’t delete any controls at this time. 

Save & Publish

So far so good.  Having previewed our form and liking what we saw, now is a good time to talk about the Save and Publish options.

Save will persist the current state of design. 

Publish will save as well as make the form available for use.

Adding Controls

We won’t be adding any new controls in this particular tutorial, but it would be remiss of me if I didn’t at least mention how it can be done.  To the left side of the form designer sits the Form Controls panel.  

• Pay special attention to the Search box at the top as it is often overlooked, but extremely useful when searching for controls.  
   

Notice the control grouping at the bottom area labeled General, SharePoint, List Columns.  Selecting one of these groupings will display all the controls associated to that grouping.  For example, click on List Columns and notice how all the columns we created earlier are represented here as controls. 

If you had accidentally deleted one of your controls, you could recreate your control by simply drag-n-dropping a copy of it back onto the design canvas.  Depending on controls grouping, you may or may not have to reconfigure its settings. 

By default, controls drag-n-dropped from the List Columns grouping are automatically connected to their respective backing list columns.   With controls from other grouping you must manually set the Connect To field if you wish to persist its data back to the list.

If Drag-n-dropping controls isn’t your thing, then you can always right-click on the design canvas and utilize the insert control menu found there:

Publish the Form

5) Click Publish, and when prompted by the pop-up click Publish again. After a moment, you should see the following:

Congratulations, you’ve just created your first Nintex Form!  

Using the Form

In order to use the form, do the following:

1.     Open the list (which can be found on the Site Contents page).
2.     Click on “New Item” and wait for the form to appear.

Wrap up/Conclusion

Working with Nintex makes form development fun and exciting.  There is so much more to learn about developing with Nintex Forms that I barely scratched the surface, but I hope it was enough to get you started thinking about how and what you can do with the product.

Nintex forms greatly enhances the way in which data can be collected from intended audiences.  A better user experience, often leads to enhanced productivity. 

I hope to see you again soon,

Mike Matsako‌

Don’t forget to click  at the top of this page.