cancel
Showing results for 
Search instead for 
Did you mean: 

How to create a formatted Help dialog for a Nintex Form

Nintex Newbie
30 16 13.1K

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
Nintex Newbie

Really useful article thanks Manfred Lauer​!

Automation Master
Automation Master

I know you will love this Paul Crawford

Not applicable

great information, exactly what I needed.  Thank You!

Nintex Newbie

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 -

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.

Nintex Newbie

Good idea! Thanks. Implemented

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?

Automation Master
Automation Master

Responsive forms does not allow JavaScript

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.

Nintex Newbie

Thanks for this!

Nintex Newbie

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>

Nintex Newbie

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

Nintex Newbie

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

Nintex Newbie

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

Nintex Newbie

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

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