Set up [Timer] components

Use Timer components to set up a counter to or from a specific date. For example, this is useful for specfifying deadlines or helping users to prioritize records to process.

Set up a [Timer] component that counts to a date 

Fig. 1 Set up a Timer component that counts to a date

1. Add and set up a “Date and time to provide a corporate vehicle” field. To do this, follow the steps in a separate article: Set up a date/time field.
2. Drag a Timer component to the canvas and open the component setup area
3. Select “Countdown to specific date” in the Type parameter.
4. Click the icon next to the Start date time column parameter → Requests → Requests fields tab → Date and time to provide a corporate vehicle checkbox → Select.

5. Enter the timer caption before the countdown reaches the end date in the Text for positive values parameter. Use the “[#timer#]” macro to add the timer value. If you leave the parameter empty, the timer uses the “[#timer#] left” caption.

   For this example, enter “Vehicle required in [#timer#].” You can click the button to the right to localize the text to other languages you are going to use in the app. Learn more about localizing Freedom UI elements in a separate article: Localize a Freedom UI element.

6. Enter the timer caption after the countdown reaches the end date in the Text for negative values parameter. Use the “[#timer#]” macro to add the timer value. If you leave the parameter empty, the timer uses the “[#timer#] overdue” caption.

   For this example, enter “Vehicle required immediately. [#timer#] overdue.” You can localize the text similarly to the positive caption.

7. Specify whether to display the overdue time in the Show negative countdown value checkbox. If you clear the checkbox, the timer displays “Time is up” caption once the end date is reached. For this example, leave the checkbox selected.
8. Select the timer style to display on the app page in the Style parameter. For this example, select “Headline 3.”
9. Select the font format in the Format parameter. For this example, select “Normal.”
10. Select the text alignment option in the Align parameter. For this example, select center.
11. Select the color of the positive caption in the Text color parameter. For this example, leave it green.
12. Select the color of the positive caption in the Text color parameter. For this example, leave it green.
13. Select the timer background color in the Background color parameter. For this example, leave the color transparent.
14. Click the or button in the Visibility group to make the component visible or invisible by default on the page, respectively. For this example, leave the component visible.
15. Click Setup conditions in the Visibility group to set up element business rules. For this example, do not add business rules. Learn more about setting up business rules in a separate article: Set up business rules.
16. View the unique timer code in the page schema in the Element code parameter. The parameter is populated automatically and non-editable.

As a result, Creatio will add the timer that displays the time before the requester requires a corporate vehicle to the request page.

Set up a [Timer] component that counts from a date 

Fig. 2 Set up a Timer component that counts from a date

1. Drag a Timer component to the page and open its setup area.
2. Select “Timer from date” in the Type parameter.
3. Click the icon next to the Start date time column parameter → Requests → Requests fields tab → Created on checkbox → Select.

4. Enter the timer caption after the count starts in the Text for positive values parameter. Use the “[#timer#]” macro to add the timer value. If you leave the parameter empty, the timer uses the “[#timer#] passed” caption.

   For this example, enter “Request is [#timer#] old.” You can click the button to the right to localize the text to other languages you are going to use in the app. Learn more about localizing Freedom UI elements in a separate article: Localize a Freedom UI element.

5. Enter the timer caption before the count starts in the Text for negative values parameter. Use the “[#timer#]” macro to add the timer value. If you leave the parameter empty, the timer uses the “[#timer#] before countdown begins” caption.

   For this example, enter “Request is older than its creation date. Contact system administrator.” You can localize the text similarly to the positive caption.

6. Select the timer style to display on the app page in the Style parameter. For this example, select “Headline 3.”
7. Select the font format in the Format parameter. For this example, select “Normal.”
8. Select the text alignment option in the Align parameter. For this example, select center.
9. Select the color of the positive caption in the Text color parameter. For this example, leave it green.
10. Select the color of the positive caption in the Text color parameter. For this example, leave it green.
11. Select the label background color in the Background color parameter. For this example, leave the color transparent.
12. Click the or button in the Visibility group to make the component visible or invisible by default on the page, respectively. For this example, leave the component visible.
13. Click Setup conditions in the Visibility group to set up element business rules. For this example, do not add business rules. Learn more about setting up business rules in a separate article: Set up business rules.
14. View the unique timer code in the page schema in the Element code parameter. The parameter is populated automatically and non-editable.

As a result, Creatio will add the timer that displays the record age to the page of the request.