4.3.5. Using Individual Fields instead of FieldGroup

LIVE DEMO

Using the FieldGroup component in an entity’s editor is not mandatory. You can easily replace it with separate fields to create a custom screen layout.

Below is an example of such editor for the Order entity.

The order-edit.xml descriptor contains the main orderDs and the nested orderLinesDs datasources, as well as the independent customersDs datasource for selecting a customer in a lookupField:

<dsContext>
    <datasource id="orderDs"
                class="com.company.sample.entity.Order"
                view="order-edit">
        <collectionDatasource id="orderLinesDs"
                              property="orderLines"/>
    </datasource>
    <collectionDatasource id="customersDs"
                          class="com.company.sample.entity.Customer"
                          view="_minimal">
        <query>
            <![CDATA[select e from sample$Customer e]]>
        </query>
    </collectionDatasource>
</dsContext>

Now, all we have to do is to create the fields for the Order attributes, bind them to the appropriate datasources and define the entity’s attribute using the property attribute:

  • the order’s number:

    <textField id="numField"
           caption="msg://order.num"
           datasource="orderDs"
           property="num"/>

  • the order’s customer:

    <lookupField id="customerField"
             caption="msg://order.customer"
             datasource="orderDs"
             property="customer"
             optionsDatasource="customersDs"/>

  • the order date:

    <datePicker id="datePicker"
            caption="msg://order.date"
            datasource="orderDs"
            property="date"/>

  • the table containing the order lines:

    <table id="orderLinesTable"
       height="300px"
       width="100%">
    <rows datasource="orderLinesDs"/>
    . . .
</table>

This approach is more flexible in terms of screen layout design. You can select any visual components for the fields, group the fields and place them wherever you like on the screen.