Example: creating a view using custom HTML

Edit online

This example shows how you can use scripts to bind selected values in a custom HTML view to the business data of a view.

Overview of tasks in this example:

Add custom HTML code to a view that defines a select view for choosing an account type, such as Current or Savings.
Add business objects to the view.
Configure an event handler (load) with a custom script to bind the select view selected value to the complex type business object attribute.

As a result, you will create an Account Type selection list that can be reused or extended and then used across multiple pages.

Before you begin, you must be familiar with the view application programming interface (API) and you must have already created your business objects (see Table 2).

Add custom HTML code to a view:
1. In a toolkit or process application, create a new view named getAccountTypes.
2. In the Layout page, add a Custom HTML item to the canvas.
3. In the properties under HTML, select the Text option and provide the custom HTML code. For this example, you can use the following code to define a select view:
```
<select name="AccountType" size="1">
              <option value="Savings">Savings Account</option>
              <option value="Current">Current Account</option>
</select>
```
4. On the Overview page, select Can Fire Boundary Event.
Add business objects to the view.
1. In the Variables page, click the plus sign next to Business Data
2. For the Variable Type, select the TSAPP_ValidateDocumentCaseProperties business object.
3. In the Name field, type caseProperties.

On the Behavior page, configure the load event handler with a custom script for mapping the custom HTML selected value to the business data attribute.

Register the Dojo button module and alias that the view will load dynamically.
1. In the Behavior page, select AMD dependencies.
2. Click Add and then specify the following information:
  - In the Module ID column, type dojo/_base/connect. This declares a dependency on the module that provides event handling for DOM nodes and related functionality.
  - In the Alias column, type connect. This is the alias used in the code to refer to the connect module.
  Tip: This example uses an AMD module that is included in the infrastructure. If the AMD modules are not already included, see Adding custom AMD modules for information about how add and then access these modules.

Under Event Handlers, select load and then provide a custom script. For this example, you can use the following script:

var selectElement = this.context.element.getElementsByTagName("select")[0];

var onChangeHandle = connect.connect(selectElement, "onchange", this, function(newValue){
if(this.context.binding){
var tempBinding = this.context.binding.get("value");
tempBinding.set("TSAPP_AccountType", newValue.target.value);
}
});

Table 1. Notes about the script
Item	Description
(`this == the view object`)	The load event has the context of payload data as well as that of the business data object associated with it (added in step 2).
`connect.connect(selectElement, "onchange"`	The `onChangeHandle` variable in the script has the new value selected in the Select view. The `onChange` event of the custom HTML view is called using `connect.connect`. Tip: `connect.connect(selectElement, "onchange"` is derived from the alias of the `dojo/_base/connect` entry in the AMD dependencies. Therefore, the script should be modified accordingly based on the alias name. For example, if `myConnect` is the alias name, the script would look like `myConnect.connect(selectElement, "onchange"`.
`this.context.binding.get("value").set("TSAPP_AccountType", newValue.target.value);`	The new value selected in the Select view is bound to the business data specific attribute (TSAPP_AccountType).

To test your work, create a client-side human service and then do the following:
1. In the Variables page, add TSAPP_ValidateDocumentCaseProperties as an output variable.
2. Select the coach page, drag the getAccountTypes view onto the canvas, and ensure that the TSAPP_ValidateDocumentCaseProperties private variable was added as the binding.
3. Click Save or Finish Editing.
4. Run the client-side human service. A browser opens and displays the selection list.

Reference

Table 2. Example business objects
Library item	Example name
Business Objects	TSAPP_ValidateDocumentCaseProperties Parameters: TSAPP_Zipcode (String) TSAPP_Age (String) TSAPP_AccountStatus (String) TSAPP_CustomerType (String) TSAPP_Name (String) TSAPP_City (String) TSAPP_AccountType (String)