52ViKING POS Designer diagrams

This topic is primarily for administrators and other people who manage a Fiftytwo solution

A 52ViKING POS Designer diagram is a user interface design that supports all the workflows that your target groups need. You'll typically only have one diagram, but if your organization owns several chains of stores, you may design separate diagrams for each chain to reflect each chain's workflows, branding, etc.

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

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:

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. Specify a name for the new diagram, and then click Create

    The name can't contain spaces.

- or -

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

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

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

  2. In the upper part of the expanded menu, click Copy 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 Create

If others have created a diagram, they can compress the files that make up the diagram into a zipped folder, and then export the zipped folder to a local file system.

You can then import the zipped folder from the local file system:

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

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

  3. Click (that's the paper clip icon)

  4. Navigate to the required zipped folder and select it

  5. In the Import as field, specify a name for the imported diagram

    The name can't contain spaces.

  6. Click Import

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 through themes:

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.

Create a test layout with relevant components and use that to view the effect of your theme changes. Once you're happy with the theme's look and feel, you can delete the test layout and begin creating real layouts.

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

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

  3. Select one of the four options:

    • Diagram: Customize the styles that's used on your current diagram

    • Default: Customize your diagram based on styles from the default theme

      If you experiment with dark or light themes, use this option to quickly return to default settings (but be aware that the default settings may not exactly match your diagram from before you began experimenting if you've made non-default style changes to your original diagram's theme).

    • Dark: Customize your diagram based on styles from a low-light user interface that displays mostly dark surfaces

    • Light: Customize your diagram based on styles from a high-light user interface that displays mostly light surfaces

  4. In the Customize styles dialog, verify that the suggested styles will suit your diagram, and make changes as required

    You can edit the following styles:

    • Default styles

    • Toolbar styles

    • List component styles

    • Journal component styles

    • Total component styles

    • Notification hint styles

    • Message display styles

    • Keyboard component styles

    • Panel button styles

  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.

When you design your diagram, you can publish it to a specific till to test and debug it.

  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. Specify the IP address and port number of the required till.

  4. Click the button to the right to verify connection to the till in question.

  5. Click the button to the left to launch the diagram on the till in question. Then use another browser window to connect to the till and test your diagram.

When you're finished designing your diagram, you can publish it to a predefined destination, for example a test or production environment.

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

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

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

If you've created a diagram, you can compress the files that make up the diagram into a zipped folder, and then export the zipped folder to a local file system.

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

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

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

    POS Designer will generate a zipped folder with the required files and place it in your local Downloads folder with a name based on this structure: [diagram name][date][unique number].zip

    Example: my-diagram-20230421-123456.zip

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

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, and then select the required diagram version from the archive

  4. In the IP/Host field, specify the IP address or host name of the computer that runs the POS Designer instance that you want to send the diagram to

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

    • Port: By default, POS Designer uses port 7002 when sending diagrams between two instances. You can change this to another port number if required.

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

  1. You can't send the diagram until POS Designer has checked that there's a valid instance of POS Designer at the receiving end

    Next to the Export button, which at this stage is not available, click Verify to perform the check

  2. If the check is successful, the Export 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.

  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

Typical next step: Add layouts to your diagram