Nov 24, 2015
Ray Navasarkian (DevExpress)

HTML5 Form Layout Widget (Coming soon in v15.2)

v15.2 will ship with a great new addition to our HTML5 / JavaScript widget collection - dxForm. As I'll explain in a moment, this client-side widget was designed to simplify how you create and layout forms.

HTML5 JS Form Layout Widget

The screenshot above helps illustrate the power of this new widget - with dxForm, you can create form layouts of any complexity.

You may be asking how easy is it to use...The answer is extremely easy. The following screenshot represents a simple form - with a single column layout. To generate this layout, you simply create a form instance and pass a data object to it.

HTML5 JS Form Layout - Default

When the dxForm widget generates a form item for a data field, it selects the appropriate data editor (based on data type) and transforms the data field name to a label with appropriate text. For instance, if a data field name is "firstName", "First Name" will be used for the label. If the auto-generated label does not meet with your satisfaction, you can implement a custom algorithm for label text generation.

Form Layout Customization

Once a form is generated, dxForm gives you a number of customization options so you can fine-tune your forms to meet the exacting needs of your end-users. Layout customization features include:

  • Specify a fixed number of columns within the layout or force the widget to automatically choose the number of columns based upon current form width. The dxForm widget layout is adaptive: It uses a single-column on devices with small screens.
  • Organize items into groups and tabbed pages.
  • Customize label position.
  • Customize the visibility and appearance of "required" and "optional" validation text.
  • Display help/info text label for specific items.

HTML5 JS Form Layout

Validation

dxForm allows you to specify validation rules for individual items. If rules are defined for an item, it is marked as a required. Each editor is validated separately when it loses focus. You can, however, validate all editors simultaneously by calling the validate method (when validating all editors, a validation summary will be displayed at the bottom of the form).

HTML5 JS Form Layout and Validation

Updating Values

Form item values are automatically updated when you assign a new data object to the formData option. Alternatively, you can update the required data field using the updateData method. In this instance, the widget is not re-rendered...It only updates the required item values. Two-way binding for AngularJS and Knockout is also supported.

=======================

Tell us what you think of this new widget - We'd love to get your feedback.