Color Field

Tips & examples

A read-only colored rectangle block that visually reflects a specified HEX value and can optionally print that color string in its center.

When to use

Displaying a read-only visual color rectangle based on a HEX color string or dynamic color evaluation.
Providing quick status color blocks, palette swatch summaries, or dynamic color indicators within a dashboard layout.

Examples

A status tile showing the color code of a company’s custom branding palette element.
A visual reference box showing an item’s tracked category color directly from a database hex string.

Avoid

Using as an interactive color picker input where users are expected to select or modify colors inside a form, use a dedicated color input component instead of this read-only color display field.
Writing raw color names (e.g., ‘red’, ‘blue’) or invalid color strings in the color expression textbox instead of valid Hex color format strings (e.g., ‘#FFFFFF’ or ‘#FF0000’).
Enabling ‘Show Value’ on small container tile sizes (e.g., 1x1 grid tiles) with low Width/Height slider percentages, which causes the centered Hex text string to clip or become illegible.

Properties

Editor properties

Configure these in the Application Designer property panel. Group headings mirror the editor where possible. Data Source is where the element gets its rows or field binding (a view/query, a connector operation, or a parent form field). References appear only for view-backed sources and map foreign-key ID columns to readable labels from another view.

Color

ValuerequiredCustom expression: The target color code specified via a standard hex text input format or an dynamic code expression.
Example #FFFFFF
Default: buildCustomExpressionValue('"#FFFFFF"')

Style

WidthoptionalNumber: A slider value from 0% to 100% defining the relative horizontal width scaling of the rectangle within its grid frame wrapper boundary.
Default: none
HeightoptionalNumber: A slider value from 0% to 100% defining the relative vertical height scaling of the rectangle within its grid frame wrapper boundary.
Default: none
Show LabeloptionalYes / no: A boolean switch toggling whether the raw color HEX text string value is rendered visible over the center of the color square graphic.
Default: none

Sizing

No size of its own: dropped at the platform default of 1 × 1 grid cells and resized on the page.

Accessibility

Renders as a flat layout container vector. Screen reader equipment processes textual fallback identifiers derived directly from the underlying active HEX value property state.

Composition

Where you can place it

Drag this element into one of these containers:

Sample configuration

Minimal example — required fields only ↕

1
2
3
4
5
{
  "config": {
    "value": "@@expression:'value'"
  }
}

1
2
3
4
5
6
7
8
{
  "config": {
    "value": "@@expression:'value'",
    "width": 0,
    "height": 0,
    "showLabel": false
  }
}

Ready-made setups

Centered Color Block Display ↕

Configuring a clean color indicator box that takes up half its framing wrapper dimensions and reveals the raw HEX text string code value overlay.

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
{
  "config": {
    "color": {
      "colorValue": "#28A745"
    },
    "style": {
      "width": "50%",
      "height": "50%",
      "showValue": true
    }
  }
}