Customizing Form Layout

From JRapid

Jump to: navigation, search

Contents

Introduction

When an entity is created, a form with all the non-hidden properties is generated. These properties are placed in the same order as they are defined in the AML source, one under the other.


<entity name="NoRowsOrColumns" label="Example Form">
        <property name="title" label="Title"/>
        <property name="firstName" label="First name"/>
        <property name="lastName" label="Last name"/>
</entity>


File:form_layout1.jpg

Using the row and column elements, fields on the generated form can be organized with a layout different than the default.

Row

    <entity name="OneRow" label="One row" >
        <row>
            <property name="title" label="Title"/>
            <property name="firstName" label="First name"/>
            <property name="lastName" label="Last name"/>
        </row>
    </entity>

Note that using the row element changes the labelposition to "top" by default.

File:form_layout2.jpg

Specifying labelposition as left changes this.

<entity name="One Row" label="One row" >
        <row>
            <property name="title" label="Title" labelposition="left"/>
            <property name="firstName" label="First name" labelposition="left"/>
            <property name="lastName" label="Last name" labelposition="left"/>
        </row>
</entity>

File:form_layout3.jpg

Column

Using a single column and specifying the label attribute places an HTML fieldset around the properties it wraps.

<entity name="OneColumn" label="One Column">
        <column label="One Column">
            <property name="title" label="Title"/>
            <property name="firstName" label="First name"/>
            <property name="lastName" label="Last name"/>
        </column>
</entity>

File:form_layout4.jpg

Multiple Rows

<entity name="MultipleRows" label="Multiple Rows" >
        <row>
            <property name="title" label="Title"/>
        </row>
        <row>
            <property name="firstName" label="First name"/>
        </row>
        <row>
            <property name="lastName" label="Last name"/>
        </row>
</entity>

Again, the row element changes the labelposition to "top" by default.

File:form_layout5.jpg

Multiple Columns

<entity name="MultipleColumns" label="Multiple Columns">
        <column label="Column One">
            <property name="title" label="Title"/>
        </column>

        <column label="Column Two">
            <property name="firstName" label="First name"/>
        </column>

        <column label="Column Three">
            <property name="lastName" label="Last name"/>
        </column>
</entity>

File:form_layout6.jpg


Nested Rows and Columns

<entity name="NestedRowsAndColumns" label="Nested Rows and Columns">
        <row>
            <column label="One One">
                <property name="firstName" label="First Name" display="primary"/>
                <property name="lastName" label="Last Name" display="primary"/>
            </column>

            <column label="One Two">
                <property name="names" label="Children Names" collection="set" display="primary" />
            </column>

            <column label="One Three">
                <property name="company" label="Company"/>
                <property name="country" label="Country"/>
            </column>
        </row>

        <row>
            <property name="another" label="Another"/>
        </row>

        <row>
            <column label="Three One">
                <property name="firstName2" label="First Name" display="primary"/>
                <property name="lastName2" label="Last Name" display="primary"/>
            </column>

            <column label="Three Two (multiline/collection)">
                <property name="names2" label="Children Names" collection="set" display="primary" />
            </column>
        </row>
    </entity>

File:form_layout7.jpg

Colspan and Rowspan

These attributes are used only on column elements and have the same effect as their homologous HTML attributes.


NOTE:

The Web Designer does not support rows/columns yet, so please be careful when editing an entity that uses them, or use the AML source editor instead.

See also

Personal tools