Countdown Design Element Overview
Adding Countdown to SharePoint, Office 365 and SAP is easy and straightforward with ShortPoint. ShortPoint's Countdown Design Element is one of many available design elements and it allows you to easily create beautiful, animated countdown clocks to a future date. The Countdown clock can show days, hours, minutes and seconds remaining from the set date.
Starting from ShortPoint version 6.5.x.x for SharePoint Online (Office 365) and SharePoint 2019, and version 6.6.x.x for SharePoint on-premise 2013 and 2016, you will be able to enjoy more customization styles which are presented in this article.
Adding a Countdown to SharePoint, Office 365 and SAP Intranet Sites
The Countdown element can be easily added to your SharePoint and SAP pages using ShortPoint Page Builder:
Here is the Settings interface of the element:
The Countdown element supports custom dates, multiple languages, a wide variety of icons, multiple styles and dynamic data via connections. The Countdown element is also mobile-friendly and responsive.
You can select from 4 predefined styles for your countdown element, namely
There 3 option fields related to the date and all are required. The Countdown element requires a date to countdown to, so a future year, month and day of the month must be provided. If the date is past, the Countdown element will simply display 0, 0, 0 for hours, minutes, and seconds respectively, the remaining days will not be displayed.
ShortPoint provides a wide range of icons that can be added to the countdown to convey more meaning to your users. An icon is displayed in the Countdown by default, however, this behavior can be disabled with the Hide icon option.
Presently, the Countdown element supports 6 different languages, namely:
Hide and Show
The Hide and Show functionality allows you to hide parts of the displayed clock. For example, you could decide to hide the days part of the clock and display only the hours, minutes, and seconds. This is further illustrated in the screenshot below:
Styling and customization
The Countdown element can be further customized by changing the background color, icon color, text color, background transparency and text size.