Color Palette

17 May 2024
3 Minutes to read

Color Palette

Updated on 17 May 2024
3 Minutes to read

Article summary

Did you find this summary helpful?

Thank you for your feedback

The Color Palette control in the form designer offers users the ability to assign specific colors to values within forms, enhancing visual clarity and providing valuable context to users. This dynamic tool allows for the customization of color-coded indicators, such as priority levels, status updates, or categorical distinctions, enabling users to quickly interpret and act upon information within forms. This enables us to set our desired colors to values.

Figure: Color Palette as seen by the Application Designer

Figure: Color Palette as seen by the Administrator

Figure: Color Palette as seen by the Analyst

Application Designer can use this control in Admin forms for SLA Configurations. The Color Palette control is used by the Application Designer while designing the form. When there is a need for the end user to be informed on high-priority tickets and SLA breaches, Color Palette control is used to convey the message.

Let's explore the following use-case.

Use Case

User Persona: Application Designer

Solution

At NovaTech, investors must quickly be able to differentiate between various types of investments within their portfolio efficiently. Without clear visual cues, such as color-coded indicators, investors may find it challenging to quickly identify and differentiate investment types. This may lead to confusion and potential oversight of strategies.

To resolve this, integrates a Color Palette field into the "Type of Investment" classification in the Investment Tracking form. Investors can thus visually distinguish between different investment types. For example, stocks could be represented by blue color, bonds by green color, mutual funds by yellow color and real estate by orange color. This color-coded feature allows investors to quickly identify the composition of their investment portfolio and ensure proper diversification across asset class.

Configure Color Palette

Navigate to Design Form tab and click Widgets.
Drag and Drop Color Palette onto the Form designer canvas.

Figure: Color Palette Widget

3. Click the Settings icon for this field to view the Properties pop-up.
The following tabs are present on the Properties pop-up:

Define Properties

This section contains the list of properties using which the user can define the control's name, tooltip, and many more.

The properties tab has two sub-sections:

General
Informative
Figure: Configure Properties

The following Field description consists of all fields from General section.

Field	Description
Title	Specify a unique name for the Color Palette control. This name identifies the control in the form designer. For Example, Assign Color, Add Visual Aid, Pick Color, etc.
Sub Title	Specify the text which you want to display just beneath the Title. You may use it to describe the purpose of the control or the way it should be used.
Render As	Select the drop-down to determine the behavior of the control. You can render the Color Palette as Font or Background. Background Color - The Background Color property sets the color behind the content for the selected field value. Font Color - The Font Color property applies the color of the text displayed fo rthe selected field value.

Field

Description

Title

Specify a unique name for the Color Palette control. This name identifies the control in the form designer. For Example, Assign Color, Add Visual Aid, Pick Color, etc.

Sub Title

Specify the text which you want to display just beneath the Title. You may use it to describe the purpose of the control or the way it should be used.

Render As

Select the drop-down to determine the behavior of the control. You can render the Color Palette as Font or Background.

Background Color - The Background Color property sets the color behind the content for the selected field value.

Font Color - The Font Color property applies the color of the text displayed fo rthe selected field value.

The following table describes all the fields present in the Informative section. (Follow long text)

Field	Description
Help Text	Provide a help text that gives the end users guidance on how to fill out the field correctly. For example, "Enter your name here", and "Enter a summary".
Water Mark	Type in the Watermark text that should appear in the text box field providing a hint or example of the expected input.
Tooltip	Add a tooltip, that is displayed when the user hovers the mouse cursor over the Color Palette field.

Set Appearance

This section contains the list of fields and their descriptions that are available under the Appearance section.

To configure the Appearance tab, define Label Layout, Upload Icon, and Icon Position.

Figure: Configure Appearance

Field	Description
General
Label Layout	Select the required label layout position for the Calendar control. The available options are: Vertical - If selected, the label layout is displayed on top of the field. Horizontal - If selected, the label layout is displayed in front of the field. Float - The floating labels move inside the textbox as you enter the required information.
Upload Icon	Add an icon for slider control.
Icon Position	Change the set positions of icon as: Left aligned Right aligned
Text
Font Type	Select the desired font from the drop-down menu to customize the Color Palette widget.
Font Color	Select a font color from the Color Palette to enhance the visibility and aesthetics of the Color Palette widget.
Font Size	Select the desired font size to your preference for better readability and presentation for the Color Palette.

Was this article helpful?

What's Next

Approval Timeline

Table of contents