Design a screen layout

Completed

The Store Commerce for Windows and Store Commerce for Browsers screen layouts in the Store Commerce are configurable for many requirements. Screen layouts are configured at the store level but can be overridden at the register and user level, if needed. This feature lets you configure registers once, but still allows a new layout for a line buster-specific layout or for a manager or power user that floats between stores.

Key components of Store Commerce screen layouts in Retail and Commerce > Channel setup > POS Setup > POS > Screen layouts are:

  • Layout Sizes
  • Button grids
  • Images

Screenshot of the Dynamics 365 Commerce Screen layouts page.

The Screen layouts component contains the main records that are attached to the stores, registers, and users. These layouts define the various device screen resolutions, each having its own button grids assigned to it. Each screen resolution has a layout that is defined through the Layout designer and can be designated as either a full sized or a compact layout. Full layouts allow you to design a display for large monitors or tablets, while a compact layout is for smaller devices like phones and has limited configuration options. Landscape or portrait layouts are supported.

Button grids

The Button grids component is a collection of Store Commerce operations that are assigned to a button that can have an overlaid image. Depending on the task, such as specifying a product category or image, the button can directly perform an action.

For example, a button in the button grid can direct the user to a category of items, or allow the user to add an item to the transaction without having to navigate through the traditional methods to add the item.

The following screenshot shows the POS operations page, located in Retail and Commerce > Channel setup > POS Setup > POS, which lists the operations that can be assigned to buttons.

Screenshot of the Dynamics 365 Commerce  POS operations page.

Button grids are designed as separate components, so they can be created once and then used across multiple layouts. The buttons in the button grid can be configured to have varying sizes and colors to provide emphasis and the differentiation of functions between buttons (for example, blue = timecards, green = payments, and more). Button grids are configurable by users without the need for a developer.

The Button grids page in Retail and Commerce > Channel setup > POS Setup > POS shows the Designer option and Button grid table actions.

Screenshot of the Dynamics 365 Commerce Button grids page.

The following screenshot of the Button grid designer, which is located in Retail and Commerce > Channel setup > POS Setup > POS > Button grids, shows an example of how the buttons can be placed for the previous button grid, including text and images in lieu of text.

Screenshot of the Dynamics 365 Commerce Button grid designer.

Layout zones

For each screen layout are two layout zones that must be designed:

  • Welcome screen
  • Transaction screen

In the layout designer, button grids that will be used in each screen must be defined as shown in the following Screen layouts page in Retail and Commerce > Channel setup > POS Setup > POS.

Screenshot of the Dynamics 365 Commerce layout zones.

Welcome screen

The following screenshot shows an example of the Welcome screen, which is configured in the layout designer, and the button grids. You can have as many button grid groups as needed, and they are typically designed by functional area, such as Start of day, End of day, Inventory, Shift and Drawer, and more.

The following screenshot shows the Welcome screen from the Store Commerce for Browser HOUSTON store HOUSTON-14 register. The following numbers correspond with the numbers in the screenshot that shows these components:

  1. Button grids
  2. Welcome screen images

Screenshot of the welcome screen of the Houston store.

Transaction screen

The subsequent example is of the Store Commerce Transaction screen with the following numbered elements shown in correlation to the Store Commerce layout designer:

  1. Receipt
  2. Totals panel
  3. Customer card
  4. Number pad
  5. Button grids
  6. Tab control

Screenshot of the Dynamics 365 Commerce Store Commerce Transaction screen.

Layout designer

The layout designer requires the Microsoft Dynamics Commerce Designer to be installed on a machine. The following screenshot is an example of a Store Commerce transaction screen layout as seen in the layout designer in Retail and Commerce > Channel setup > POS Setup > POS > Screen layouts > Layout designer.

Screenshot of a Store Commerce transaction screen layout as seen in the layout designer.

The numbers in the screenshot correlate to the following sections:

  1. Receipt
  2. Customer card
  3. Totals panel
  4. Button grids
  5. Tab control

When you are developing screen layouts and button grids, the existing Contoso examples in the Commerce demo data set can be used as a template and to help you gain inspiration.

Language support

Commerce supports international deployments and therefore supports multiple languages. Languages are configured on the store and the worker.

The store’s configured language is used for all data items such as customer names, products and attributes, payment methods, receipts, and more.

The worker’s language will default from the store, but if overridden on the worker’s configuration, it will be used to translate non-data elements such as labels, menus, and lists. The text on the button grids is considered as data, so if text exists on buttons, the button grid might need to be copied for each language that is supported.

Notifications

Situations might occur when sending a notification to a worker in a store would be helpful.

For example, Store A has a few pickups for the day. If the Store Commerce indicates how many store pickups are scheduled for the day, the worker could collect them before the store opens. Rather than having to navigate to a page to determine if pickups were scheduled, the worker would instead receive a notification on the POS button indicating that actions were needed, which would result in quick facilitation of those actions.

The notification framework in Store Commerce helps by letting retailers configure role-based notifications.

For example, picking transfers might only need to be completed by store managers. To avoid configuring each store manager with this functionality, it's easier to configure it once and then have it applied to all managers.

Notifications are configured on the POS Permission groups page under Retail and Commerce > Employees, as shown in the following screenshot.

Screenshot of the Dynamics 365 Commerce POS permission groups page.

To configure actions for notifications, the POS Operations page has an Enable notifications field. On the functionality profile, the Notification interval can be set to dictate how often the notifications are pushed to the stores. The buttons that are configured in a button grid can allow for live indicators when a notification is received, such as the need to pull items from the store floor for shipping.

The following screenshot shows an example of a notification for the Order fulfillment operation as seen from the Store Commerce.

Screenshot of the Order fulfillment operation as seen from the Store Commerce.