Caption Box

Caption Box is a container control that is meant to enclose one single other control.

Caption Box provides many different labeling options. With this control, you can place labels on any control in more locations than the contained control would allow.

Note: If more than one control is placed in a caption box, all but the first are ignored, and a warning is written to the console.

Configuration properties

Set or modify configuration properties for the control, such as appearance properties, in the Configuration properties tab.

Screen size: A configuration property that has the Screen Sizes icon beside the property name can have different values for each screen size. If you do not set a value, the screen size inherits the value of the next larger screen size as its default value. If you are using the Process Designer desktop editor (deprecated), you are setting the value for the large screen size. The other screen sizes inherit this value.

Theme definitions: Theme definitions specify the colors and styles for a control and determine the appearance of the control. You can preview the look and feel of controls in the theme editor. See Themes.

The appearance configuration properties for Caption Box are shown in the following table:

Table 1. Appearance configuration properties for Caption Box
Appearance configuration property	Description	Data type
Width	Specifies the width of a caption box in pixels, percent, or em units. For example: `50px` or `20%` or `0.4em`. If only a number is specified without any unit, the number is interpreted as the number of pixels.	`String`
Label placement	Specifies the label placement relative to the contained control: Top, Left, Bottom, or Right. The default label placement is Top.	`String`
Label width	The width of the label. You can specify the width in px (pixels), % (percent), or em units. For example, 50px, 20%, or 0.4em. If a unit type is not specified, px is assumed.	`String`
Label horizontal alignment	Specifies the horizontal alignment of the label: Left, Center, or Right. The default label horizontal alignment is Top.	`String`
Label vertical alignment	Specifies the vertical alignment of the label: Top, Middle, or Bottom. The default label vertical alignment is Top.	`Integer`
Shrink to content	Specifies whether or not the caption box should be shrunk to the size of the contained control. By default, this property is not selected.	`Boolean`
Color style	Specifies the color style for the label. The colors correspond to variables in the specified theme.	`String`
Label size style	Specifies the size of the label.	`String`
Label weight style	Specifies the font weight of the label.	`String`

Example

In this example, a Text Area control is nested inside a Caption Box, and the following appearance configuration properties are set for the Caption Box control:

Label placement is set to Right.
Label horizontal alignment is set to Right.
Label vertical alignment: is set to Middle.
Color style is set to Warning.
Label size style is set to Large.
Label weight style is set to Bold.

All the other properties are left with their default settings.

These properties and their values result in a yellow label in large and bold font, placed on the right of the text area, vertically centered within the caption box.

Events

Set or modify the formula configuration properties and the event handlers for the control in the Events tab. You can set events to be triggered programmatically or when a user interacts with the control. For information on how to define and code events, see User-defined events.

The formula configuration properties for Caption Box are shown in the following table:

Table 2. Formula configuration properties for Caption Box
Formula configuration property	Description	Data type
Label formula	Specifies the label associated with the control using a formula expression. For more information about formulas, see Formulas.	`String`

Caption Box has the following type of event handler:

On load: Activated when the control loads.

For example, On load can be used to dynamically specify the label position using the .setLabelHorizontalAlignment, .setVerticalAlignment, or .setLabelPlacement methods.

Methods

For detailed information on the available methods for Caption Box, see the Caption Box JavaScript API.

Additional resources

For information about how to create a coach, see Building coaches.
For information about standard properties (General, Configuration, Positioning, Visibility, and HTML Attributes), see Coach view properties.