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

24 November 2015

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.

 

6 comment(s)
Mo cisse

Great

24 November, 2015
richard morris

I could use that immediately

24 November, 2015
Roman Shelomanov

Let's introduce it to XAF

24 November, 2015
George Fahnbulleh_1

Putting the "Visual" back in "Visual Studio"

Thank you!

25 November, 2015
Basit Sarguroh

Is this we can include in devextreme?

26 November, 2015
Nikolai (DevExpress Support)

Basit, yes, dxForm is a part of DevExtreme 15.2.

30 November, 2015

Please login or register to post comments.