Adding Controls 

Use

Controls enable you to display data fields that are retrieved from an entity, and/or transferred to another entity. To display a data field, you must bind it to a control. Depending on how you create a UI element, Visual Composer may automatically create and bind the relevant control that is needed to display the data in the field.

The recommended way to bind a field to a control is by selecting the control type for the field in the Define Data dialog box. However, you can also manually add controls to a view element by dragging them from the Compose task panel to the view on the Layout board. You may want to add controls in this way for the following reasons:

·        You want to add a control that does not need to be bound to a field, for example, a Plain Text or Hyperlink control.

·        You want to add a control and bind it to a virtual field that does not yet exist.

·        You want to add a Melting Group control, to group several controls together. More information: Adding Controls in a Melting Group.

For information about the controls available in the Compose task panel, see Controls Overview.

Prerequisites

On the Layout board, you have displayed the view or container element to which you want to add a control.

Procedure

...

       1.      Drag a control from the Compose task panel to the required location in the view or container element. The control automatically snaps to its location, according to the defined layout options. For more information, see Defining Layout Options.

To change a control type after you have added it to an element on the Layout board, you can right-click the control and choose Change Control Type → <Control> from the context menu. The list of available controls depends on the current view element, the current control type, and the type of the field that is bound to the control. For example, for an Input Field control that is bound to a field of type String, the list contains controls that can be bound to fields of this type, such as Dropdown List. It does not contain controls that require input of type Boolean, such as Checkbox controls.

       2.      For a control that cannot be bound to a field (for example, a Plain Text or Hyperlink control), select the control on the Layout board. Then, in the Text field in the Configure task panel, enter the display content of the control, for example, the text to display in a Plain Text control.

You can choose to bind the control to a field by selecting the required field in the Value field of the Configure task panel.

       3.      For a control that you want to bind to a virtual field that does not yet exist:

                            a.      Right-click the element containing the new control and from the context menu choose Define Data. The Define Data dialog box is displayed.

                            b.      Define a new virtual field by clicking the Add Field (+) button and choosing the field type from the list. A control is added automatically for the new field, and there is a checkmark in the first column (meaning that the field is now visible because it is bound to a control).

                            c.      Click the Rename Field button to rename the field if required.

Field names are case-insensitive and can contain only ASCII characters, digits, and underscores. They cannot contain spaces, cannot start with a digit, and must be unique within the same data structure level.

                            d.      Remove the control bound to the new field so that you can bind the field to the control you added in step 1, either by clicking the checkmark or by choosing Hide from the dropdown list in the Control column. Click Close.

                            e.      Select the control and in the Value field of the Configure task panel, choose the newly-added field name from the dropdown list. This binds the new control to the new field.

       4.      Define values for the control properties in the Configure task panel as required. For more information, see Configure <Element> Task Panel in the Visual Composer Reference Guide.

       5.      Repeat the procedure to define additional controls as required.

After you have added the controls, you configure their attributes, including their appearance, layout, and behavior. For more information, see Configuring Controls.