HTML/JavaScript Widget

This topic describes how to configure the HTML/JavaScript widget.

General Tab

The following table describes the fields on the General tab of the Property Editor for this widget.

Field Description
Control name Type the name by which the widget is uniquely identified. No other widget or control on this form can have the same name.
Caption Type the text to appear in the title bar above the widget.

If you leave this field blank, the widget will not have a title bar.

Content

Type or paste the HTML or JavaScript code in this field. When the form is displayed, the code is rendered by the Web browser.

Alternately, you can use the string builder tool to insert references to table fields and form controls. For information about this tool, see Using the String Builder Tool.
Note: If you use the string builder tool in JavaScript code in the HTML/JavaScript widget, the code needs to be in an iframe (inline frame). If the code is in an iframe, it cannot reference other parts of the form. Therefore, the string builder tool should not be used in JavaScript code.
Important:
  • If the code you type in this field includes any opening or closing braces ("{" or "}"), precede each of them with a backslash ("\"). Otherwise, SBM Composer tries to interpret the text inside of the braces as the name of a field or control on the form. This prevents the form from working properly. (If you paste the brace, you are prompted whether you want a backslash to be added. If you use the Treat '{' as a literal option in the string builder tool, a backslash is automatically added.)
  • If you are using string substitution to initialize a JavaScript string constant, you must use the STRING_ESC() macro. This ensures that special characters are correctly encoded for use in this context.

    The example below shows the content of a HTML/Javascript widget on a form with a single EditBox. The first reference is inside the HTML and therefore does not need any escaping, while the second reference is inside the JavaScript and needs to be escaped in order to be correctly processed.

image

Options Border: Select this check box to draw a thin line around the widget.

Scroll bars: Select this check box to include scroll bars in the widget. This provides more content than the allotted space.

Description Type an optional description of the widget.

Refresh Tab

See Widget Refresh Tab.