Skip to main content

ColorPicker How To's

How to's for the ColorPicker guide.

How to Use ColorPicker?​

How to Use ColorPicker?​

The following steps explain how to add the ColorPicker control to a form and use it.

Add the ColorPicker Control to the Form​

  1. Open the form design screen.
  2. Go to the Toolbox panel.
  3. Locate the ColorPicker control.
  4. Drag and drop the control onto the form.

Configure General Properties​

When the control is selected, the following tabs appear in the Property Viewer panel:

General Tab​

  • Name: The unique system name of the control
  • Text: The label displayed to the user
  • Visible: Controls whether the control is visible
  • Readonly: Determines whether color selection is disabled

Allow the User to Select a Color​

When the form is running:

  • The user clicks on the color field
  • The color palette opens
  • The user selects a desired color
  • The selected color is stored as form data

Using the Selected Color​

The color value selected from the ColorPicker can be used in:

  • Rules (Rule Manager)
  • Styling of other controls
  • Backend processes

Example Usage Scenario​

Scenario:
In a task form, the user is asked to select a color to indicate priority.

  • Red → High Priority
  • Yellow → Medium Priority
  • Green → Low Priority

The user selects a color using the ColorPicker, and rules define behavior based on this value.

Notes​

  • The ColorPicker does not apply styles by itself; it only produces a color value.
  • For visual effects, CSS or rule-based usage is recommended.

What Is ColorPicker?​

What Is ColorPicker?​

ColorPicker is an input component used to collect color information from users within a form.
With this component, users can select a color from a color palette or define a color by entering a color code (such as HEX or RGB).

This component is commonly used in scenarios such as:

  • Theme selection
  • Status-based coloring
  • Priority / level indication
  • Visual customization

The ColorPicker component stores the selected color as form data, and this value can be used in other components, rules, or styles.

Key Features​

  • User-friendly color selection interface
  • Stores the selected color as form data
  • Supports HEX / RGB color formats
  • Can be used together with rules and events

Where Is It Used?​

  • Priority color selection (red, yellow, green)
  • Label / category coloring
  • Dashboard or list visualizations
  • User-specific theme settings

Notes​

  • ColorPicker stores only the color value; additional rules may be required to apply visual styling.
  • The stored value is typically in HEX format.

How to Use Client Enabled?​

What is Client Enabled?​

Client Enabled is a property that defines whether a form control is active (enabled) on the client side when the form is first loaded.
If it is set to True, the control is immediately usable by the user.
If it is set to False, the control is disabled and cannot be interacted with until a specific condition or rule activates it.

This property is especially useful for controlling the user’s interaction flow and applying dynamic behaviors using the Rule Manager.

What Does It Do?​

The property allows developers to:

  • Control when a form control becomes interactive.
  • Prevent users from entering or changing data until prerequisites are met.
  • Dynamically enable or disable controls based on user input or logic.

Example Scenario — Conditional Activation​

Scenario:
A form contains a checkbox called “I Accept Terms” and a text field called “Signature.”
The goal is to make the “Signature” field inactive until the user checks “I Accept Terms.”

Steps to Implement:​

  1. Select the “Signature” field in the form editor.

  2. In the Properties panel, find the Client Enabled field.

  3. Set the value to False — the field will now be disabled by default when the form loads.

  4. Open the Rule Manager.

  5. Add a new rule:

    Condition:

Action:

  1. Save and publish the form.

Result:​

  • When the form loads, the “Signature” field is disabled.
  • Once the user checks “I Accept Terms,” the field automatically becomes active and editable.

Behavior Summary​

Property StateDescription
TrueThe control is active and ready for user interaction when the form loads.
FalseThe control is disabled at load time and can be enabled dynamically via rules or code.

Notes & Best Practices​

  • Use the Client Enabled property to manage client-side interactivity without requiring server actions.
  • Combine it with Rule Manager to define when and how controls become active.
  • Remember: if server enablement is disabled, the client cannot enable the control even if Client Enabled is set to True.
  • By default, this property is set to True (active).

Summary​

Client Enabled improves form usability by letting developers control when and how users interact with form controls.
It is essential for creating responsive, condition-based form experiences where user actions dynamically change the form’s state.