All,
We have seen this in many sites that we use daily. I had a similar requirement from users to provide help for the choice that is selected from the Drop Down field. It could be description of the field or something else related to that field.
I was just beginning to use Nintex Forms and due to the JScript and CSS capabilities, I wanted to give this a shot. Following things are main components of this solutions:
- Creating lookup and calculated field.
- Applying CSS to make a picture button.
- Generating an Alert with javascript.
A - Setup List for lookup and description
- Create a list (List1) with 2 columns. Document Type, Description.
- Add few items in this list.
| Document Type | Description |
|---|---|
| Acceptance Sheet | Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus eros diam, posuere sed risus ac, tempus aliquet justo. Curabitur non fermentum pur |
| Assembly Drawing | Aliquam bibendum eget libero sit amet condimentum. Nulla blandit sed nunc a malesuada |
| BETA Trials | Vestibulum mauris felis, aliquet non aliquam at, dapibus id risus. Integer imperdiet, sem laoreet tempor pellentesque |
- Create another list (List 2) which will be used to Save the details. Add The Document Type column as Lookup from List 1.
- Edit the Nintex form for this list. The form would look as below:
B - Create Help button and apply CSS
Now we can add the Help button next to our Document Type and apply some CSS to make it look like Help.
CSS - Place this in Settings > Custom CSS :
.HelpButton
{
background:url('/../PublishingImages/Question.png') no-repeat;
width: 30px; height: 50px;
border:none;
}
Open the settings for the button. Change the Button action to Javascript and expand the Formatting section. Type the name of the CSS in CSS class box.
The form should look something like this:
C - Generate alert with Javascript
The last part is to show the help description.
- Create a calculated field on the form to retreive the Description from List1 which has mapping to document type. the expression would be something like this: lookup("Document Type","ID",DocType,"Description") [DocType being the name of the dropd down lookup field]
- Name this field as myDocDescr.
- Open the settings of the Help Button and add function DocDescr() to the Client Click in Advanced section.
- On Form Settings, add the following Javascript:
NWF$(document).ready(function(){
});
function DocDescr() {
var myDocType = NWF$('#' + myDocDescr);
alert(" " + myDocType.val());
}
- Add the following rule to hide the calculated field from the form: myDocDesc!="" > hide.
- Note: the calculated field will always be hidden as long as an option is available in the drop down. Remember you cannot change the visibility of this calculated field as JScript will not be able to retreive value from it.
That is all. Save and Generate the preview.
