Canvas enables the developer to mark the item as mandatory or conditional mandatory enabling the developer to effectively handle user input.
Mandatory Text | ConditionalMandatory Text |
The Mandatory Text indicates that an item is mandatory. The end-users must enter the values for those items marked with Required Indicators. These fields will be marked with a red asterisk (*) symbol. | The Conditional Mandatory Text indicates that an item is conditionally mandatory. The users will have to enter values based on a condition. These fields will be marked with double blue asterisk (**) symbols. The developers can write the conditions and the forms behavior in the |
CFEC.PRE_VALIDATE handler. |
For example:
Consider a case like making a Text Area (TXT_MESSAGE_DESC) as mandatory based on the check box (CHK_PROCEED_WOUT_MESG).
If the check box is selected, the user needs to enter values in the text area.
...
You can mark the TXT_MESSAGE_DESC as conditional mandatory and can write the cbxprevalidate as CFEC.PRE_VALIDATE as shown:
| Code Block | ||
|---|---|---|
| ||
this.fm.registerHandler( |
...
CFEC.PRE_VALIDATE, function(fm, config) { |
...
//fm.getValue API is used to get the value of particular field. |
...
if(fm.getValue("CHK_PROCEED_WOUT_MESG")=='Y') |
...
{ //This API is used |
...
to mark an invalid field as valid. fm.clearInvalid("TXT_MESSAGE_DESC"); |
...
return [true, true]; |
...
} |
...
else |
...
{ //This API is used |
...
to mark an invalid field as valid. fm.markInvalid("TXT_MESSAGE_DESC", " |
...
Enter the message"); |
...
return false; |
...
} |
...
}); |
For more details of form APIs, see Form and Form Item APIs.
The form items are divided into five categories as follows:
- Data Entry
- Data Selection
- Toggle
- Action
- Display
Container items are divided into four categories as follows:
- Containers
- Fillers
- Information Fields
- Component
...
Category
...
Form Component
...
Form Items
...
...
Data Entry
...
Text Box
...
...
Text Area
...
...
Password
...
...
Date
...
...
Spinner
...
...
Amount
...
...
HTML Editor
...
Data Selection
...
Checkbox Group
...
...
Radio Group
...
...
Combo
...
...
Icon Combo
...
...
Auto Suggest
...
...
Item Selector
...
...
Lookup
...
...
Independent Lookup
...
...
Color Picker
...
...
Slider Field
...
Toggle
...
Toggle
...
...
Checkbox
...
Action
...
Button
...
...
Upload Panel
...
Display
...
Title
...
...
Label
...
...
Logo
...
...
Hyperlink
...
...
Image Picker (This item is only applicable for jQuery Mobile)
...
Containers & More
...
...
Container
...
Field Set
...
...
Form Composite
...
...
Panel
...
...
Tab Panel
...
...
Image Panel
...
Fillers
...
Empty Cell
...
...
Line
...
...
Hidden
...
...
Empty Row
...
Information Fields
...
Conditional Manadatory Text
...
...
Mandatory Text
...
...
Info Panel
...
Component
...
Widget
...
...