Solved

Update Screen Layout to Display Fields in 4 Columns in Each Row in the Modern UI.

Forum|Forum|9 days ago
March 16, 2026
7 replies
132 views

mos11
Freshman I

I want to set this screen to the Modern UI. How can I set 4 columns in each row? Is there an original Acumatica screen example like this?

Best answer by Marat43

Hi @mos11 ,

I was able to achieve a similar layout by combining nested templates instead of forcing a strict 4-column structure.

The idea is to split the layout into sections (e.g. 1-1 or 1-1-1) and then, where needed, nest another template inside one of the slots to simulate additional columns. For example:

<qp-tab after="#tab-example" id="tab-example" caption="Example">
    <qp-template id="form-example1" name="1-1">
        <qp-caption caption="Section 1"></qp-caption>
        <qp-fieldset id="Line1" view.bind="ExampleView" slot="A" class="label-size-xxs">
            <field name="YourField1"></field>
        </qp-fieldset>
        <qp-fieldset id="Line2" view.bind="ExampleView" slot="B">
            <field name="YourField2"></field>
        </qp-fieldset>
    </qp-template>

    <qp-template id="form-example2" name="1-1-1">
        <qp-caption caption="Section 2"></qp-caption>
        <qp-fieldset id="Line3" view.bind="ExampleView" slot="A">
            <field name="YourField3" class="label-size-xxs"></field>
        </qp-fieldset>
        <qp-fieldset id="Line4" view.bind="ExampleView" slot="B">
            <field name="YourField4"></field>
        </qp-fieldset>
        <qp-fieldset id="Line5" view.bind="ExampleView" slot="C">
            <field name="YourField5"></field>
        </qp-fieldset>
    </qp-template>

    <qp-template id="form-example3" name="1-1-1" caption="Section 3">
        <qp-caption caption="Section 3"></qp-caption>
        <qp-fieldset id="Line6" view.bind="ExampleView" slot="A">
            <field name="YourField6"></field>
        </qp-fieldset>
        <qp-fieldset id="Line7" view.bind="ExampleView" slot="B">
            <field name="YourField7"></field>
        </qp-fieldset>
        <qp-fieldset id="Line8" view.bind="ExampleView" slot="C">
            <field name="YourField8" class="label-size-xxs">
                <qp-field control-state.bind="ExampleView.YourField9" class="no-label" pinned="true"></qp-field>
            </field>
        </qp-fieldset>
    </qp-template>

    <qp-template id="form-example4" name="1-1" caption="Section 4">
        <qp-caption caption="Section 4"></qp-caption>
        <qp-template id="form-sub1" name="1-1" slot="A">
            <qp-fieldset id="SubLine1" view.bind="ExampleView" slot="A">
                <field name="YourField10"></field>
            </qp-fieldset>
            <qp-fieldset id="SubLine2" view.bind="ExampleView" slot="A">
                <field name="YourField11"></field>
            </qp-fieldset>
            <qp-fieldset id="SubLine3" view.bind="ExampleView" slot="B">
                <field name="YourField12"></field>
            </qp-fieldset>
        </qp-template>

        <qp-template id="form-sub2" name="1-1" slot="B">
            <qp-fieldset id="SubLine4" view.bind="ExampleView" slot="A">
                <field name="YourField13"></field>
            </qp-fieldset>
            <qp-fieldset id="SubLine5" view.bind="ExampleView" slot="A">
                <field name="YourField14"></field>
            </qp-fieldset>
            <qp-fieldset id="SubLine6" view.bind="ExampleView" slot="B">
                <field name="YourField15"></field>
            </qp-fieldset>
        </qp-template>
    </qp-template>

    <qp-template id="form-example5" name="1-1-1" caption="Section 5">
        <qp-caption caption="Section 5"></qp-caption>
        <qp-fieldset id="Line9" view.bind="ExampleView" slot="A">
            <field name="YourField16"></field>
        </qp-fieldset>
        <qp-fieldset id="Line10" view.bind="ExampleView" slot="B">
            <field name="YourField17"></field>
        </qp-fieldset>

        <qp-template id="form-sub3" name="1-1" slot="C">
            <qp-fieldset id="Line11" view.bind="ExampleView" slot="A">
                <field name="YourField18" class="label-size-xxs"></field>
            </qp-fieldset>
            <qp-fieldset id="Line12" view.bind="ExampleView" slot="B">
                <field name="YourField19" class="label-size-xxs"></field>
            </qp-fieldset>
        </qp-template>
    </qp-template>

    <qp-template id="form-example6" name="1-1-1" caption="Section 6">
        <qp-caption caption="Section 6"></qp-caption>
        <qp-fieldset id="Line13" view.bind="ExampleView" slot="A">
            <field name="YourField20"></field>
        </qp-fieldset>
        <qp-fieldset id="Line14" view.bind="ExampleView" slot="B">
            <field name="YourField21"></field>
        </qp-fieldset>
        <qp-fieldset id="Line15" view.bind="ExampleView" slot="C">
            <field name="YourField22">
                <qp-field control-state.bind="ExampleView.YourField23" class="no-label" pinned="true"></qp-field>
            </field>
        </qp-fieldset>
    </qp-template>

    <qp-template id="form-example7" name="1-1-1" caption="Section 7">
        <qp-caption caption="Section 7"></qp-caption>
        <qp-fieldset id="Line16" view.bind="ExampleView" slot="A">
            <field name="YourField24" class="label-size-xxs"></field>
            <field name="YourField25" class="label-size-xxs"></field>
            <field name="YourField26"></field>
        </qp-fieldset>
        <qp-fieldset id="Line17" view.bind="ExampleView" slot="B">
            <field name="YourField27"></field>
        </qp-fieldset>
        <qp-fieldset id="Line18" view.bind="ExampleView" slot="C">
            <field name="YourField28">
                <qp-field control-state.bind="ExampleView.YourField29" class="no-label" pinned="true"></qp-field>
            </field>
        </qp-fieldset>
    </qp-template>
</qp-tab>

Hope this helps!

SarangaVitharana10
Acumatica Employee
Forum|Forum|8 days ago
March 17, 2026

I want to set this screen to the Modern UI. How can I set 4 columns in each row? Is there an original Acumatica screen example like this?

You can try this. First split the row into 2 columns and then split each column into another 2 columns as follows

Not sure how it looks like (may be you have to do some modifications as well)

<qp-template id="form" name="1-1">
    <div slot="A">
      <qp-template id="Column_A" name="1-1">
        <qp-fieldset id="First_Column" slot="A" ...>
			...
		</qp-fieldset>
        <qp-fieldset id="Second_Column" slot="B" ...>
			...
		</qp-fieldset>
      </qp-template>
    </div>
    <div slot="B">
      <qp-template id="Column_B" name="1-1">
        <qp-fieldset id="Third_Column" slot="A" ...>
			...
		</qp-fieldset>
        <qp-fieldset id="Fourth_Column" slot="B" ...>
			...
		</qp-fieldset>
      </qp-template>
    </div>
 </qp-template>

SaiKrishnaV
Pro III
Forum|Forum|8 days ago
March 17, 2026

@mos11 This will help you!

https://www.blog.zaletskyy.com/post/2025/01/22/enhancing-acumaticas-modern-ui-adding-more-than-three-columns-to-form-templates

SaiKrishnaV https://www.linkedin.com/in/saikrishna-vaddepalli-aa67b8225

Vard86
Varsity I
Forum|Forum|8 days ago
March 17, 2026

Hello @mos11

Creating a 4th column in Acumatica with the Modern UI is not recommended by Acumatica. However, it is possible in that way: you can create 3 columns with the name "1-1-1" and, within the 3rd column, also create 2 subcolumns named "1-1".
I think this will help you.

Regards,
Vard

+16

darylbowman
Forum|Forum|8 days ago
March 17, 2026

Creating a 4th column in Acumatica with the Modern UI is not recommended by Acumatica.

This. Don’t do it.

In order to get a layout the most similar to what you have in Classic, you should do a single column with fields configured beside each other.

See the ‘Complicated Layout with Multiple Controls in a Row’ section here (or possibly ‘Multiple Columns in a Fieldset’)

Daryl⚡Freelance Acumatica developer (MVPx3🏆) 🛒store.deftstrokesdev.com ⏩linkedin.com/in/darylbowman

Vard86
Varsity I
Forum|Forum|7 days ago
March 18, 2026

Creating a 4th column in Acumatica with the Modern UI is not recommended by Acumatica.

This. Don’t do it.

In order to get a layout the most similar to what you have in Classic, you should do a single column with fields configured beside each other.

See the ‘Complicated Layout with Multiple Controls in a Row’ section here (or possibly ‘Multiple Columns in a Fieldset’)

Thank you @darylbowman !!

Marat43
Varsity I
Answer
Forum|Forum|5 days ago
March 20, 2026

Hi @mos11 ,

I was able to achieve a similar layout by combining nested templates instead of forcing a strict 4-column structure.

The idea is to split the layout into sections (e.g. 1-1 or 1-1-1) and then, where needed, nest another template inside one of the slots to simulate additional columns. For example:

<qp-tab after="#tab-example" id="tab-example" caption="Example">
    <qp-template id="form-example1" name="1-1">
        <qp-caption caption="Section 1"></qp-caption>
        <qp-fieldset id="Line1" view.bind="ExampleView" slot="A" class="label-size-xxs">
            <field name="YourField1"></field>
        </qp-fieldset>
        <qp-fieldset id="Line2" view.bind="ExampleView" slot="B">
            <field name="YourField2"></field>
        </qp-fieldset>
    </qp-template>

    <qp-template id="form-example2" name="1-1-1">
        <qp-caption caption="Section 2"></qp-caption>
        <qp-fieldset id="Line3" view.bind="ExampleView" slot="A">
            <field name="YourField3" class="label-size-xxs"></field>
        </qp-fieldset>
        <qp-fieldset id="Line4" view.bind="ExampleView" slot="B">
            <field name="YourField4"></field>
        </qp-fieldset>
        <qp-fieldset id="Line5" view.bind="ExampleView" slot="C">
            <field name="YourField5"></field>
        </qp-fieldset>
    </qp-template>

    <qp-template id="form-example3" name="1-1-1" caption="Section 3">
        <qp-caption caption="Section 3"></qp-caption>
        <qp-fieldset id="Line6" view.bind="ExampleView" slot="A">
            <field name="YourField6"></field>
        </qp-fieldset>
        <qp-fieldset id="Line7" view.bind="ExampleView" slot="B">
            <field name="YourField7"></field>
        </qp-fieldset>
        <qp-fieldset id="Line8" view.bind="ExampleView" slot="C">
            <field name="YourField8" class="label-size-xxs">
                <qp-field control-state.bind="ExampleView.YourField9" class="no-label" pinned="true"></qp-field>
            </field>
        </qp-fieldset>
    </qp-template>

    <qp-template id="form-example4" name="1-1" caption="Section 4">
        <qp-caption caption="Section 4"></qp-caption>
        <qp-template id="form-sub1" name="1-1" slot="A">
            <qp-fieldset id="SubLine1" view.bind="ExampleView" slot="A">
                <field name="YourField10"></field>
            </qp-fieldset>
            <qp-fieldset id="SubLine2" view.bind="ExampleView" slot="A">
                <field name="YourField11"></field>
            </qp-fieldset>
            <qp-fieldset id="SubLine3" view.bind="ExampleView" slot="B">
                <field name="YourField12"></field>
            </qp-fieldset>
        </qp-template>

        <qp-template id="form-sub2" name="1-1" slot="B">
            <qp-fieldset id="SubLine4" view.bind="ExampleView" slot="A">
                <field name="YourField13"></field>
            </qp-fieldset>
            <qp-fieldset id="SubLine5" view.bind="ExampleView" slot="A">
                <field name="YourField14"></field>
            </qp-fieldset>
            <qp-fieldset id="SubLine6" view.bind="ExampleView" slot="B">
                <field name="YourField15"></field>
            </qp-fieldset>
        </qp-template>
    </qp-template>

    <qp-template id="form-example5" name="1-1-1" caption="Section 5">
        <qp-caption caption="Section 5"></qp-caption>
        <qp-fieldset id="Line9" view.bind="ExampleView" slot="A">
            <field name="YourField16"></field>
        </qp-fieldset>
        <qp-fieldset id="Line10" view.bind="ExampleView" slot="B">
            <field name="YourField17"></field>
        </qp-fieldset>

        <qp-template id="form-sub3" name="1-1" slot="C">
            <qp-fieldset id="Line11" view.bind="ExampleView" slot="A">
                <field name="YourField18" class="label-size-xxs"></field>
            </qp-fieldset>
            <qp-fieldset id="Line12" view.bind="ExampleView" slot="B">
                <field name="YourField19" class="label-size-xxs"></field>
            </qp-fieldset>
        </qp-template>
    </qp-template>

    <qp-template id="form-example6" name="1-1-1" caption="Section 6">
        <qp-caption caption="Section 6"></qp-caption>
        <qp-fieldset id="Line13" view.bind="ExampleView" slot="A">
            <field name="YourField20"></field>
        </qp-fieldset>
        <qp-fieldset id="Line14" view.bind="ExampleView" slot="B">
            <field name="YourField21"></field>
        </qp-fieldset>
        <qp-fieldset id="Line15" view.bind="ExampleView" slot="C">
            <field name="YourField22">
                <qp-field control-state.bind="ExampleView.YourField23" class="no-label" pinned="true"></qp-field>
            </field>
        </qp-fieldset>
    </qp-template>

    <qp-template id="form-example7" name="1-1-1" caption="Section 7">
        <qp-caption caption="Section 7"></qp-caption>
        <qp-fieldset id="Line16" view.bind="ExampleView" slot="A">
            <field name="YourField24" class="label-size-xxs"></field>
            <field name="YourField25" class="label-size-xxs"></field>
            <field name="YourField26"></field>
        </qp-fieldset>
        <qp-fieldset id="Line17" view.bind="ExampleView" slot="B">
            <field name="YourField27"></field>
        </qp-fieldset>
        <qp-fieldset id="Line18" view.bind="ExampleView" slot="C">
            <field name="YourField28">
                <qp-field control-state.bind="ExampleView.YourField29" class="no-label" pinned="true"></qp-field>
            </field>
        </qp-fieldset>
    </qp-template>
</qp-tab>

Hope this helps!

+16

darylbowman
Forum|Forum|5 days ago
March 20, 2026

Please read the thread before posting answers. Vard86 suggested the EXACT same thing.

Daryl⚡Freelance Acumatica developer (MVPx3🏆) 🛒store.deftstrokesdev.com ⏩linkedin.com/in/darylbowman

About Acumatica ERP system

Acumatica Cloud ERP provides the best business management solution for transforming your company to thrive in the new digital economy. Built on a future-proof platform with open architecture for rapid integrations, scalability, and ease of use, Acumatica delivers unparalleled value to small and midmarket organizations. Connected Business. Delivered.

Sign up

Social Login

Login to the community

Social Login

Scanning file for viruses.

This file cannot be downloaded