Skip to main content

Screens

Xenial PortalDigital Menu BoardScreens

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.

    Note

    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.

    • To upload custom fonts, see Fonts.

    • To enable Google fonts, see Settings.

    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

Note

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.

    • To upload custom fonts, see Fonts.

    • To enable Google fonts, see Settings.

    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.

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.

Tip

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 PortalDigital Menu BoardScreens

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

Note

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.