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. |
The Conditional Mandatory Text indicates that an item is conditionally mandatory. The users will have to enter values based on a condition. |
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.
- If the check box is not selected, the user must enter values.
You can mark the TXT_MESSAGE_DESC as conditional mandatory and can write the cbxprevalidate as shown:
this.fm.registerHandler("cbxprevalidate", 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 marks a invalid field as Valid.
fm.clearInvalid("TXT_MESSAGE_DESC");
return [true, true];
}
else {
//This API is used to marks a invalid field as Valid.
fm.markInvalid("TXT_MESSAGE_DESC", "Please, 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 |
|
Form |