pesikwane

Putting Nintex Flexi Task Forms in “context”

Blog Post created by pesikwane on Apr 20, 2015

Greetings again

 

Have you ever been in a situation where you had to build a SharePoint solution that included one or more of the following?

  • A really good-looking yet complex Nintex Form (involving a repeating table, or perhaps contain some customisation done using JavaScript and/or fancy HTML/CSS)
  • A Nintex Workflow that makes use of Flexi Tasks
  • Descriptive email notifications

 

Then after building what may seem to you a practical solution; on the day you demo your solution to a client; you get asked one or more of the following questions by the end users:

 

"Why do I have to click different links to view different information?" "How do I go back to see the item I am approving again? Which list is it sitting on again? Wait how do I get there again? This is so complicated"

 

"Ok fine, I can see this is same information, but why does this look different from the actual form which was submitted by the originator?"

 

Have you??? Well folks… the truth is… it happens for one reason or another; and I see it as both a learning curve and a challenge for what we do as consultants/solution specialists. Another truth is that you can see how users appreciate the solutions we as consultants/developers build by how often they use them, and how less often they ask for changes ; after all aren't solutions meant to solve problems rather than create them? With that said, I would like to show you a little trick I've learnt with Nintex Forms and Flexi Tasks… J

 

First things first,

What is a Flexi Task?

So according to the button (that everybody ignores) in the Assign Flexi Task Action modal dialog; a Flexi Task is defined as: "This workflow action will allow the assignment of a task to one or more users and request a specific outcome. The list of possible outcomes is determined by the person designing the workflow." See that? So what this means is we as workflow designers have the power to customise our outcomes for any flexi task and furthermore; FLEXI TASKS CAN HAVE CUSTOM NINTEX FORMS …

 

Look:

 

Okay… to some of you this might be common knowledge (big deal right?)… But when I first realised that a Flexi task can have custom forms, the following things came into my mind:

  • The Page viewer control on Nintex Forms à
  • The Context Item URL variable that's available under à
  • CSS and the IsDlg=4 url query parameter (I'll explain and show why this is important a little bit later)
  • Nintex Forms tabs

 

 

 

Why? Because these elements are the main ingredients needed to view the form of Current Item; which the Assignee of the Flexi Task; is approving…J

 

Wait but….Flexi tasks do this for you by default…but there are some limitations from an end user experience because the OOTB flexi task form ignores the look and feel of your custom item form but it does provide a link to the item form, but I've seen some users whimper about the additional mouse click involved which could lead to either a new tab or a new window or worse the same window, which would require the user to use the back button to complete their task…

 

So where exactly am I going with this? A practical solution would be to put all your information on a single form/view for your approvers. I.e.:

 

1. Your custom Nintex list item form

2. The task outcome section that allows users to complete their tasks

3. Provide the users with a tab to switch between the task outcome section of the form and your list item form So in a nutshell what you can provide as a solution to end users who want to do less clicking etc. when they are required to complete a Flexi Task is something like this:

Figure 1 Approvers complete their task(s) in this view

Figure 2 Approvers can see the actual form of the item they are approving

 

Looks awesome neh?

So how do we achieve this?

Customise your Nintex List Item Form

  1. Open Form Settings
  2. Add the following CSS to under Custom CSS

/*hide top bar*/ #suiteBar {display:none;} /*Hide side nav*/ #sideNavBox {display:none;} #contentBox { margin-left: 0px; } /*Hide table footer*/ td[class="ms-formline"] { display:none; } table[class="nf-form-footer"] { display:none; }

Customising your Flexi Task Form

  1. Now you can edit your Flexi Task form within Nintex Workflow Designer and perform the following steps:
    1. Create a blank workflow
    2. Add a Flexi Task Action
    3. Configure the your Flexi Task's Nintex Form :
      1. Add a choice control and set the following properties:
      2. Delete everything Under List item Properties (yes, seriously – delete it )
      3. Add a panel and put the Task Outcome controls into your panel. Your form should look like this:
      4. Now add a Page Viewer Control below your Panel, and put in the following configuration
      5. Save the settings on your Page Viewer Control

 

Now we need to add our rules on the Flexi Task forms

  1. Select the Panel we added above and click on the button, and configure your rule, give it a descriptive name (e.g. Show when Task Outcome is selected) and configure in the following way:

Next we must add a similar rule for the Page Viewer Control. Select your Page Viewer Control and add the following rule

  1. Now we can publish our form
  2. Click Save then close your Form, thereafter publish your workflow
  3. Run and test J

Notes

  • Ensure that the width of your Page Viewer Control is bit more than the width of the actual List Item form to prevent horizontal scroll bars
  • This example was done on a vanilla on Premise Instance of SharePoint 2013 with no custom master pages
  • Nintex Workflow Version 3.0.7.0 and Nintex Forms Version 2.3.2.0 was used for this. Please refer to following links for detailed information (version history, release notes, limitations, bug fixes, enhancements, limitations etc):

I hope this helps someone out there. Have a good week

Outcomes