Creating layouts

Layouts have containers that are divided into columns and rows.

Under Setup -> POS layout there are buttons that are used to create layouts with two different number of columns and rows. Both buttons generate the kind of layout, only with different number of containers:

• New menu (6x3)

  This button is ideal for a sub-layout that will occupy a part of a full-screen parent layout.

• New layout (24x17)

  This button is ideal to create a full screen layout.

Don't be thrown off by the word "menu" here instead of layout. Menu is used in some places to represent layouts that are smaller in size.

The picture below shows a typical newly created layout:

1. Menu ID: This is the default ID of the layout. It is recommended to change that into something more descriptive by clicking the Change ID button.

2. Layout name: The default layout name which should also be changed.

3. Layout canvas: In this case the canvas shows 18 (3x6) containers. The number of containers can be changed by changing the number of columns or rows. Sub-layouts and other visual components can be dropped here and then dragged to cover one or more of those containers.

4. Grid layout: Used to change the number of columns and rows.

5. Preferred dimensions: Used only to visualize during design time the estimated size of the layout shown on the POS.

6. Import: Import an external layout from JSON.

7. Export: Exports current layout to JSON.

8. Remove: Deletes the current layout upon confirmation.

Creating layouts for each role

As mentioned above, there should be one layout created for each of layout roles. The POS will then have a config that declares which layouts will be assigned to each of those layout roles:

• Layout for Action role

  • Preferred ID: menu-tender-main

  • Most tender types are only accessible through menus. It's best practice to group them all together into a tender menu.

  • Most common tender types should be places directly at the top-level while less common tender types should be in sub-menus.

• Layout for Quick role

  • Preferred ID: menu-quick-main

  • Example operations:

    • Open drawer

    • Void sale

    • X/Z - report

    • Suspend / resume transaction

• Layout for Journal role

  • Preferred ID: menu-journal-main

  • Example operations:

    • Line discounts

    • Change quantity

    • Void line

• Layout for Sales role

  • Preferred ID: menu-sales-main

  • Depending on the organization and POS use cases this might take up a large portion of the main screen layout. If you are selling a good number of items without bar code scanning then you might want to structure your sales menu into sub-menus to allow staff to sell all your catalog with minimal touches.