How to create a formatted Help dialog for a Nintex Form

mlauer
Connector Crackerjack
30 16 15K

To show a guide to fill in complex forms, a tool tip is often not enough. Formatted instructions may be displayed in a separate dialog by clicking on an info button:

It's a floating window that contains a title bar and a content area. The dialog window can be moved, resized and closed with the 'x' icon by default or by pressing escape key.

How can that be done in Nintex Forms?

First of all create an info button:

I used File:Information green.svg - Wikimedia Commons as button image.

Here is the client click coding:

NWF$("#Topic_1_help").dialog({

    title: "Topic 1",

    hide: {

        effect: "fade",

        duration: 1000

    },

    maxHeight: 400,

    minWidth: 500,

    modal: false

});

Here the jquery-ui dialog widget is used to display help text. Modal behavior here is non modal, but can be changed to modal setting option modal to true.

Now create a Rich Text Control in your form and enter help text:

In control settings Visible has to be set to Yes. To hide the Control use css class, e.g. info-hidden and css in form settings: .info-hidden {visibility: hidden;}

Next step is to define the ID #Topic_1_help used in button client click coding. For that edit source of help text:

Enclose full source text with <div id="Topic_1_help">.... your help text.... </div>

That's it!

16 Comments
themos
Nintex Newbie

Really useful article thanks Manfred Lauer​!

cassymfreeman
Automation Master
Automation Master

I know you will love this Paul Crawford

Not applicable

great information, exactly what I needed.  Thank You!

courtney_shelto
Nintex Observer

I'm trying to implement this, but I'm running into a problem. Is this functional for the 365 deployment of Nintex Forms? Here's what I have:

Button Settings-

Rich Text Source -

Form Settings -

Result when the button is clicked on the published form -

kanderson9
Nintex Newbie

I have followed all of the steps listed; added and configured the icon, and added and configured a Rich Text box.  So the form looks like the below (form snippet)

Request form snippet

I have 2 concerns/questions:

1 - The 'Request" under the Information icon is actually the Rich text help box.  What or where do I put that so it is not visible until a user clicks on the Information button.

2 - After clicking on the Information icon, a "Message for webpage" popup appears (see below).  After clicking on the OK - I then get the Rich Text box with the formatted Help text.

Message from Webpage

Can you help me determine what I am doing wrong?

Thank you so much.

swap
Cloud Wanderer

Good idea! Thanks. Implemented

mike_hoover
Nintex Newbie

I was getting ready to implement this, but then found that if I use the responsive layout, I do not get a JavaScript function on a button control.  But if I use classic view, I do get it.  Is there a way to use this method in responsive mode?

cassymfreeman
Automation Master
Automation Master

Responsive forms does not allow JavaScript

mike_hoover
Nintex Newbie

Yeah, I've noticed lately there is a lot of things that I am not able to do in responsive mode, as compared to classic mode.  It is kind of making me rethink my strategies and methods to use other solutions.

chelledavis11
Design Dabbler

Thanks for this!

bimi82
Workflow Hero

Where do I inlcude the jquery-ui widget?
I suppose it is the links below:

<link rel="stylesheet" href="https://code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css">
<script src="https://code.jquery.com/jquery-1.12.4.js"></script>
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>

mlauer
Connector Crackerjack

The widget is part of NWF$. You need no additional includes.

bimi82
Workflow Hero

Leider klappt es bei mir nicht .
It is kaputt lol ... I followed your instructions but when clicking on the icon it does not react at all.

PS: I am on SP2016 and Nintex 2016 on premise

mlauer
Connector Crackerjack

Are there any JavaScript errors shown in web console of the browser?

bimi82
Workflow Hero

no, no errors whatsoever.
The click on the icon does not action anything ...

lonesurvivor
Cloud Wanderer
As I didn't find out how to post images or code to the comment, I posted a new entry about how to get helptexts dynamically from outside the Nintex form. You can find it here: https://community.nintex.com/t5/Nintex-for-SharePoint/How-to-create-a-formatted-Help-dialog-for-a-Ni...