Contents x
    Put a COUNTDOWN clock on your display
    • 27 Sep 2023
    • 2 Minutes to read
    • Print
    • Dark
      Light
    • PDF
    Contents

    Put a COUNTDOWN clock on your display

    • Updated on 27 Sep 2023
    • 2 Minutes to read
    • Print
    • Dark
      Light
    • PDF
    Article summary

    The following tutorial will show how to add and configure the countdown widget that shows the time remaining before an event.


    Topics covered:
    Templates tab - Designer - dynamic text-driven by display asset values, date & time

    Sample screen:

    TUTORIAL STEPS:

    A) Create a new template on the Templates tab - see how to do this in the Create basic STATIC content tutorial.
    B) Add Countdown widget to your canvas.

    1. Click on the Widgets icon in the top menu bar and choose Countdown.
    2. Place the element on the canvas.

    C) By default, the countdown element is configured to run in Static mode, where date & time are manually defined by  users. The Dynamic mode uses dynamically changing reference to a specific data source. In this guide we will use the Static mode.

    1. Set the date & time to count down from. 
    2. Select the time format to fit your requirements.
    Note: Uppercase , lowercase letter



    D) Select the Countdown end action.

    Countdown end action defines what happens with the countdown after it reaches zero. If the Countdown overrideis enabled the behavior of the Countdown end action will differ: 
    • Hide element - when the countdown element reaches zero it becomes invisible whether or not the Countdown override is enabled and the override value is set.
    • Show zero/override value -  when the countdown reaches zero it keeps showing the zero. If the Countdown override is enabled and the override value is set, the countdown will continue to show an override value after it is triggered.
    • Continue to negative values/override value - the countdown element continues to negative values after it reaches zero. If the Countdown override is enabled and the override value is set, the countdown will continue to show an override value after it is triggered. 


    E) Countdown override
    The displayed countdown timer may be overridden by a defined value for a set amount of time before the countdown reaches zero:

    1. Tick the Countdown override checkbox to enable its functionality.
    2. Set how many seconds before the countdown reaches zero should the override value appear. 
    3. Click the Data source editor button to define the override value. 



    F) Data Source Editor allows you to compose text from custom fields using the list on the right side of the editor. You can also include any static text.

    1. Enter the override value as static text in the text editor.
    2. Click the OK button to confirm the settings.

    Note: if you want to use a custom field value instead then you need to drag & drop an element from the custom field list on the right-hand side into the text editor. This will result in ability to change the override value dynamically based on the custom field value assigned for each individual display.
    G) Style your Countdown element using the right-hand sidebar.

    • Position of the element is defined by the X and Y axes which can be set up with the counter or manually entered value, changed by drag&drop on the template or by moving the selected element with the arrow key.
    • Size of the element in the template. Ratio can be kept by ticking the checkbox.
    • Font style section allows configuration of the size, color and font of the text.
    • Alignment section allows configuration of text alignment in the text box.
    Optional: Click the "Grid" button to enable the grid in the designer to help you with precision.

    H) Click on the Save & Publish button in the lower right-hand corner when your content is final. Now it is ready to be assigned and shown on your display.

    I) Further design ideas to enhance the content of your Countdown template:

    • Add static text information, 
    • Change the background color,
    • Add a logo or other media from the Media library, 
    • Add shape elements.


    Was this article helpful?
    What's Next