> For the complete documentation index, see [llms.txt](https://docs.centara.online/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://docs.centara.online/getting-started/configuration/layouts-and-menus/creating-layouts.md).

# 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.

{% hint style="info" %}
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. 
{% endhint %}

The picture below shows a typical newly created layout:

![](https://2622013076-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-LaL-VPZH18nR2GHl90a%2F-LlC0Hu2W0dxkTklFuxy%2F-LlCRVKOue4bjkEX5JsJ%2Fimage.png?alt=media\&token=d29f131e-d357-4b46-94fa-7737541dfa08)

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.