52ViKING POS Designer diagrams

52ViKING POS Designer comes with ready-to-use template diagrams that helps you quickly create POS user interfaces for:

• Regular stationary POSs

• Mobile POSs

• Self-service checkouts (SCOs)

The templates contain what's necessary to get started, and you can easily customize them with your organization's own logos, colors, images, etc.

You can of course also add, edit, or remove layouts and components to add or change entire POS workflows once you've familiarized yourself with the templates.

To access the templates, select Diagrams after you've logged in to POS Designer:

No matter whether you want to use one of the templates or you want to create a new diagram from scratch instead of using one of the templates, you can add a new diagram in two ways:

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

2. In the Diagram field, click the plus sign .

3. In the Diagram name field, specify a name for the new diagram.

   The name can't contain spaces.

4. If you want to add a diagram that based on one of the templates, select the required template in the Diagram template field. Leave the field blank if you want to create a new diagram from scratch.

5. Click Create.

- or -

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

   

2. In the upper part of the expanded menu, click Create new diagram and follow the instructions in the previous.

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

   

2. In the upper part of the expanded menu, click Clone diagram

3. Specify a name for the new diagram

   The name can't contain spaces.

4. Select the diagram that you want to copy, and then click Clone

When you've added a diagram, and you begin to add layouts and components, you can edit individual elements' properties to control how they look, what they do, etc. However, you can also control the general look and feel of a diagram and its layouts and components on a higher level: through themes.

POS Designer offers three themes:

• Default

• Dark: A low-light user interface that displays mostly dark surfaces

• Light: A high-light user interface that displays mostly light surfaces

Select a theme

1. Make sure that you've opened the required diagram

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

   

3. In the upper part of the expanded menu, click Choose theme and the select a theme

4. If required, you can edit the theme's styles

5. When ready, click Apply

Edit a diagram's theme

You can edit the theme that applies for a diagram at any time.

To get a common look and feel across your diagram's layouts, it's a good idea to make any edits to the diagram's theme before you begin to add layouts and components. That's because if you've already styled some components individually on your layouts, those individually styled components will not be affected by general theme changes, and that can lead to an inconsistent look of, for example, toolbars or buttons across your layouts.

It's often a good idea to create a test diagram with relevant layouts and components and use that test diagram to view the effect of your theme changes. You can use the Clone feature to quickly create a test diagram based on an existing diagram. Once you're happy with the theme's look and feel, you can then rename the test diagram and begin using it for real.

1. Make sure that you've opened the required diagram

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

   

3. In the upper part of the expanded menu, click Edit theme

4. In the Customize styles (using diagram theme) dialog, you can edit the following styles:

   • Default styles

   • Toolbar styles

   • List component styles

   • Journal component styles

   • Total component styles

   • Button styles

   • Label styles

   • Menu styles

   • Notification hint styles

   • Dialog styles

   • Message display styles

   • Keyboard component styles

   • Panel button styles

   • View group styles

   • Form styles

   To learn more about the various components whose look and feel the styles control, see 52ViKING POS Designer components.

5. When ready, click Save

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 a layout to a diagram, see 52ViKING POS Designer layouts

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

POS triggers are events exposed by a till, for example the event that an ongoing purchase order state has changed so that content in the till display's journal component must be updated. Triggers are typically used to control steps in workflows as well as to display prompts, that is messages that the shop assistant must react to.

POS Designer comes with a set of triggers that are enabled by default. These default triggers cover typical scenarios. If you want to view the default triggers, or select fewer or more triggers for your diagram, do the following:

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

   

2. In the right side of the upper part of the expanded menu, click the menu.

3. Select POS triggers.

4. If you place your pointer over the name of a trigger in the list, and then over the icon, you can view a description of the trigger.

5. If required, edit the trigger selection to match your needs. When ready click Save.

   If you experiment with the trigger selection, you can always return to the default trigger selection if you click Use default triggers in the bottom left corner of the dialog.

When you design your diagram, you can launch it on a specific till to test and debug your diagram from the computer on which you work with POS Designer.

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

   

2. In the upper part of the expanded menu, click Launch package.

3. Select the required Protocol (HTTP or HTTPS). Then, in the POS API host field, specify the IP address and port number of the required till.

4. Select if you want to launch the diagram in a new window or a new tab.

5. Click the Test connection button to the right to verify connection to the till in question.

6. If the connection works, click the Launch POS UI button to the left to launch the diagram on the till in question.

When you're finished designing your diagram, you can publish it to the POS Designer server as a package.

The publishing feature requires that your organization has set up a publishing workflow. Ask your Fiftytwo administrator if you're in doubt.

If you've previously published packages, publishing the latest version of the package will not overwrite previously published package versions.

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

   

2. In the upper part of the expanded menu, click Publish package

If you or others have published a diagram as a package (see the previous), you can get the latest version of the package.

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

   

2. In the upper part of the expanded menu, click Get latest published

You can send a diagram to another instance of POS Designer, for example if you're working with a colleague, who should be able to take over your work.

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

   

2. In the right side of the upper part of the expanded menu, click the menu

3. Select Send diagram

4. Select the required Protocol (HTTP or HTTPS).

5. In the API host field, specify the IP address or hostname of the computer that runs the POS Designer instance that you want to send the diagram to

   By default, POS Designer uses port 7002 when sending diagrams between two instances. You can specify another port number if required.

6. Select Show advanced settings and select any of the advanced settings that are relevant for you:

   • Send as: By default, POS Designer will send the diagram with a name based on this structure: [diagram name]-export. You can change this to another name if required.

     The name can't contain spaces.

   • Overwrite diagram (if exists): With this option you can make the diagram that you send automatically overwrite any existing diagram with the same name on the receiving instance of POS Designer.

     Use with caution. It's a good idea to speak with the people who use the receiving instance of POS Designer before you select this option.

7. You can't send the diagram until your POS Designer has checked that there's a valid instance of POS Designer at the receiving end. Click Verify API to perform the check

8. If the check is successful, the Send button becomes available, and you can click it to send the diagram

When you archive a diagram, you save a snapshot of it on the server, so that you can later return to the diagram's state at the time that it was archived. Archiving can be useful, for example, if you experiment a lot with your diagram's content and workflows, and you want to be able to return to a previous state of the diagram.

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

   

2. In the upper part of the expanded menu, click Archive diagram.

Restore a diagram from an archive

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

   

2. In the right side of the upper part of the expanded menu, click the menu

3. Select Restore diagram, and then select the required diagram version from the archive