Highlighter Builder

 

The Highlighter builder highlights a row in a table (or a field in a form) as the user's mouse moves over it. The default setting is to use the row's background color to do the highlighting, but we can choose to set other style attributes or run custom JavaScript.

 

Specifying inputs

This builder takes the inputs described in the table below. For help on inputs common to many or all builders such as those in the Properties and HTML Attributes input groups, see Using the Builder Call Editor.

Input name Description
Name Enter a name for this builder call. The designer tool displays this name in the builder call list.
Field Selector Tool We can determine how you want to select fields to be highlighted in the data page structure by specifying one of the following options:

Select by Name

Select this to display a list of fields in the builder call editor. Each row in the table provides a selector that displays each field name in the structure on which the data page operates as the nodes of a tree. We can specify the nodes to be highlighted by selecting nodes in this tree.

Select by Type

Select this to display a list of field types in the builder call editor. Each row in the table provides a selector that displays a list of field types in the structure on which the data page operates. We can choose a type representing the fields you want.

Using both techniques

Select this to display both tables. We can now specify the fields to be highlighted by both name and by type.
How to Highlight Select one of the following options.

  • Change element color - the builder will set the row's background color to the specified color when the mouse pointer is over that row.
  • Change element style - a set of CSS styles will be applied to the region when the mouse pointer is over that row.
  • Execute JavaScript - the specified mouseover and mouseout scripts will be executed as the pointer enters/exits the row.

Color Only displayed if How to Highlight is set to Change element color. This value is a color (as specified in CSS styles, such as green, lightblue or #f0f080) that will used for the row's background when the mouse pointer is over the row.
Styles Displayed only if How to Highlight is set to Change element style. This input is a table: the first column contains CSS style names while the second column contains the corresponding values. When the mouse pointer is over the row, these styles will be applied to the row.
"Mouse-Over" Script Displayed only if How to Highlight is set to Execute JavaScript. This JavaScript code will be executed when the mouse pointer enters the chosen row.
"Mouse-Out" Script Displayed only if How to Highlight is set to Execute JavaScript. This JavaScript code will be executed when the mouse pointer exits the chosen row.