Bind Form Data with Controls

In forms, data and controls are decoupled. You can define your controls and data independently and then connect the controls to the data using the binding property.

In the forms editor, on the Forms tab, notice that the Auto Binding field is selected by default. When the auto binding property is enabled, the forms editor creates data attributes linking them to the controls as you drag and drop controls from a controls palette onto the canvas. The data attributes are listed in the Data pane. If you disable the Auto Binding field, then, you must create data attributes in the Data pane and link them to every unbound control using the General tab’s Binding field.

On the General tab, notice that the forms editor displays the Binding field for every control on the canvas. In the Binding field, you can specify an attribute for a control by selecting an option from the autocomplete list or entering a valid binding.

Note:

  • The name of the binding in the Binding field is the same as the name of the control to which it is linked when you use auto-binding.

  • When a data attribute is bound—either directly or indirectly (through computed values or events)—to multiple controls, any change to the data attribute is immediately reflected in all associated controls. Repeatable sections or tables bound by the same data attribute are also in sync, that is, addition or deletion of rows in one control is automatically reflected in the other control.

The background colors displayed for the autocomplete options are:

  • Green for valid binding names

  • Red for invalid binding names

  • Blue for complex binding names (their children may contain valid binding names)

If a control isn’t linked to an attribute or if a control is linked to an invalid attribute, an error message is displayed in the Binding field and an error icon is displayed in the canvas. When a control doesn't have a valid binding, any value entered into the control in runtime is not passed on to the form payload.

To create a new attribute, click the Add icon in the Data pane. In the Create Attribute window, enter a name and specify whether the new attribute is a simple type (String, Number, Boolean, Date, Date Time, and Time) or a business type. If you selected Business type, then, select an option from the available list of business types. Optionally, enable or disable the list of values. Click Create.

Note:

  • An attribute name can only start with a lower case letter and can only contain letters, digits, and underscores. Also, an attribute name can't start with XML.

  • In the Create Attribute window, if you select Business in the Type field, then, the business types defined for your application are available in the drop-down list. Notice that the business types defined for your application are listed in the Business Types Palette.

To delete an attribute, click the Delete icon adjacent to the attribute you want to delete in the Data pane. If the attribute you’re trying to delete is bound to at least one control, click Delete in the Delete Attribute Confirmation window. Note that the forms editor clears the binding when you delete an attribute which is bound to a control.

To edit an attribute’s name, click the Edit icon adjacent to the attribute you want to edit in the Data pane. Enter a new name and click OK.

Create a Form Based on a Business Type

A business type is used to organize and store related information used in your process, such as employee data. You can create business type and list of values for your application and use it in forms.

The forms palette lists all business types defined for your application under Types.

Drag a business type under Types in the forms palette onto the canvas, and the forms editor automatically creates a form based on the business type’s data attributes.

A business type of Enum or List of values is represented as a customized select control when you drop it onto the form’s canvas.

See Work with Business Types.