dcsimg
December 4, 2016
Hot Topics:

Building Workflow Solutions with Nintex and SharePoint Online

  • May 6, 2016
  • By Uma Narayanan
  • Send Email »
  • More Articles »

Introduction

Nintex for SharePoint is available in two flavors, premise and SharePoint online. In addition, Nintex also provides a 'Nintex Forms' app that helps design user-friendly UIs for add, edit, and view scenarios. In this article, we will focus on the features provided by Nintex in SharePoint online. Nintex Forms discussed here are in the context of Workflow task forms.

Description

Nintex provides a graphical user interface for creating workflows. Let's start with the installation of Nintex forms and workflows. The 30 day trial version can be installed for learning purposes from the SharePoint store. To install the app, click the gear icon and then "Add an app," as shown in Figure 1.

Nintex01
Figure 1: Installing the app

On the screen, search for Nintex and then navigate to the "SharePoint store" by clicking the highlighted link (see Figure 2).

Nintex02
Figure 2: Going to the SharePoint store

In the SharePoint Store, there are two Nintex apps available, Nintex Forms and Workflow, as shown in Figure 3.

Nintex03
Figure 3: Looking at the two Nintex apps

Install both the apps by clicking on the app and then clicking the "ADD IT" button, as shown in Figure 4.

Nintex04
Figure 4: Installing the apps

When the message appears as in Figure 5, click "Trust It" to complete the installation.

Nintex05
Figure 5: Completing the installation

Once it's installed, it's available on the Site Contents page, as shown in Figure 6.

Nintex06
Figure 6: The app is now available

We will learn the features with the help of a scenario. In an organization, the project manager's request for new projects goes through the approval cycle. Whenever a project is approved or rejected, the information is also saved in the database for reporting purposes.

First, create a project list named "ProjectInfo" with the following columns:

Nintex07
Figure 7: Creating a project list

The entry form can be created by using Nintex Forms. Navigate to the list and, in the ribbon, bar click "List tab." In the ribbon, we have both "Nintex Forms" and "Nintex Workflows" (see Figure 8).

Nintex08
Figure 8: Clicking "List tab"

Use the Nintex forms to design the add/edit form. In this article, we will look at the forms while designing a task form.

To create a new workflow in the ribbon, click "Nintex Workflow," as shown in Figure 8. It navigates the user to the Nintex designer. In the designer, there are different activities/actions on the left had tool pane named "Actions."

Our example has an approval workflow that requires a human intervention. From the tool pane, expand "User Interaction" tab and drag/drop the "Assign a Task" action on to the designer area. The "Assign a ask" action shows an exclamation icon which signifies that the action is not completely configured. To configure the action, double-click "Assign a task." Some of the properties are the same as in SharePoint designer. We will be focusing on the features provided by Nintex.

Nintex09
Figure 9: Assigning a task

The following screen shows up when you double-click "Assign a Task:"

Nintex10
Figure 10: After assigning a task

In SP designer, if the task outcome values are to be different, there are a series of steps to be followed, such as the task outcome column creation with appropriate values, content type creation, associating the content type in the task list, and so forth. In Nintex, change the outcome values in the editor and it creates the task outcome columns and the content types automatically when we save and publish the workflow.

Lazy approval helps approve or reject a task by using emails. The task email has a unique ID appended to the subject; for example:

Approval task assigned - Sample Project [La6ORT8BUUmJrBwiiPQRST]

The user can choose to approve or reject the task by replying to the email.

It also offers another cool feature where reminder emails can be configured for overdue tasks. The email body and the subject can be customized.

In addition, we also can configure emails when a task is cancelled and auto complete the task. There are three options for an Auto complete section. The default is set to "Do Nothing." The second option is to escalate and reassign the task to another person. The third option is to automatically complete the task.

In the "Assign a Task" form, in the ribbon we have an "Edit Task Form:"

Nintex11
Figure 11: The "Edit Task Form" icon

Clicking the "Edit Task Form" opens up the form designer. In the designer, you are able to see all the fields in the parent list and the default fields of the task list. Please note, if custom fields are added to the task list they are not visible on the form designer. In the form designer, ProjectInfo list fields are are available on the UI.

Nintex12
Figure 12: The form designer

Let's suppose the requirement is to extract the value from the 'percentage complete' task field, hide the task outcome field, and save the task information to the database.

On the task form ribbon, click "Form Settings."

Nintex13
Figure 13: The Form Settings icon

In the modal window, there are three sections that help in customizing the UI and include JS references. In the Custom CSS section, add CSS classes that are required for the UI (inline CSS). If small JS snippets are to be included, that can be added to the "Custom Javascript" section, like hiding a field.

Nintex14
Figure 14: Three sections in the modal window

Before writing the JavaScript, in the task form double-click the field you want to hide. In this example, we are hiding the "TaskOutcome" column. In the properties popup window, expand the "Advanced" section. Change the control mode to 'Edit;' this is to ensure this column is hidden in both view and edit modes of the form. Save the clientID to a variable named "taskOutcome," as shown in Figure 15. Once configured, save the changes.

Nintex15
Figure 15: Saving the clientID

Click 'Form Settings' again as shown in Figures 13 and 14. Sample code for hiding the field is shown below:

NWF$('document').ready(function(){
   NWF$('#'+taskOutcome).hide();
});

Like in Jquery, we have the ready function; in Nintex, '$' is prefixed with NWF$. In the code snippet, we retrieve the element and use the hide function to hide the control.

If the CSS classes are shared across forms, the best practise is to add them to a CSS file and refer to the CSS file location in the "Custom CSS includes" text area in "Advanced" section, as shown in Figure 16:

Nintex16
Figure 16: Adding to the "Custom CSS includes" text area

Similarly, include external JS files in the "Custom JavaScript Includes" text area. If multiple references are to be included, like the JQuery JS file and the custom JS file that calls the web service to save the task form to the database, add each references in a separate line in the text area. Similarly, multiple CSS files can be included on separate lines.

To implement custom JS code on the button, in the form designer double-click the element. It opens up the property modal window. Expand the "Advanced" section and, in the client, you can include the JavaScript code and also call external methods.

Sample code to set the outcome value:

NWF$('#'+taskOutcome +'_0').prop("checked", true);

The outcome values are suffixed with integer numbers; in other words, if we have two outcome values in the order when defined as "Approved" & then "Rejected", then approved has the suffix 0 and rejected has 1. Another way to retrieve value is as follows:

NWF$("div[data-controlname='Complete'] input")

Where 'Complete' is the percentage complete column.

To call an external JavaScript function, call the function as in the following example:

NWF.FormFiller.Events.RegisterAfterReady(function ()  {

   // Call the external function
});

In this example, the external JS function will the take the required input parameters and then call the Web service that writes to the database.

Summary

In this article, we saw the different features provided by Nintex for SharePoint online. We also saw how to customize the form with CSS and JS inline within the form and also by referring external files. Nintex helps in creating Workflows much more quickly and also offers a much friendlier approach for customizations. However, if there is a requirement where the workflow is required for a timer job kind of implementation that runs every day, I would recommend going for SP designer WFs as I have seen errors after running for 2-3 days.


Tags: SharePoint, workflow, SharePoint Designer, SharePoint Online, Nintex

Originally published on http://www.developer.com.


Comment and Contribute

 


(Maximum characters: 1200). You have characters left.

 

 


Enterprise Development Update

Don't miss an article. Subscribe to our newsletter below.

Sitemap | Contact Us

Thanks for your registration, follow us on our social networks to keep up-to-date
Rocket Fuel