template

Since: Editor 1.6

Form layout template.
Please note - this property requires the Editor extension for DataTables.

The full Editor reference documentation is available to registered users of Editor - the information shown below is a summary only. If you already have an Editor license please sign-in, alternatively an Editor license can be purchased on this site, or sign up for the free trial.

Description

Editor's default form layout is a simple linear layout for the fields that have been defined. While this works well for simple forms, for more complex forms you may wish to present the form with a custom layout, grouping similar fields and making full use of the space available.

This option can be provided to tell Editor how the form should be laid out, referencing an HTML element that contains the structure you wish for your form. CSS would then typically be used to style the form as required. With this method, any form layout can be easily achieved with Editor.

To tell Editor where to insert the fields when the form is drawn, the HTML5 custom tag <editor-field> should be used with a name attribute that defines the field to be shown at that point.

For example, consider the following HTML:

<div id="usersForm">
    <fieldset class="name">
        <legend>Name</legend>

        <editor-field name="first_name"></editor-field>
        <editor-field name="last_name"></editor-field>
    </fieldset>
    <fieldset class="office">
        <legend>Office</legend>

        <editor-field name="office"></editor-field>
        <editor-field name="extn"></editor-field>
    </fieldset>
    <fieldset class="hr">
        <legend>HR info</legend>

        <editor-field name="position"></editor-field>
        <editor-field name="salary"></editor-field>
        <editor-field name="start_date"></editor-field>
    </fieldset>
</div>

An example of a template in use can be found here. Further information is also available in Editor's online manual.