Custom HTML

By using a custom HTML item, you can add HTML code to a page or view.

The custom HTML item can contain one or more sets of HTML elements such as <div> and <label> tags. You can add the HTML code directly as text by using a managed file or by using a variable. The custom HTML item inserts the elements inside the <div> tag of the page or view. If you are using a custom HTML item in a container such as the table, tab, horizontal section, and vertical section views, wrap the HTML code in a <div> tag. By wrapping the HTML code, the container treats all the HTML code as one entity.

Note: When building pages by using custom HTML blocks, ensure that the HTML segments within these blocks are not too large. Custom HTML blocks are designed for use with small to moderate-sized HTML segments. If you provide an HTML segment that is too large, you might see a stack overflow exception. In this case, you should reduce the size of the HTML segment that you are using within your page. See Configuring the JVM in the WebSphere® Application Server product information.

Restriction: If your custom HTML item is within a repeating view such as a table or section, do not bind it to a variable that is a property within a list item. Normally, the code generator inserts the custom HTML contents as HTML code when it creates the page. However, repeating views are bound to a list. Because the list contents are not set until run time, the code generator cannot determine the index of the variable in the list when it creates the page. If you want text that changes dynamically, consider using a view such as Output Text that is bound to the variable.

Important: Do not use the following names as CSS class names in your HTML source code because they are reserved names:

CoachView
ContentBox

The custom HTML item supports the use of JavaScript variables for simple types. When the server generates the HTML page for the client, it replaces the variable name with its value. However, after the server generates the page, it does not update the HTML if there is a change in the value. The server updates the variable only when it regenerates the entire HTML page. If the server cannot resolve the variable, users see the variable name instead of its value.

In the code, you wrap the variable in double curly brackets. For pages, the variable can refer to the data in the tw.local namespace only. That is, the variable can refer to the data that is defined in the Variables page of the human service under the local node. For example, a page has a user business object variable with a name parameter that contains the name of the user. You can have the page display the name with the following code in an HTML item:

<div>Hello, {{tw.local.user.name}}.</div>

For views, the variable can refer to the data in the tw.businessData or tw.options namespaces. That is, the variable can refer to the data that is defined in the Variables page of the view under the Business Data or Configuration Options nodes. For example, if you want to have a view display the name of a street, you bind the view to a address business object with a parameter named street. In an HTML item, you add the following code:

{{tw.businessData.address.street}}

If you place an instance of that view into a page, the user sees the value of the street parameter in the view. However, if the user updates the street parameter, the contents in the HTML item do not update until the server regenerates the entire page.

Tip: To insert a script, add the script using inline scripts on the Behavior page of the view. Do not add the script using a custom HTML item.