Form Layout: Predefined Templates

You can use a predefined template to control the layout of an area of an MYOB Acumatica form. Templates automatically adjust based on screen width and resolution.

Overview of Templates

You specify a template by using the qp-template tag with the following required attributes:

id: Identifies a template instance and can be used to reference the template in customizations and extensions
name: Specifies which template to use

Each template organizes UI elements into named slots. The name of a template has the following structure: <Slot1>-...-<SlotN>, where:

N is the number of slots in the template.
Each of Slot1, ..., SlotN is a number.
Each number represents the slot’s relative width.

For example, the 7-10-7 template has three slots:

The first slot has a width of 7/24 of the form’s width.
The second slot is 10/24 of the form’s width.
The third slot has a width of 7/24 of the form’s width; 24 is the sum of the relative width of all slots: 7 + 10 + 7 = 24.

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 slot remains empty.

Template Usage Example

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

<qp-template id="formDocument" name="7-10-7" wg-container>
  <qp-fieldset id="fsColumnA" slot="A" 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 id="fsColumnB" slot="B" 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 id="fsColumnC-summary" slot="C" 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>

Template Selection Guide

Depending on the type of the form, we recommend that you use the templates and label sizes specified in the following table.


Form Type	Template	Label Size
Data entry forms for transactions (records representing the exchange or movement of money, goods, or services)	Three-slot templates for the Summary area; you can select a template by using the recommendations below.	Default
Data entry forms for profiles (records representing a person, company, or entity)	`1-1`	`M`
Processing forms	`17-17-14` or `17-14-17`	Default
Inquiry forms	`17-17-14` or `17-14-17`	Default
Setup forms	`1-1`	`XM`
Maintenance forms	`1-1`	`XM`

Use the following general recommendations when selecting a template.

If the Summary area or a tab of a form should include three slots of elements, you can use one of the following templates:

7-10-7 if you need narrower left and right slots and a wider center slot
17-17-14 for equal left and center slots but a narrower right slot
1-1-1 for three slots with similar widths

If the Summary area of a form should include two slots of elements, you can use one of the following templates:

1-1 for slots with equal width
17-7 or 2-1 if you want to put a grid in the first slot and a fieldset in the second or if 1-1 is not wide enough because you have longer elements in the first slot
7-17 or 1-2 if you want to put a fieldset in the first slot and a grid in the second or if 1-1 is not wide enough because you want to put very long elements in the second slot

Available Templates

See the following table to learn more about the available templates.


Template	Description
`17-17-14`	Shows three slots; the third includes short elements.
`17-14-17`	Shows three slots; the second has shorter elements than the first and third do.
`14-17-17`	Shows three slots; the first has shorter elements than the second and third do.
`17-31`	Shows two slots; the first has shorter elements than the second does.
`7-10-7`	Shows three slots; the second includes long elements
`10-7-7`	Shows three slots; the first includes long elements.
`17-7`	Shows two slots; the first includes long elements.
`7-17`	Shows two slots; the second includes long elements.
`1-1-1`	Shows three slots with similar lengths of elements.
`2-1`	Shows two slots; the first includes long elements.
`1-2`	Shows two slots; the second includes long elements.
`1-1`	Shows two slots with similar lengths of elements.
`1`	Shows one slot with long elements.

Comparison of Templates

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