* Custom customer form

Custom customer form
The gadget spec URL could not be found

In this section, we will be implementing a one-many custom form to maintain customer and customer address details. The form that we will be implementing using the "HTML Forms" perspective is the same as the customer form that we implemented using the "Forms" perspective.

The customer form consists of the following:

Input form elements for customer id, email, first name, last name, phone, sex and date of birth.
Label form element for age.
Input form elements for customer address details.
Buttons to save and delete the customer details, add and delete customer address details.

HTML form specification for the custom customer form includes:

Model Level APIs

getRoot() which returns the root of the graph(instance), and its wrapper methods getValue(cellName) that returns the value of the cell, getDisplayValue(cellName,Format) that returns the display value of the cell in the format specified and getList(referenceCellName, ChildModelName) that returns the list of child objects.

View definitions using JSTL

Input form elements for customer id, email, first name, last name, phone, sex and date of birth.
Action elements to perform workflow submit and delete the current instance.

Controller methods

update
invoke
showList
remove

Here's the code to create the custom form to maintain customer details described above.

<style>

.h22{height:22px;}

.w40{width:40px;min-width:40px;}

.w60{width:60px;min-width:60px;}

.w75{width:75px;min-width:75px;}

.w100{width:100px;min-width:100px;}

.w120{width:120px;min-width:120px;}

.w150{width:150px;min-width:150px;}

.w200{width:200px;min-width:200px;}

</style>

<div>

<div class="Form_Title">Customer Details</div>

<br>

<tr>

Customer ID

</td>

</td>

</td>

</td>

</td>

</tr>

<tr>

First Name

</td>

</td>

</td>

Phone

</td>

</td>

</tr>

<tr>

Last Name

</td>

</td>

</td>

Date of Birth

</td>

</td>

</tr>

<tr>

Sex

</td>

</td>

</td>

Age

</td>

<label class="h22 w200 vmiddle hleft Form_Elements" name="Age" value="${getRoot().getValue('Age')}" data-format='Text' data-id='${getRoot().getValue("SheetId")}' data-format='Text'>${getRoot().getValue('Age')}</label>

</td>

</tr>

</table>

</div>

<br>

<div>

</div>

We have already seen how we have to specify the OrangeScape view specification for the input textbox elements and the action element for workflow submit. In the customer form, we have additionally used the static dropdown list for sex and calendar widget for the date of birth input element. The additional specifications include:

Input element:

data-staticlist: This parameter can be used to specify the static list values for the combobox.

<input type="Text" class="h22 vmiddle hleft combobox Form_Elements" name="Sex" value="${getRoot().getValue("Sex")}" data-id='${getRoot().getValue("SheetId")}' data-staticlist="[{'label':'Female','idval':'Female'},{'label':'Male','idval':'Male'}]" onclick='${id}.showList(this)'/>

getDisplayValue(cellName,Format) method has been used to format the display value for date of birth parameter that is of date datatype.

Now that we have added the form elements for maintaining the customer details, let's get started with the required form elements for maintaining customer address details. Firstly, we will add a button to create a new instance in the "CustomerAddress" model.

Required specifications for the action element to create a new child instance:

data-path: This parameter must be used to specify the path to access the child model where a new instance is to be created. The format for specifying the data path is "/referenceCellName/childModelname"
"onclick" event has been used to invoke the "create" controller method to add a new child model instance.

Required specifications for the action element to delete an existing child instance:

data-path: This parameter must be used to specify the path to access the child model where a new instance is to be created. The format for specifying the data path is "/referenceCellName/childModelname/SheetId" where SheetId is the SheetId of the child instance to be deleted.
"onclick" event has been used to invoke the "remove" controller method to delete the child model instance.

Here's the code to maintain customer address details.

<tr>

Customer Address

</td>

</td>

</tr>

</table>

<br>

Default

</td>

Address Type

</td>

Address Line #1

</td>

Address Line #2

</td>

Address Line #3

</td>

City

</td>

State

</td>

Country

</td>

Zip Code

</td>

Actions

</td>

</tr>

{for instance in getRoot().getList('CustomerID','CustomerAddress','CreatedAt',false)}

<tr>

</td>

</td>

</td>

</td>

</td>

</td>

</td>

</td>

</td>

</td>

</tr>

{/for}

</table>

Boundary must be defined for this form because this form processes the data from the current model (Customer) and its child model (CustomerAddress). To define the boundary for this form, open the customer form and click on the "Boundary" tab at the bottom of the HTML forms perspective. "CustomerAddress" model has a one-many relationship with the customer model. Click on the "One-Many" icon and select the checkbox for "CustomerAddress(CustomerID)".

You can use the preview option to validate the customer form design. The customer form will be displayed as shown in the screen capture.

CustomerForm.txt

(9k)

Boobesh Ramalingam,

Oct 11, 2011, 9:11 PM

v.1

Introducing OrangeScape

OrangeScape Essentials

OrangeScape Advanced Features

OrangeScape Best Practices

	Search this site