Add a control that has BootstrapVue Component library support.
ProcessMaker Platform supports adding BootstrapVue components in Forms. Use BootstrapVue to display responsive, mobile-first, and ARIA-accessible forms projects on the Web.
This control is only available for Form-type Screens. See Screen Types.
Watch the following product tours to learn how to use a Bootstrap Component control.
Follow these steps to add this control to the Screen:
Configure the Bootstrap Component 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 Component 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 Component is the default value.
Enter the validation rule(s) the Request participant must comply with to properly enter a valid value into this control. This setting has no default value. If there are no configured validation rules the following message displays: No validation rule(s). See Validation Rules for "Validation" Control Settings.
Click the Add Rule button. The Select drop-down menu displays.
Click the Edit iconfor the validation rule to edit if that rule can be edited. Validation rules that do not have parameters cannot be edited. The parameter settings for that validation rule displays.
Click the Delete iconfor the validation rule to delete. A message displays to confirm deletion of the validation rule.
Select to indicate that this control is required. This option is not selected by default. This is a quick way to add the Required validation rule.
In the Screen preview or during a Request if you submit the Screen without selecting this required Bootstrap Component control, this control displays Field is required in red-colored text.
The Form Tags setting is selected by default.
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.