Widgets
- 26 Mar 2024
- 7 Minutes to read
- Print
- PDF
Widgets
- Updated on 26 Mar 2024
- 7 Minutes to read
- Print
- PDF
Article summary
Did you find this summary helpful?
Thank you for your feedback
Super Admin can select Background Settings and Common Widgets from the list and customize the Login Screen.
Configure Background Settings
To configure the Background Settings and Common Widgets, perform the following steps:
- Navigate to Authentication > Customize Login Screen > Widgets.
Figure: Configuration and Common Widgets - Click Background Settings to configure the properties of the Login Screen background.
See the section below to learn more about Background Settings.
Background Settings
To perform the base settings for the Login Screen, refer to the Field Description.
Field Description
| Name | Description |
|---|---|
| Background Color | Select the background color from the tile. Figure: Color |
Background Transparency | Select the amount of transparency for the color. Figure: Transparency |
| Background Image | Upload the image for the login screen background. Figure: Image |
Common Widgets
The list of Widgets includes Logo, Tagline, Cool Clock, Content, and Authentication Type Cards.
Customize Cool Clock widget
To customize the Cool Clock widget, perform the following steps:
- Add a Cool Clock to the Login Screen by dragging the from the Widget list to Layout container.
Figure: Cool Clock - Modify the Clock properties by clicking on the Settings icon. See the Field Description below to learn more about the fields available under the Properties section.
Field DescriptionProperties Title Give a title to the Clock using the Title text box. 
Figure: Cool Clock titleTime Zone Define the Time Zone for which the time should be displayed in the clock by selecting the time zone from the drop-down list. 
Figure: Time ZoneThe 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 as active. - Modify the font and position as per your requirements.
Figure: Appearance
Refer to Field Description for more details.
Field DescriptionName Description General Font Type
Select the appropriate font formatting for the widget via the Font Type dropdown. 
Figure: Font TypeFont Color Define an appropriate font color for the widget by selecting the font color from the color palette. 
Figure: Font ColorFont Size Select the appropriate font size for the widget with the Font Size drop-down. 
Figure: Font SizeFont Style Select the appropriate font style for the widget of the Service Portal with the Font Style tabs drop-down. 
Figure: Font StyleFont Alignment Click the preferred alignment with Font Alignment tab. Only alignment can be selected at a time. 
Figure: Font AlignmentBorder Border Style the border by the selecting desired Border type. 
Figure: BorderSide You can select the sides for which the border has to be applied from the side dropdown. 
Figure: SideWidth Select the thickness of the divider by selecting the appropriate option from the Width dropdown. 
Figure: WidthColor You can give the desired color for the border. You can click the default color cube to load the color palette and select the desired RGB from the color tile. 
Figure: Color 
Figure: Color paletteRadius Select the border Radius by selecting the desired radius from the Radius Slider. 
Figure: Radius
If Radius is zero, then the corners will be sharp, if the radius is increased then the corners will become rounded.Background Select the type of background from the tab. 
Figure: Background Type - Click Save to save the properties. The Cool Clock can be seen in the Login Screen canvas as shown below:
Figure: Cool Clock
Figure: Cool Clock
Figure: Cool Clock title
Figure: Time Zone
Figure: Appearance
Figure: Font Type
Figure: Font Color
Figure: Font Size
Figure: Font Style
Figure: Font Alignment
Figure: Border
Figure: Side
Figure: Width
Figure: Color 
Figure: Color palette
Figure: Radius
Figure: Background Type
Figure: Cool ClockCustomize Content widget
To customize the Content widget, perform the following steps:
- Add a Content widget to Login Screen by dragging them from the Widget list to Canvas.
Figure: Content widget - Modify the Content by clicking on the Settings icon on the widget. Type the content in the textbox in the Properties popup screen.
Figure: Properties tab - Format the content using the properties in the Appearance section.
Figure: Appearance tab - Click Save to save the properties. The Content widget gets displayed in the Login Screen canvas as shown below:
Figure: Content
Figure: Content widget
Figure: Properties tab
Figure: Appearance tab
Figure: ContentCustomize Logo widget
To customize the Logo widget, perform the following steps:
- Customize the Login Screen by dragging the Logo widget from Widgets to Canvas.
Figure: Logo Widget - Modify the Logo by clicking on the edit icon on the Logo widget. Upload a Logo image in Logo Properties popup screen.
Figure: Logo properties - You can modify the Padding and Border from the Appearance tab.
Figure: Appearance Tab
Refer to the Field Description under Appearance tab for more details.
Field DescriptionAppearance Padding You can add auto padding to the Top, Right, Bottom and Left by enabling the Padding switch in the Properties popup. The screen appears as: 
Figure: Enable auto padding
If you disable the Padding switch, you can adjust the Top, Right, Bottom and Left padding of the container as per need!
Figure: Disable auto paddingBorder Select the Border, Side, Width, Color and Radius. Refer to the snapshot for more details.
Figure: Border - Click Save to upload the image on the canvas. The uploaded logo can be seen in the Login Screen canvas designer as shown below:
Figure: Logo
Figure: Logo Widget
Figure: Logo properties
Figure: Appearance Tab 
Figure: Enable auto padding
Figure: Border
Figure: LogoTagline Widget
To customize the Tagline widget, perform the following steps:
- Add a Tagline to Login Screen by dragging the from the Widget list to canvas.
Figure: Tagline widget - Modify the Tagline by clicking on the edit icon on the widget. Type the Tagline in the textbox under the Tagline properties popup-screen.
Figure: Tagline - You can modify the font style, color and alignment from the Appearance tab.
Figure: Appearance tab - Click Save to save the properties. The Tagline can be seen in the Login Screen canvas as shown below:
Figure: Tagline
Figure: Tagline widget
Figure: Tagline
Figure: Appearance tab
Figure: TaglineConfigure Authentication card types
There are four types of Authentication cards available under widgets. Depending upon the selection, the following Authentication card appears as shown below:
Form Login
The type of Form Login depends on the configured login types. If two-factor authentication is configured, the Form Login will have two tabs each representing the properties of the selected login type.
To customize the Form Login, perform the following steps:
- Drag and drop the Form Login widget from the widget list to the Login Screen canvas.
Figure: Form Login - Modify the Form properties by clicking on the edit icon on the Form Login widget.
If Password is selected as Login Type in Form Login, then Properties tab appears as shown below.
Figure: Password as login type
Properties
You can modify the Properties of Label Text, Watermark, and Label Position for User Name, Password, Login, and Forgot Password and enable or disable Captcha. For more details, refer Field Description.
Field Description
MessageField Description Specify the Label Text, Water Mark and position for the following fields. User Name 
Figure: User NamePassword 
Figure: PasswordConfirm/Login Specify the Label text and Position. 
Figure: Label text for LoginForgot Password 
Figure: Label text for Forgot PasswordRegister Email 
Figure: Label text for Register EmailCaptcha 
Figure: Enable CaptchaRegister User 
Figure: Register User
Under Message section, you can list the Account locked, Account Inactive and Failed Message. You can select the Font Type, Font Color, Font Size and Font Style.
Refer to the screenshot below for details.
Figure: Message section
If Email OTP is selected as Login Type in Form Login, it will appear as a tab in Form Login Properties. Specify the Label Text, Water Mark and position for the following fields.
Figure: Email OTP
Under Message section, you can list the Success Message, Validation Message, Expiry Message, Failed Message and Account Inactive. You can select the Font Type, Font Color, Font Size and Font Style.
Figure: Message section
If SMS OTP is selected as Login Type in Form Login, it appears as a tab in FormLoginProperties. Specify the Label Text, Water Mark and position for the following fields.
Figure: Properties
Under Message section, you can list the Success Message, Validation Message, Expiry Message, Failed Message and Account Inactive. You can select the Font Type, Font Color, Font Size and Font Style.
Figure: Message for SMS OTP
If Voice OTP is selected as Login Type in Form Login, it appears as a tab in FormLoginProperties. Specify the Label Text, Water Mark and position for the following fields.
Figure: VOICE OTP Properties
Under Message section, you can list the Success Message, Validation Message, Expiry Message, Failed Message and Account Inactive. You can select the Font Type, Font Color, Font Size and Font Style.
If Authenticator App is selected as Login Type in Form Login, it appears as a tab in FormLoginProperties. Specify the Label Text, Water Mark and position for the Enter Code and Confirm / Login fields.
Figure: Authenticator App
Under Message section, you can list the Success Message, Validation Message, Failed Message, Account Locked and Account Inactive. You can select the Font Type, Font Color, Font Size and Font Style.
Figure: Message section
Appearance
Under the Appearance section, you can define the formatting properties for each Email-based OTP field. Refer to the field description table for more details.
Figure: Appearance screen - Configure the Appearance section as shown in the table below.
TableField Description Input Fields Select the Font Type, Font Color, Font Size, Font Style, Background Color, Border Color, Hover Border, Selection Border, and Border Radius for the Input Fields from the field values. 
Figure: Input FieldsButton Select the Font Type, Font Color, Font Size, Font Style, Background Color and Border Color for the Button.
Figure: ButtonText Button Select the Font Type, Font Color, Font Size, Font Style, Background Color and Border Color for the Text Button. 
Figure: Text ButtonWidget Background Select the Widget Background for the field. 
Figure: Widget BackgroundWidget Border Select the Widget Border for the label. 
Figure: Widget Border
Figure: Form Login
Figure: Password as login type
Figure: Password
Figure: Label text for Login
Figure: 
Figure: Enable Captcha
Figure: Register User
Figure: Email OTP 
Figure: Message section 
Figure: Properties 
Figure: Message for SMS OTP 
Figure: VOICE OTP Properties 
Figure: Authenticator App 
Figure: Message section 
Figure: Appearance screen
Figure: Button
Figure: Text Button
Figure: Widget BorderConfigure OAuth Login
All the OAuth logins configured will be seen under the widget section with Logo and name as defined in the configuration.
This section discusses the appearance configuration of the OAuth authentication card on the login screen.
To configure the Properties of OAuth configuration, perform the following steps:
- Navigate to Authentication >Customize Login screen > Widgets > OAuth.
Figure:OAuth - Navigate to Properties section and specify the Title for Authentication control.
Figure: Properties - Navigate to Appearance section and modify the properties of the fields. Refer to the field description for more details.
Figure: Appearance
See the field description table for more details.
TableField Description General Select the Font Type, Font Color, Font Size, Font Style from the field values for the Authentication control. 
Figure: GeneralBackground Select the Background type for the Authentication control. 
Figure: BackgroundBorder Select the Border, Size, Width, Color and Radius for the Authentication control. 
Figure: Widget Border - Click Save to save the configurations.
- Click Preview to view the configured Login Screen.
Figure: Login screen preview
Figure:OAuth
Figure: Properties
Figure: Appearance
Figure: Widget Border
Figure: Login screen previewThough customizing the login screens for SAML, OpenID Connect, and OAuth authentication controls share similarities, it's important to note that each protocol has its own set of specifications and requirements.
Was this article helpful?