Bind Form Data with Controls

In web 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 web forms editor, on the Forms tab, notice that the Auto Binding field is selected by default. When the auto binding property is enabled, the web 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 web 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 web 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 Web 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.

The web forms editor’s Business Types Palette lists all business types defined for your application, including auto-generated ones created from WSDL files or integrations. (Note that any inner types defined in a WSDL file are not displayed.)

Drag a business type from the Business Types Palette onto the canvas, and the web forms editor automatically creates a web form based on the business type’s data attributes. You can drop additional controls onto the business type and edit their properties.

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

A business type of array is represented as a combination of a customized repeatable section and a suitable additional control, such as input text or number control, depending on whether the array contains strings or numbers. You cannot drop additional controls onto the array business type.

In the Data pane, you can also create business type attributes using the business types defined for your application. See Bind Form Data with Controls and Work with Business Objects.