52ViKING POS Designer layouts

You can add a new layout in two ways:

1. Select the Explorer tab in the dark bar in the left side of the POS Designer

2. In the Layout field, click the plus sign

3. Specify a name for the new layout

   The name can't contain spaces.

4. Select the required layout type

5. Specify the required number of columns in your layout

6. Click Create

- or -

1. In the POS Designer top menu, click to expand the menu

   

2. In the lower part of the expanded menu, click Add new layout

3. Specify name, layout type, and number of columns as described in the previous, and click Create

When you add a new layout, you can select between these layout types:

• StackPanel: The most common type of layout. You can add any type of component to it, except carousel and drawer components. By default, this layout type has three columns, but you can change that when you add it.

• DrawerWithCarousel: A special layout type for accommodating the carousel component (and any other components you may need). It's prepopulated with a carousel, some drawers, and some other components, but you can remove the components that you don't need and add new components as required.

  What's a carousel? A carousel is a space-saving component that's primarily meant for use on layouts for smaller devices, where it can display multiple other components, typically browsers, in a single side pane. Shop assistants can then swipe to move between the carousel's content.

  What's a drawer? A drawer is a space-saving component that's primarily meant for use on layouts for smaller devices, where it can display collapsible side-content on small section of your layout. The content is often menu navigation, but it can be any content.

• DrawerWithStackPanel: A special layout type for accommodating drawer components. It's prepopulated with a left drawer, a right drawer, and a bottom drawer as well as some buttons, but you can remove the components that you don't need and add new components as required.

• GlobalPrompt: A special layout type for creating notification dialogs that can be defined once and then used across all layouts.

If required, you can make a copy of the layout that you currently have open in your POS Designer.

1. Make sure that you have opened an existing layout

2. In the POS Designer top menu, click to expand the menu

   

3. In the lower part of the expanded menu, click the menu, and select Copy layout

4. In the Layout name field, specify a name for the new copy of the layout

   The name can't contain spaces.

5. Edit other settings as required

   Note that some settings may conflict with the original layout if you edit them. For example, if the original layout is a three-column layout where all three columns contain components, the original layout will break if you reduce the number of columns on the copy. On the other hand, you can easily add a fourth column to the copy without breaking the functionality of the original three-column layout.

6. When ready, click Add

If others have created a layout, they can export it to a local file system.

You can then import the layout from the local file system:

1. In the POS Designer top menu, click to expand the menu

   

2. In the lower part of the expanded menu, click the menu, and select Import layout

3. Navigate to the required layout (it's in the .json file format) and import it

When you design a layout, you can design it for mobile phones, tablets, or screens with 4:3 or 16:9 aspect ratios.

If you want to design a layout that matches multiple screen sizes, you must design a separate layout for each required screen size (example: returns_4_3, returns_16_9, returns_mobile, and returns_tablet). However, thanks to the copy feature, you don't need to recreate the layout from scratch for each required screen size.

In the menu above your layout, select either Mobile, Tablet, POS Screen (4:3), or POS Screen (16:9).

Each format has a default size, for example 411×731 pixels for Mobile, that you can adjust to suit your organization's needs.

As described in the topic 52ViKING POS Designer, a diagram contains layouts, and layouts contain components. Together, they make it possible for till users to complete all required workflows.

• For information about how to add components to a layout, see 52ViKING POS Designer components

Each layout typically supports a group of related workflows. Examples:

• A layout for logging in to the till

• A layout for selling articles and accepting payment

• A layout for handling customer club queries and registrations

When we say that the layouts can refer to each other so that you can transparently offer even complex combinations of workflows, it's not the layouts themselves that are linked. Rather, it's the components on the layouts – primarily the action components, such as buttons and menus – that can have properties that let users transparently move between layouts.

For example, the layout for selling articles and accepting payment can have a Customer Club menu button, and if the user taps that button, an action defined for that button will make the till display automatically switch to the layout for handling customer club queries and registrations.

Likewise, if the user taps a Back to Sales menu button on the customer club layout, an action defined for that button will automatically switch to the layout for selling articles and accepting payment.

This way ...

• Users will not know that there may be multiple layouts in the design that you've created. Users will simply experience that their till display supports all the workflows that they need to do their tasks.

• Layouts themselves don't connect to each other. It's the properties of the layouts' components that make layouts seamlessly connect into a complete till display.

If you've created a layout, you can export the layout to a local file system.

Others can then import the layout into their POS Designer from the local file system:

1. In the POS Designer top menu, click to expand the menu

   

2. In the lower part of the expanded menu, click the menu, and select Export layout

   POS Designer will store the layout in your local Downloads folder with a file name based on this structure: [layout name].json

3. Place the .json file on a local file system, and notify the people who should be able to import the layout