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!
