Add a control that has Bootstrap Wrapper support.
Bootstrap wrapper controls enable users to group multiple controls into a single, collapsible container, which helps save space on a form. This feature is particularly useful for organizing complex forms, improving readability, and enhancing user experience by allowing sections of the form to be expanded or collapsed as needed.
This control is only available for Form-type Screens. See Screen Types.
Watch the following product tour to learn how to use a Bootstrap Wrapper control.
Follow these steps to add this control to the Screen:
Configure the Bootstrap Wrapper control. See Settings.
Validate that the control is configured correctly. See Validate Your Screen.
The Image control has the following panels that contain settings:
Expand the Variable panel from the Properties Panel on the right to configure the following properties:
Expand the Configuration panel from the Properties Panel on the right to configure the following properties:
Expand the Advanced panel from the Properties Panel on the right to configure the following properties:
From the Controls Menu on the left, expand the Advanced category, and then locate the Bootstrap Wrapper icon .
Drag and drop the control to the Screen Builder canvas. Existing controls in the Screen will adjust positioning based on where you drag the control.
Edit the default Variable Name setting value for this control if necessary. The Variable Name setting value represents data in this control during Requests. Ensure that the Variable Name setting value is a unique name from other controls in this Screen and contains at least one letter. This is a required setting.
Edit the default label that displays for this control if necessary. New Bootstrap Wrapper is the default value.
The Modal setting is selected by default.
In the page setting, select a page created in the same Screen to use in the component selected previously.
In the Config setting, enter component BootstrapVue properties in JSON format.
Specify an expression that indicates the condition(s) under which this control displays. See Expression Syntax Components. If this setting does not have an expression, then this control displays by default.
Both: The control displays on both desktop and mobile devices. Both toggle keys are enabled by default.
Enter the value to represent this control in custom CSS syntax when in Custom CSS mode. As a best practice, use the same CSS Selector Name value on different controls of the same type to apply the same custom CSS style to all those controls.