Form Layout: Predefined Templates

You can specify a template for an area of the form in the HTML code of the screen. The template defines the number of columns in which the fields are organized on the form and the widths of these columns.

Overview of Templates

To specify a template for an area of the form, you use the qp-template tag. The qp-template tag has the following attributes, which are required:

  • id, which identifies a template instance and can be used to reference the template in customizations and extensions
  • name, which specifies which template to use

Each template organizes UI elements in a number of columns, which are called slots. The name of a template has the following structure: <Slot1>-...-<SlotN>, where:

  • N is the number of columns in the template.
  • Each of Slot1, ..., SlotN is a number that designates the relative width of the column.

For example, the 7-10-7 template has three columns. The first column has a width of 7/24 of the form width. The second column is 10/24 of the form width. The third column has a width of 7/24 of the form width.

To use qp-template, you need to distribute the UI controls among the available slots by using the slot attribute. In each slot, controls are rendered vertically. The slots are referred to by names, such as A, B, and C. You can specify the slot attribute for any element, such as qp-fieldset, qp-grid, or div. If a template contains multiple slots, you can distribute controls only between some of them. For example, if a template contains three slots, you can use only two of them. In this case, the third column remains empty.

The following example shows the use of the 7-10-7 template.

<qp-template name="7-10-7" id="formDocument" wg-container>
  <qp-fieldset slot="A" id="first" view.bind="Document">
    <field name="OrderType"></field>
    <field name="OrderNbr"></field>
    <field name="Status"></field>
    <field name="OrderDate"></field>
    <field name="RequestDate"></field>
    <field name="CustomerOrderNbr"></field>
    <field name="CustomerRefNbr"></field>
  </qp-fieldset>
  <qp-fieldset slot="B" id="second" view.bind="Document">
    <field name="CustomerID" config-allow-edit.bind="true"></field>
    <field name="CustomerLocationID" config-allow-edit.bind="true"></field>
    <field name="ContactID" config-allow-edit.bind="true"></field>
    <field name="CuryID" control-type="qp-currency" view.bind="CurrencyInfo"></field>
    <field name="DestinationSiteID"></field>
    <field name="ProjectID" config-allow-edit.bind="true"></field>
    <field name="OrderDesc" config-type.bind="1" config-rows.bind="3"></field>
  </qp-fieldset>
  <qp-fieldset slot="C" id="summary" view.bind="Document">
    <field name="OrderQty"></field>
    <field name="CuryDiscTot"></field>
    <field name="CuryVatExemptTotal"></field>
    <field name="CuryVatTaxableTotal"></field>
    <field name="CuryTaxTotal"></field>
    <field name="CuryOrderTotal"></field>
    <field name="CuryControlTotal"></field>
  </qp-fieldset>
</qp-template>

Recommendations on Templates Selection

If you want the layout to have three slots, you can use the following templates:

  • 7-10-7 if you need a short Slot A and Slot C, but you want to put long elements in Slot B
  • 17-17-14 if you need Slot A and Slot B with equal widths, but a shorter Slot C
  • 1-1-1 if you want to show three slots with similar widths

If you want the layout to have two slots, you can use the following templates:

  • 1-1 if you need two slots with equal widths

  • 17-7 or 2-1 if you want to put a grid in Slot A and a fieldset in Slot B, or if 1-1 is not enough because you want to put very long elements in Slot A

  • 7-17 or 1-2 if you want to put a fieldset in Slot A and a grid in Slot B or if 1-1 is not enough because you want to put incredibly long elements in Slot B

Available Templates

Template Description
17-17-14 Shows three slots; Slot C includes short fields.
17-14-17 Shows three slots; Slot B has shorter fields than Slot A and Slot C.
14-17-17 Shows three slots; Slot A has shorter fields than Slot B and Slot C.
17-31 Shows two slots; Slot A has shorter fields than Slot B.
7-10-7 Shows three slots; Slot B includes long fields.
10-7-7 Shows three slots; Slot A includes long fields.
17-7 Shows two slots; Slot A includes long fields.
7-17 Shows two slots; Slot B includes long fields.
1-1-1 Shows three slots with similar lengths of elements.
2-1 Shows two slots; Slot A includes long fields.
1-2 Shows two slots; Slot B includes long fields.
1-1 Shows two slots with similar lengths of elements.
1 Shows one slot with long fields.

Comparison of Templates

The following diagram shows the comparison of the width of the slots in templates.