- 07 Mar 2025
- 3 Minutes to read
- Print
- PDF
Cool Clock
- Updated on 07 Mar 2025
- 3 Minutes to read
- Print
- PDF
Use Cool clock widget to display the current time and the location of your company headquarters on the portal screen.
Use Case User persona: Administrator | Solution |
Adam based in Bangalore, needs to accommodate the time zone difference with the client, who operates from Saudi Arabia. To effectively manage this, he requires a cool clock widget displaying both Saudi Arabia and India's time zones simultaneously. | John can select Cool Clock from the widget list and display a world clock by configuring the generic features using Properties option. Through this configuration, each clock corresponds to the correct time zone, enabling efficient management of time differences across different locations. |
Configure Cool Clock widget
This section contains the list of steps using which Application Designer can select the Cool Clock widget from the Service Portal design screen.
To configure the Cool Clock widget, perform the following steps:
- Navigate to Design Portal > Widgets > Cool Clock. Customize the Service Portal by dragging the Cool Clock widget from the widget list screen.
Figure: Adding Widgets
- Click the Settings icon to view the Properties pop-up.
Figure: Modify the clock properties
You can view the following tabs on the Settings for this field:
Properties
This section contains the list of properties using which the Application Designer can configure the respective widget feature. To know more about the fields that are available under the Properties section, see Field Description given below.
Field Description
Properties | |
---|---|
Title | Give a title to the Clock using the Title text box. Here the clock is titled as Summit. This title appears as heading along with the clock as shown below. Refer to the screenshot below.![]() |
Time Zone | Define the Time Zone for which the time should be displayed in the clock by selecting the time zone from drop-down list. Here UTC+05:30 is selected as Time Zone.![]() The logged-in user's time zone is used by default as the time zone value for the field. |
Enable the Show Title to make it active.
Appearance
This section contains the list of features using which the Application Designercan select Border, Background and color.
Figure: Appearance tab
The table below contains the list of fields and their descriptions that are available under the Appearance section:
Field Description
Text | |
---|---|
Text Type | Select the appropriate text type format for the Cool Clock title from the drop-down list. The Text type can be changed for the widget if required.![]() Figure: Text Type |
Text Color | Select the appropriate font color for the widget by selecting the color from the color palette.![]() |
Text Size | Select the appropriate font size by dragging the slider. Here text size is selected as 12.![]() |
Text Style | Select the appropriate font style from the drop-down list. Text Style allows for the selection of one or more styles (bold, italics, and/or underlined) simultaneously. ![]() |
Text Alignment | Select the suitable Text Alignment from the drop-down list for the widget. Only one alignment can be selected at any given time.![]() |
Background | |
---|---|
Transparent | Select Transparent to add transparency to the Background. The screen appears as shown below: ![]() Use a slider to define the percentage of transparency. For example, here Transparency is kept at 70 %. |
Solid | If you select Solid, then you can select the color of the Background. The screen appears as shown below: ![]() |
Image | Select Image to upload the image to Background. Upload the image by browsing from the device. The screen appears as shown below: ![]() You can preview or delete the image as shown below. ![]() Click the preview icon to view the uploaded image. ![]() Click the delete icon to remove the uploaded image. A pop-up screen appears as shown: ![]() You can click Yes to delete the attachment or No to proceed to the next step. |
Padding | |
---|---|
Padding | Add auto padding to the Top, Right, Bottom and Left by enabling the Padding switch in the Properties popup. The screen appears as shown below:![]() If you disable the Padding switch, you can adjust the Top, Right, Bottom and Left padding of the container as needed! ![]() |
Border | |
---|---|
Border | Style the border by the selecting desired Border Type.![]() |
Click Save to save the widget properties in the Service Portal designer screen.
Cancel Configurations

Click Yes to discard the entered values and go back to the Service Portal Designer Screen.
Switch No to proceed with Service Portal configuration or click X to close the confirmation pop-up window.
Navigate to the Service portal screen and check the configured Cool Clock widget. Figure: Cool Clock