Skip to main content

Screens

Xenial Cloud Portal Digital Menu Board Screens

From the Screens homepage, view the following details about existing screens:

Column

Description

Screen Name

Name of the screen.

Description

Description of the screen.

Resolution

Screen resolution.

Select All under the column header to filter the screen list by resolution.

Display Layouts

Number of display layouts mapped to the screen.

Select the Display Layouts value for a particular screen to view the names of each mapped layout.

Last Update

Date/time the screen record was last updated.

Create Screen

To create a new screen and design its contents:

  1. From the upper-right of the Screens homepage, select Create Screen to open the content builder.

  2. From the right pane, define the following:

    Field

    Description

    Screen Size

    From the dropdown, select the desired resolution for the screen.

    Screen Name

    Type a name for the screen.

    Description

    Type a description of the screen.

  3. Use the content builder to add and configure the screen components:

    Component

    Description

    Add Image

    Upload image files and configure their size and location on the screen.

    • Valid file types: PNG, JPEG, GIF, SVG

    • Maximum file size: 30MB

    Add Video

    Upload video files and configure their size and location on the screen.

    • Valid file types: MP4, MOV, WEBM

    • Maximum file size: 100MB

    Add Text

    Add text components and define their size, location, and color. Apply a custom font or Google font.

    Add Price Component

    Add and format a pricing component. Optionally associate a product with the component.

    Add Carousel

    Add a collection of components that are displayed consecutively on an infinite loop at a specified duration. A carousel can include any combination of images, videos, and/or price components.

    For example, a carousel rotation might include two (2) images of the current promotional items (where each image is displayed for five (5) seconds), followed by an eight (8) second video.

    Add Order Confirmation

    Add a customer-facing order confirmation unit (OCU) to display order details to the customer, including the:

    • Order Item list with respective quantities and modifiers.

    • Order total summary, including the sub total, tax, and applied discounts.

    The benefits of an OCU include:

    • Improves order accuracy and speed-of-service.

    • Provides up-sell and cross-sell opportunities at the time of purchase.

    • Reduces operating expenses and employee theft.

    • Enhances guest satisfaction.

    Anmerkung

    The screen content is automatically saved after each user action.

  4. From the upper-right of the content builder, select Preview Screen to see a preview of the screen in a browser window.

  5. From the upper-left of the content builder, select the "hamburger" icon.

  6. From the "hamburger" icon dropdown, select Exit Screen to exit the content builder.

    Once a screen is created, use the Display Layouts editor to assign the screen to one or more display layouts.

Add Image

To add an image:

  1. From the upper-left of the content builder, select Media.

  2. From the file browser, select and add the image file.

    The image is added to the screen workspace and to the Layers pane on the left.

  3. From the right pane, define the following:

    Field

    Description

    Name

    In the provided field, type a name for the image.

    • Select the lock icon to make the component properties non-editable.

    • Toggle the eye icon to hide/show the component.

    X and Y

    Type the desired X and Y coordinates for the component.

    When the position of the component is manually adjusted, the X and Y field values are updated automatically.

    W and H

    Type the desired width and height of the component.

    When the width and height of the component are manually adjusted, the W and H field values are updated automatically.

    Scale Proportionally

    Enable this option to automatically update the X, Y, W, and H values proportionally when one value is changed.

    Alt Text

    Type the alternate text to display on the screen in the event the image is not available.

    Description

    Type a description of the image.

Add Video

To add a video:

  1. From the upper-left of the content builder, select Media.

  2. From the file browser, select the video file.

    The video is added to the screen workspace and to the Layers pane on the left.

  3. From the right pane, define the following:

    Field

    Description

    Name

    In the provided field, type a name for the video.

    • Select the lock icon to make the component properties non-editable.

    • Toggle the eye icon to hide/show the component.

    X and Y

    Type the desired X and Y coordinates for the component.

    When the position of the component is manually adjusted, the X and Y field values are updated automatically.

    W and H

    Type the desired width and height of the component.

    When the width and height of the component are manually adjusted, the W and H field values are updated automatically.

    Infinite Play

    Enable the toggle to play the video on an infinite loop.

    Description

    Type a description of the video.

Add Text

To add text:

  1. From the upper-left of the content builder, select Text.

  2. From the right pane, define the following:

    Field

    Description

    Text

    In the provided field, type the text to display on the screen.

    • Select the lock icon to make the component properties non-editable.

    • Toggle the eye icon to hide/show the component.

    X and Y

    Type the desired X and Y coordinates for the component.

    When the position of the component is manually adjusted, the X and Y field values are updated automatically.

    W and H

    Type the desired width and height of the component.

    When the width and height of the component are manually adjusted, the W and H field values are updated automatically.

  3. From the Text section on the right pane, select formatting options:

    Option

    Description

    Font

    From the dropdown, select a font to apply to the text.

    Size

    In the provided field, type the desired font size.

    Style

    From the dropdown, select a font style.

    Color

    From the color field, select a font color. The HEX# for the selected color is displayed.

    Justification

    From the right of the color field, select a justification option.

Add Price Component

Anmerkung

Price components are automatically formatted in accordance with the regional settings defined for the company.

Regional settings are defined in Data Management using the Company Preferences editor. See Regional Settings.

To add a price component:

  1. From the upper-left of the content builder, select Component.

  2. From the Component dropdown, select Price Component.

  3. From the right pane, define the following:

    Field

    Description

    Name

    In the provided field, type a name for the component.

    • Select the lock icon to make the component properties non-editable.

    • Toggle the eye icon to hide/show the component.

    X and Y

    Type the desired X and Y coordinates for the component.

    When the position of the component is manually adjusted on the screen, the X and Y field values are updated automatically.

    Product

    (Optional) To associate the component with a specific product:

    1. Select Add Product.

    2. From the Product List window, select the product.

    3. From the lower-right of the Product List window, select Done.

    The name and ID of the selected product are displayed in the Product field.

  4. From the Pricing Format section on the right pane, define the following:

    Option

    Description

    Decimal Places

    Type the number of decimal places to display in the product price.

    Show Currency Symbol

    Display the currency symbol with the product price.

    Show Decimal

    Display the decimal values in the same font size as the integer value.

    If this option is NOT selected, decimal values are displayed in a smaller font size.

    Show Zero Integer

    Display the leading zero (0) in the product price (e.g. 0.99).

    Show Zero Decimal

    Always display the decimal value even when the decimal value is zero (0) (e.g. $1.00).

  5. From the Text section on the right pane, select formatting options:

    Option

    Description

    Font

    From the dropdown, select a font to apply to the text.

    Size

    In the provided field, type the desired font size.

    Style

    From the dropdown, select a font style.

    Color

    From the color field, select a font color. The HEX# for the selected color is displayed.

    Justification

    From the right of the color field, select a justification option.

Add Carousel

To add a carousel:

  1. From the upper-left of the content builder, select Component.

  2. From the Component dropdown, select Carousel.

  3. From the file browser, select a component to add to the carousel.

  4. From the right pane, define the following:

    Field

    Description

    Name

    Type a name for the carousel. The default name is "Carousel".

    • Select the lock icon to make the component properties non-editable.

    • Toggle the eye icon to hide/show the component.

    X and Y

    Type the desired X and Y coordinates for the component.

    When the position of the component is manually adjusted on the screen, the X and Y field values are updated automatically.

    W and H

    Width and height of the carousel. The values are automatically set to the width and height of the largest component included in the carousel. The values are non-editable.

    Transition Effect

    From the dropdown, select the desired effect to use when transitioning from one component to another.

    Carousel Items

    Select and drag the control to the left of the listed items to sort them in the desired sequence.

    Auto Dur(s)

    Type the number of seconds to display the item before transitioning to the next item.

  5. From the upper-left of the content builder, select the next component to add to the carousel.

  6. From the right pane, configure the component properties.

Add Order Confirmation

An Order Confirmation Unit (OCU) is a customer-facing screen that displays order details to the customer. By default, the Order Confirmation component includes two (2) pages:

Page

Description

Ordering

The Ordering page includes the Item List and an optional Summary Area.

  • The Item List displays order item details.

  • The Summary Area displays the order sub total, tax, and applied discounts.

Add optional elements to the page including groups, carousels, and/or other media.

Thank You

The Thank You page displays a "thank you" message for the guest and the order total.

This page opens after the order is paid by the guest

The elements to configure include the "thank you" message text, the order total label, and the number of seconds to display the page.

To add an Order Confirmation component:

Anmerkung

  • Select the lock icon to make the component properties non-editable.

  • Toggle the eye icon to hide/show the component.

  1. From the upper-left of the content builder, select Component.

  2. From the Component dropdown, select Order Confirmation.

  3. From the Layers pane on the left, select Order Confirmation.

  4. From the right pane, define the following:

    Field

    Description

    X and Y

    Type the desired X and Y coordinates for the component.

    When the position of the component is manually adjusted on the screen, the X and Y field values are updated automatically.

    W and H

    Type the desired width and height of the component.

    When the width and height of the component are manually adjusted, the W and H field values are updated automatically.

    Show Thank You Page

    Select this option to include a "Thank You" page on the OCU.

    The "Thank You" page is automatically displayed on the OCU after the order is paid by the guest.

    Inactivity Time (s)

    Type the desired number of seconds of inactivity before the OCU times out.

  5. From the Layers pane on the left, select Ordering Page.

  6. From the right pane, define the following:

    Field

    Description

    Show Summary Area

    Select this option to include a Summary Area on the Ordering page.

    The Summary Area displays the order sub total, tax, and applied discounts.

  7. From the Layers pane on the left, select Item List.

  8. From the right pane, define the following:

    Field

    Description

    X and Y

    Type the desired X and Y coordinates for the component.

    When the position of the component is manually adjusted on the screen, the X and Y field values are updated automatically.

    W and H

    Type the desired width and height of the component.

    When the width and height of the component are manually adjusted, the W and H field values are updated automatically.

    Modifier Display

    Select the desired option:

    • List - Item modifiers are listed vertically.

    • Comma Separated - Item modifiers are listed horizontally and separated by a comma.

    Item Spacing (px)

    Type the number of pixels of blank space in between each listed order item.

    Indent Size (px)

    Type the number of pixels of blank space to indent each listed order item.

    Show Single Item Quantities

    Select this option to display "1" next to each order item with a quantity of one (1).

    If this option is not selected, a quantity is not displayed next to each order item with a quantity of one (1).

    Text

    From the Text section, select formatting options:

    Option

    Description

    Font

    From the dropdown, select a font to apply to the text.

    Color

    From the color field, select a font color. The HEX# for the selected color is displayed.

    Pricing Format

    From the Pricing Format section, define the following:

    Option

    Description

    Decimal Places

    Type the number of decimal places to display in the product price.

    Show Currency Symbol

    Display the currency symbol with the product price.

    Show Decimal

    Display the decimal values in the same font size as the integer value.

    If this option is NOT selected, decimal values are displayed in a smaller font size.

    Show Zero Integer

    Display the leading zero (0) in the product price (e.g. 0.99).

    Show Zero Decimal

    Always display the decimal value even when the decimal value is zero (0) (e.g. $1.00).

  9. From the Layers pane on the left, select Summary Area.

    This element is only available when Show Summary Area is selected for the Ordering page.

  10. From the right pane, define the following:

    Field

    Description

    X and Y

    Type the desired X and Y coordinates for the component.

    When the position of the component is manually adjusted on the screen, the X and Y field values are updated automatically.

    W and H

    Type the desired width and height of the component.

    When the width and height of the component are manually adjusted, the W and H field values are updated automatically.

    Summary Options

    Select the desired options:

    Option

    Description

    Show Sub Total

    Display the order sub total in the Summary Area.

    Show Tax

    Display the tax on the order in the Summary Area.

    Show Discounts

    Display applied discount details in the Summary Area.

    Text

    From the Text section, select formatting options:

    Option

    Description

    Font

    From the dropdown, select a font to apply to the text.

    Color

    From the color field, select a font color. The HEX# for the selected color is displayed.

    Pricing Format

    From the Pricing Format section, define the following:

    Option

    Description

    Decimal Places

    Type the number of decimal places to display in the product price.

    Show Currency Symbol

    Display the currency symbol with the product price.

    Show Decimal

    Display the decimal values in the same font size as the integer value.

    If this option is NOT selected, decimal values are displayed in a smaller font size.

    Show Zero Integer

    Display the leading zero (0) in the product price (e.g. 0.99).

    Show Zero Decimal

    Always display the decimal value even when the decimal value is zero (0) (e.g. $1.00).

  11. From the Layers pane on the left, select Thank You Page.

  12. From the right pane, define the following:

    Field

    Description

    Duration (s)

    Type the number of seconds to display the Thank You page on the OCU.

  13. From the Layers pane on the left, select Thank You Text.

  14. From the right pane, define the following:

    Field

    Description

    X and Y

    Type the desired X and Y coordinates for the component.

    When the position of the component is manually adjusted on the screen, the X and Y field values are updated automatically.

    W and H

    Type the desired width and height of the component.

    When the width and height of the component are manually adjusted, the W and H field values are updated automatically.

    Text

    From the Text section, select formatting options:

    Option

    Description

    Font

    From the dropdown, select a font to apply to the text.

    Size

    In the provided field, type the desired font size.

    Style

    From the dropdown, select a font style.

    Color

    From the color field, select a font color. The HEX# for the selected color is displayed.

    Justification

    From the right of the color field, select a justification option.

  15. From the Layers pane on the left, select Total Label.

  16. From the right pane, define the following:

    Field

    Description

    Total Label

    Type the text label for the order total.

    X and Y

    Type the desired X and Y coordinates for the component.

    When the position of the component is manually adjusted on the screen, the X and Y field values are updated automatically.

    W and H

    Type the desired width and height of the component.

    When the width and height of the component are manually adjusted, the W and H field values are updated automatically.

    Text

    From the Text section on the right pane, select formatting options:

    Option

    Description

    Font

    From the dropdown, select a font to apply to the text.

    Size

    In the provided field, type the desired font size.

    Style

    From the dropdown, select a font style.

    Color

    From the color field, select a font color. The HEX# for the selected color is displayed.

    Justification

    From the right of the color field, select a justification option.

  17. From the Layers pane on the left, select Order Total.

  18. From the right pane, define the following:

    Field

    Description

    X and Y

    Type the desired X and Y coordinates for the component.

    When the position of the component is manually adjusted on the screen, the X and Y field values are updated automatically.

    Pricing Format

    From the Pricing Format section, define the following:

    Option

    Description

    Decimal Places

    Type the number of decimal places to display in the product price.

    Show Currency Symbol

    Display the currency symbol with the product price.

    Show Decimal

    Display the decimal values in the same font size as the integer value.

    If this option is NOT selected, decimal values are displayed in a smaller font size.

    Show Zero Integer

    Display the leading zero (0) in the product price (e.g. 0.99).

    Show Zero Decimal

    Always display the decimal value even when the decimal value is zero (0) (e.g. $1.00).

    Text

    From the Text section on the right pane, select formatting options:

    Option

    Description

    Font

    From the dropdown, select a font to apply to the text.

    Size

    In the provided field, type the desired font size.

    Style

    From the dropdown, select a font style.

    Color

    From the color field, select a font color. The HEX# for the selected color is displayed.

    Justification

    From the right of the color field, select a justification option.

To preview the OCU:

  1. From the upper-right of the content builder, select Preview Screen.

  2. From the preview screen, use the following key combinations to view specific OCU elements:

    • Cmd/Ctrl + H - View the Ordering page.

    • Cmd/Ctrl + J - View the Thank You page.

    • Cmd/Ctrl + K - Hide the Ordering and Thank You pages.

Align Components

When configuring a component, the following alignment tools are available from the top of the right pane.

Left_Align.png

Align the component on the left side of the screen.

Absolute_Center_Align.png

Move the component to the center of the screen.

Right_Align.png

Align the component on the right side of the screen.

Top_Align.png

Align the component along the top of the screen.

Center_Align.png

Move the component to the center of the screen without changing its horizontal placement.

Bottom_Align.png

Align the component along the bottom of the screen.

Distribute_Spacing.png

To equally distribute horizontal and/or vertical spacing between selected components:

  1. While holding down the Ctrl key on the keyboard, select the components.

  2. From the tool dropdown, select the desired option:

    • Distribute Horizontal Spacing

    • Distribute Vertical Spacing

From the upper-left of the content builder, select the "hamburger" icon to access the following options.

Option

Description

Show Rulers

Display a ruler along the vertical and horizontal perimeters of the screen.

Snap

Automatically align components on the screen. Disable this option to fully control component placement on the screen.

Show Guides

Show/hide the vertical and horizontal guides on the screen. Use guides to help manually align components and prevent misaligned pixel errors.

When Show Guides is enabled, the following options are added to the component context menu. Right-click a component to access these options:

  • Add Vertical Guide

  • Add Horizontal Guide

To manually add a guide, drag a line from the vertical and/or horizontal rulers. Show Rulers must be enabled.

Tipp

Use the arrow keys on the keyboard to nudge an item on the screen one (1) pixel at a time in the respective direction.

To nudge an item ten (10) pixels at a time, hold down Shift and then select the applicable arrow key on the keyboard.

Additional Tools

From the upper-right of the Screens content builder, access the following additional tools:

Tool

Description

Undo

Select the circular arrow icon to undo the previous action.

Zoom options

From the dropdown, select a zoom option:

  • In the provided field, type the desired zoom percentage.

  • Select a predefined zoom percentage.

Select Enter Full Screen Mode to view the content builder in "full screen".

Preview Screen

View a preview of the current screen in a separate browser tab.

Layers

From the Layers section on the left pane of the content builder, manage content layers for a DMB screen.

Actions Menu

From the Layers section on the left pane of the content builder, right-click an object to open the actions menu. The following describes the available actions:

Action

Description

Copy

Copy the properties and components within the current screen to create a new screen.

Paste

Paste the contents of the clipboard.

Rename Layer

Rename the current layer.

Hide

Hide the current layer from view.

Lock

Make the contents and properties of the layer non-editable.

Bring Forward

Bring the selected layer forward if it is behind another layer.

Bring To Front

Bring the selected layer forward to the foreground of the screen.

Send Backward

Move the selected layer backward to position it behind another layer.

Send to Back

Move the selected layer backward and make it the bottommost layer.

Create Group

Create a group that contains multiple components and define the coordinates for the group.

Create Carousel

Add a collection of components that are displayed consecutively on an infinite loop at a specified duration. A carousel can include any combination of images, videos, and/or price components.

Create Group

To create a group of related DMB components on a screen layer:

  1. From the left pane of the content builder, locate the Layers field.

  2. From the Layers field, hold down the Ctrl key on the keyboard, and then select the components to include in the group.

  3. From the Layers field, right-click one of the selected components.

  4. From the actions menu, select Create Group.

  5. From the right pane, define the following:

    Field

    Description

    Name

    Type a name for the group.

    • Select the lock icon to make the component properties non-editable.

    • Toggle the eye icon to hide/show the component.

    X and Y

    Type the desired X and Y coordinates for the component.

    When the position of the component is manually adjusted on the screen, the X and Y field values are updated automatically.

    W and H

    Type the desired width and height of the component.

    When the width and height of the component is manually adjusted, the W and H field values are updated automatically.

    Description

    Type a description of the group.

  6. (Optional) From the upper-left of the content builder, select another component to add to the group.

Ungroup Components

To ungroup a collection of components:

  1. From the left pane of the content builder, locate the Layers field.

  2. From the Layers field, right-click the Group folder.

  3. From the popup menu, select Ungroup.

Create Carousel

A carousel is a collection of components that are displayed consecutively on an infinite loop at a specified duration. A carousel can include any combination of images, videos, and/or price components.

To create a carousel from a screen layer:

  1. From the left pane of the content builder, locate the Layers field.

  2. From the Layers field, hold down the Ctrl key on the keyboard, and then select the components to include in the carousel.

  3. From the Layers field, right-click one of the selected components.

  4. From the popup menu, select Create Carousel.

  5. From the pane on the right, define the following:

    Field

    Description

    Name

    Type a name for the carousel. The default name is "Carousel".

    • Select the lock icon to make the component properties non-editable.

    • Toggle the eye icon to hide/show the component.

    X and Y

    Type the desired X and Y coordinates for the component.

    When the position of the component is manually adjusted on the screen, the X and Y field values are updated automatically.

    W and H

    Type the desired width and height of the component.

    When the width and height of the component is manually adjusted, the W and H field values are updated automatically.

    Transition Effect

    From the dropdown, select the desired effect to use when transitioning from one component to another.

    Auto Dur(s)

    Type the number of seconds to display the item before transitioning to the next item.

  6. (Optional) From the upper-left of the content builder, select another component to add to the carousel.

Exit Screen

To save changes and exit the current screen:

  1. From the upper-left of the content builder, select the "hamburger" icon.

  2. From the dropdown, select Exit Screen.

Edit Screen

To edit the properties and components of an existing screen:

  1. From the Screens homepage, select the square to the left of the screen.

    • In the Search field in the upper-right, type the screen name to quickly locate the screen from the list.

  2. From the Actions dropdown, select Edit.

  3. From the content builder, edit the screen components as needed.

  4. From the upper-left of the content builder, select the "hamburger" icon.

  5. From the dropdown, select Exit Screen.

Duplicate Screen

Xenial Cloud Portal Digital Menu Board Screens

To copy the properties and components of the current screen to create a new screen:

  1. From the Screens homepage, select the screen to duplicate.

  2. From the upper-left of the content builder, select the "hamburger" icon.

  3. From the dropdown, select Duplicate.

    The content builder opens the duplicate screen in a separate browser window. "Copy" is appended to the name of the duplicate screen.

Delete Screen

Anmerkung

Any display layout assignments must be removed before a screen can be deleted. Screens are assigned to display layouts from the Content Schedule page of ???.

To delete an existing screen:

  1. From the Screens homepage, select the square to the left of the screen.

    • In the Search field in the upper-right, type the screen name to quickly locate the screen from the list.

  2. From the Actions dropdown, select Remove.

  3. From the confirmation prompt, select Yes.