 Custom category form The gadget spec URL could not be found
In this section, we will be implementing a simple custom form to maintain category details. The form that we will be implementing using the "HTML Forms" perspective is the same as the category form that we implemented using the "Forms" perspective.
The category form consists of the following:
- Input form elements for category code and category description
- A button to save the category details.
HTML form specification for the custom category form includes:
- Model Level APIs
- getRoot() which returns the root of the graph(instance) and its wrapper method getValue(cellName) which returns the value of the cell
- View definitions using JSTL
- Two input form elements for category code and category description
- An action element to perform workflow submit
Here's the code to create the custom category form described above.
<style> .h22{height:22px;} .w60{width:60px;min-width:60px;} .w200{width:200px;min-width:200px;} </style>
<div>
<div class="Form_Title">Category Form</div>
<br>
<div class='h22 w200 vmiddle hleft Form_Elements'>Category Code</div>
<input type="text" class="h22 vmiddle hleft textbox Form_Elements" id='CategoryCode' name="CategoryCode" value="${getRoot().getValue("CategoryCode")}" data-id='${getRoot().getValue("SheetId")}' data-format='Text' maxlength = 4.0 onchange='${id}.update(this)'/>
<br><br>
<div class='h22 w200 vmiddle hleft Form_Elements'>Category Description</div>
<input type="text" class="h22 vmiddle hleft textbox Form_Elements" id='CategoryDescription' name="CategoryDescription" value="${getRoot().getValue("CategoryDescription")}" data-id='${getRoot().getValue("SheetId")}' data-format='Text' maxlength = 30.0 onchange='${id}.update(this)'/>
<br><br>
<input type='button' id='Save' name='Workflow' value='Save' class='h22 w60 button' data-id='${getRoot().getValue("SheetId")}' data-send='true' data-status='Category details saved successfully!' data-target='Worktop' data-validate='true' onclick = "${id}.invoke(this)"/>
</div>
Now let's add validations for the mandatory fields category code and category description. It can be noted that we have specified additional OrangeScape view specification for the two input elements and the action element. These specifications include:
Input element:
- data-id: This is a mandatory parameter that helps to specify the associated instance. Hence, the value for this parameter must be set to "SheetId" of the associated instance. This can be achieved using the model level API getRoot() and its wrapper method getValue(cellName).
- maxlength: This parameter can be used to specify the maximum length for an input text or textarea field. This parameter has been used to specify the maximum length for category code (4) and category description (30).
- "onchange" event has been used to invoke the "update" controller method to perform updates.
<input type="text" class="h22 vmiddle hleft textbox Form_Elements" id='CategoryCode' name="CategoryCode" value="${getRoot().getValue("CategoryCode")}" data-id='${getRoot().getValue("SheetId")}' data-format='Text' maxlength = 4.0 onchange='${id}.update(this)'/>
Action element:
- data-id: This is a mandatory parameter that helps to specify the associated instance. Hence, the value for this parameter must be set to "SheetId" of the associated instance. This can be achieved using the model level API getRoot() and its wrapper method getValue(cellName).
- data-send: This parameter must be set to true since the request must be sent to the server for processing.
- data-status: This parameter can be used to specify the status message that will be displayed as feedback to the user.
- data-target: This parameter can be used to specify the target location that the system must redirect to on successful completion.
- "onclick" event has been used to invoke the "invoke" controller method to perform the configured action.
<input type='button' id='Save' name='Workflow' value='Save' class='h22 w60 button' data-id='${getRoot().getValue("SheetId")}' data-send='true' data-status='Category details saved successfully!' data-target='Worktop' onclick = "${id}.invoke(this)"/>
Since we will be performing validation for the mandatory fields, some of the additional parameters must be specified for input and action elements in the form.
Input element:
- data-error: This parameter must be used to specify the list of functions that must be used to perform validations.
<input type="text" class="h22 vmiddle hleft textbox Form_Elements" name="CategoryCode" value="${getRoot().getValue("CategoryCode")}" data-id='${getRoot().getValue("SheetId")}' data-error = '[validateCategoryCode]' data-format='Text' maxlength = 4.0 onchange='${id}.update(this)'/>
Action element:
- data-validate: This parameter must be set to true to perform validations before the action is executed.
<input type='button' id='Workflow_Save' name='Workflow' value='Save' class='h22 w60 button' data-id='${getRoot().getValue("SheetId")}' data-send='true' data-status='Category details saved successfully!' data-target='Worktop' data-validate='true' onclick = "${id}.invoke(this)"/>
Here's the code to perform validations on category code and category description.
{eval}
validateCategoryCode=function(elem){
var instance = new DataObject(id, $(elem).attr('data-id'))
var validationLhsValue=$(elem).val()
if (validationLhsValue != null){
validationLhsValue = validationLhsValue.length
}
if (validationLhsValue <= 0){
return "Category code must be entered!"
}
};
validateCategoryDescription=function(elem){
var instance = new DataObject(id, $(elem).attr('data-id'))
var validationLhsValue=$(elem).val()
if (validationLhsValue != null){
validationLhsValue = validationLhsValue.length
}
if (validationLhsValue <= 0){
return "Category description must be entered!"
}
};
{/eval}
Note: Boundary need not be defined for this form because this form processes the data from the current model only.
You can use the preview option to validate the category form design. The category form will be displayed as shown in the screen capture.
| 
