How to use the Countdown/up widget in Connect
Use the Countdown/up to display years, months, days, hours, minutes and seconds as a countdown or count up timer to a specific date and time. Date/Time widgets can be used to dynamically present a specific date or time.
Click on the Widget option in the left menu in app builder.
Click on Countdown/Up to add the widget to the canvas.
Click and drag on the widget wireframe handles to manually manipulate the position, rotation and size of the widget wireframe on the canvas. The text and spacing in the widget must be resized from the properties panel on the right.
Select the Countdown/Up widget on your App canvas. The widget properties will appear on the right side of the window.
Change the date and time by clicking on Date & Time in the widget properties. The widget will automatically count down or count up based on the time you choose. If you click allow past dates the widget will begin counting up after counting down.
You can also pause the count down so it’s easier to make changes to the properties. The countdown when unpaused will reflect the accurate countdown/up for the Date & Time chosen.
Change the date by clicking either on the text that lists the target date or the calendar icon to the right of the date. You can edit the text for the date, or choose from a visual calendar menu.
Change the time by clicking either on the text that lists the target time or the clock icon to the right of the time. You can edit the text for the time, or choose from a dropdown menu.
Alternatively connect the countdown to a single data value by clicking the lightning bolt icon next to the Date & Time text.
From this menu choose an existing connection or create a new connection. Follow this link to learn more about creating a connection to a single data value
On the right hand properties panel choose to display different metrics by clicking on the toggle buttons to the right of the corresponding metric.
Change the position, size, and rotation of the widget’s wireframe from the Widget Settings menu. Changes to the position, size and rotation do not affect the text in the widget.
Show or hide the divider between metrics in widget settings by clicking on the Show Divider toggle button.
The Countdown/Up widget has two elements that have text. The first is Time, changes to this text will change only the values for each metric, not labels. Changing this text font, size, style and color can be done from the widget settings menu, under the Time subheader.
Enter a value or click on the arrows that appear next to Group spacing to change the space between each metric.
Choose to show or hide the divider marks between metrics, by clicking on the toggle button next to Show Divider.
The second text element is Labels, changes to this text will change only the labels for each metric. If the fonts or colors are syncing you should see the changes you make on both the time and labels elements
Click on the Widget option in the left menu in app builder.
Click on Date/Time to add the widget to the canvas.
Click and drag on the widget wireframe handles to manually manipulate the position, rotation and size of the widget wireframe on the canvas. The text and spacing in the widget must be resized from the properties panel on the right.
Select the Date/Time widget on your App canvas. The widget properties will appear on the right side of the window.
Change the date and time by clicking on Date/Time in the widget properties. You can either enter in the data and time in the text field or choose from the calendar date/time picker that appears.
Alternatively connect the Date/Time widget to a single data value by clicking the lightning bolt icon next to the Date/Time text.
From this menu choose an existing connection or create a new connection. Follow this link to learn more about creating a connection to a single data value.
If you prefer to show the current date and time rather than choosing a date and time click on the toggle next to Use current time.
Make changes to the appearance of the Date/Time text by choosing a font, size, style and color.
Properties such as line height and alignment can also be modified, this may be desired dependent on the format selected.
Click on the Format dropdown menu to change the format to show the full date and time, just the date or just the time.
The format is determined in part by whether or not you choose to use the player locale. If you want alternate formats toggle off Use player locale.
A Locale dropdown menu will appear allowing you to choose the correct locale.
Click on the Widget option in the left menu in app builder. Click on Analog Clock to add the widget to the canvas. Adjust the Analog widget settings
Click and drag on the widget wireframe handles to manually manipulate the position, rotation and size of the widget wireframe on the canvas. The text and spacing in the widget must be resized from the properties panel on the right.
Select the Analog Clock widget on your App canvas. The widget properties will appear on the right side of the window.
Change the time zone by clicking the toggle button to the right of Use player Timezone.
Click on the drop down menu below Use player timezone. Then scroll or search to select the desired time zone.
Make changes to the appearance of the Analog Clock by choosing a font, size, style and color.
Click on the Number Inset slider to adjust the spacing of the numbers inside the clock face.
Change the color of the clock face, seconds hand or detail color by clicking on the corresponding swatches.
Check out what other Widgets in Connect can do.
Not sure how to start? Get inspired Using pre-built Templates
Learn more about Connecting your Data
Support available between 9:00am and 5:00pm (CST-06:00), Monday through Friday
