The Element Properties -
Visible and Disabled Properties
The Visible property allows you to display and hide an Element. If the value of the property is true, the Element will be displayed on the form; if false the Element will not be displayed. When an Element is hidden, the page will be rearranged as if the Element weren't there.
The Disabled property allows you to specify whether you want an Element to be enabled or disabled. If the value of the property is true, the Element will be disabled; if false the Element will be enabled. A disabled Element is displayed on the form but it is greyed out and the user is unable to interact with it.
By default an Element will be displayed and enabled.
Within the Properties Pane, both properties have True and False boxes: , followed by an Expression box,
as shown in the picture above.
The True and False boxes allow you to directly choose to set the property to true or false.
The Expression box, on the other hand, allows you to enter a custom JavaScript expression which will be evaluated at runtime to determine the value of the property. An expression is repeatedly evaluated whilst the form is in use and can, therefore, be used to show/hide and enable/disable an Element in real time. You can use this to only show or enable Elements which are relevant to a user based on their answers to previous questions.
To enter a JavaScript expression, click on the box to load the Expression Builder pop-up which allows you to type in your expression:
Click on the Save button to save your changes or on Cancel to abandon any changes. The Reset button will clear the current expression and reset this property back to its default value.
Visible:
- show Element
- Hide Element
- JavaScript Expression specified - if the expression evaluates to true, the Element will be shown, if false, the Element will be hidden.
Examples: you could specify that a particular Element is only shown if the checkbox above it is selected, by entering an expression such as: form1.page1.ndlcheckbox1.value == 'true'. Note here that true and false are actually strings within the property's value and hence must be in quotes.
Or you might want to display an Element in the Header or Footer on all pages except the first page. To do this, you could enter the expression: form1.$$ndl.pageManager.getCurrentPage() != 1. Pages are numbered sequentially, starting with 1.
Disabled:
- Element disabled
- Element enabled
- JavaScript Expression specified - if the expression evaluates to true, the Element will be disabled, if false, the Element will be enabled.
Example: you could use this property to specify that a particular Element is only enabled if the checkbox above it is selected, by entering an expression such as: form1.page1.ndlcheckbox1.value != 'true'. Note here that true and false are actually strings within the property's value and hence must be in quotes.
-
When using quotation marks within the Expression builder, you must use single quotes only.
When the expression is set to simply true or false by selecting one of the True and False boxes
, this is a special case and the true and false values do not have quotation marks.
true and false should be spelled in lower-case.
For more information about including customised JavaScripts in the expression properties, see Customise Forms with JavaScript.
Note that when referring to forms, pages and Elements within your JavaScript, the spelling of the names is case-sensitive and must always begin with a lower case letter. The spelling to use for names of forms, pages and Elements is shown in the item's Code Name property, which can be found by displaying the properties for the relevant item in the Properties Pane.