Select and design the Cool Clock Widget
- 17 Oct 2024
- 3 Minutes to read
- Print
- PDF
Select and design the Cool Clock Widget
- Updated on 17 Oct 2024
- 3 Minutes to read
- Print
- PDF
Article summary
Did you find this summary helpful?
Thank you for your feedback
Apex provides different types of no code widget and pro code widget types for Users. You can get an broader view of all widgets by navigating back and forth through the application.
So, edit the widgets and personalize your Service Portal screen!
User persona: Application Designer
Let's explore the following Use Case for designing the Cool Clock Widgets!
Use Case | Solution |
| John, an application designer, wants to add a sleek site Tagline widget to the company portal screen. | John can select Tagline and configure the generic features of widgets using Properties option. |
Configuring the Cool Widgets
This section contains the list of steps using which Administrator can select the Cool Clock widget in the Service Portal through the Design Portal screen.
- Navigate to Home > Service Portal > Add Service Portal > Widgets > Cool Clock.
Figure: Adding Widgets - Customize the Service Portal by dragging the Cool Clock Widget from Widget List to Service Portal.
Figure: Cool Clock - Modify the Clock properties by clicking the Edit icon on the Cool Clock Widget.
Figure: Modify the clock properties
The Properties pop-up window appears as shown:
Figure: Properties - You can give a title to the Clock using the Title Textbox and define the time zone for which the time should be displayed in the clock by selecting the time zone from drop-down list.
Figure: Title Textbox
Here Cool Clock is titled as Summit HQ, with a Time Zone selected as UTC+05.30.The logged-in user's time zone is used by default as the time zone value for the field. - Here you can define the time zone which should be displayed in the clock by selecting from the drop-down list.
Figure: Time Zone - Enable the Show Title to make it as active.
- Navigate to Appearance section and edit the properties of the widget.
Figure: Appearance tab
The table below contains the list of fields and their descriptions that are available under the Appearance section:
Field DescriptionText Text Type Select the appropriate text type format to the Cool clock title. 
Figure: Text TypeText Color Select the appropriate text color from the color palette. 
Figure: Text ColorText Size Select the appropriate font size from the drop-down list. 
Figure: Text SizeText Style Select the appropriate font style from the drop-down list. 
Figure: Text StyleText Alignment Select the suitable Text Alignment from the list. You can align your text 
Figure: Text AlignmentBackground Transparent If you select Transparent, then you can add transparency to the Background.
The screen appears as shown below:
Figure: Transparency
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 to the Background.
The screen appears as shown below:
Figure: Solid BackgroundImage If you select Image, then you can upload the image to Background. Upload the image by browsing from the device.
The screen appears as shown below:
Figure: Image upload
You can preview or delete the image as
Figure: Editing the image
Click the preview icon to view the uploaded image.
Figure: File Preview
Click the delete icon to remove the upload image. A pop-up screen appears as shown:
Figure: Pop-up message
You can click Yes to delete the attachment or No to proceed to next step.Padding Padding You can add auto padding to Top, Right, Bottom and Left by enabling the Padding switch in Properties popup. The screen appears as: 
Figure: Enable auto padding
If you disable Padding switch, you can adjust the Top, Right, Bottom and Left padding of the container as per needed!
Figure: Disable auto paddingBorder Border You can style the border the selecting desired Border Type. 
Figure: Border style
Style the border the selecting desired Border type.Side You can select the sides for which the border has to be applied from the side dropdown. 
Figure: Side dropdownWidth Select the thickness of the divider by selecting appropriate option from the Width dropdown. 
Figure: Width dropdownColor You can give desired color for the border. You can click the default color cube to load color palette and select the desired color tile. 
Figure: ColorRadius Select the border Radius by selecting desired radius from the Radius Slider. 
Figure: Radius slider
If Radius is zero, then corners will be sharp, if radius is increased then the corners will become rounded.Save Click Save to save the widget properties in Service Portal designer screen. 
Figure: Save screen - Navigate to Service portal screen and check the configured Cool Clock widget.
Figure: Cool Clock
Figure: Adding Widgets
Figure: Cool Clock
Figure: Modify the clock properties
Figure: Properties
Figure: Title Textbox
Figure: Time Zone
Figure: Appearance tab
Figure: Text Type
Figure: Text Color
Figure: Text Size
Figure: Text Style
Figure: Text Alignment
Figure: Transparency
Figure: Solid Background
Figure: Image upload
Figure: File Preview
Figure: Pop-up message
Figure: Enable auto padding
Figure: Border style
Figure: Side dropdown
Figure: Width dropdown
Figure: Color
Figure: Radius slider
Figure: Save screen
Figure: Cool ClockSo, let us configure the generic features of out of the box Tagline widget from the Service Portal design screen!
Was this article helpful?