Data Display

Tips & examples

A read-only informational visualization frame supporting rich text text formatting, optional colored identity accents, and dynamic item pagination bounds.

When to use

Presenting filtered structural metrics, record lists, or query payloads cleanly to users without interactive input capabilities.
Configuring dashboard utility banners, key metrics counters, or parsed data streams targeted directly at a database view shape rather than standard form parameters.

What you need

Requires configuring the Data Source framework parameters pointing cleanly at database views via custom data query selectors, identifier values, and extraction loops.

Database view shape contexts, static object lists (e.g., [‘hi’, ‘hello’]), or complex filter schemas managed via Derived Data Expressions.

Examples

A high-profile dashboard card rendering statistical database rows as a clean animated ‘Countup’ summary card.
Displaying a formatted list of raw JSON arrays or styled Markdown notes directly fetched through custom query configurations.

Avoid

Attempting to capture user responses or text inputs, use form-bound input elements instead.
Pointing the data source structure directly at an interactive table or form element context instead of targeting a structural database view shape.

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.

Data Source

View NameoptionalTextInside `dataSource`

Database view that supplies rows or form data.

Default: none

Identifier NameoptionalTextInside `dataSource`

Primary-key field used to load a single record (edit/detail).

Default: none

IdentifieroptionalCustom expression

Text box expression mapping logic paths across query collections.

Default: none

Response FormatoptionalOne of: json, geo, text, xml, bytea (or not set)Inside `dataSource`

Configuration for response Format.

Choices

json
geo
text
xml
bytea

Default: none

Set All DataoptionalYes / noInside `dataSource`

Sets the collection looping logic rule applied to database matches.

Default: none

Custom QueryoptionalText or Custom expressionInside `dataSource`

Configures data query variables or filters. Accepts manual text box script statements or target dropdown selectors.

Default: none

Display

FormatrequiredCustom expression

Expression controlling how the value is displayed.

Example element.data

Default: buildCustomExpressionValue("element.data")

IconoptionalNot set (null)

Configuration for icon.

Default: none

ColoroptionalCustom expression (text)

Sets the visualization theme tint using static identity mapping names or customized text box expression properties.

Default: info

VariantoptionalOne of: h1, h2, h3, h4, h5, h6, subtitle1, subtitle2, body1, caption, button, overline

Controls structural typography scales and text layouts formatting rules.

Choices

h1 — Extra large display headline text scaling.
h2 — Large display title text scaling.
h3 — Medium headline typography size spacing.
h4 — Standard section header text scale layout.
h5 — Compact sub-header text block scaling parameters.
h6 — Minimal header typography weight spacing.
subtitle1 — Primary bold layout descriptor accent scaling.
subtitle2 — Secondary compact label style font footprint.
body1 — Standard text size proportions.
caption — Small low-contrast utility text formatting scale.
button — Stylized block layout indicator weight rules.
overline — All-caps tracking format layout styling rules.

Default: none

Bar PositionoptionalOne of: top, right, bottom, left (or not set)

Positions an colored accent border parameter relative to the component layout footprint grid.

Choices

top — Border renders horizontally across the upper boundary layer.
right — Border renders down the right outer boundary framework.
bottom — Border sits below the lower container threshold.
left — Border renders down the left perimeter boundary.

Default: none

Card VariantoptionalOne of: outlined, elevation

Visual container frame design styles.

Choices

outlined
elevation — Uses standard box shadow depths to present visual vertical separation.

Default: none

Data VariantoptionalOne of: plain, markdown, json, countup, flow

Determines how raw input payload variables are decoded and presented inside the viewport canvas framework.

Choices

plain
markdown
json — Prettified code block format output suitable for structural array logging lists.
countup — Animated numeric visual counter counting from zero up to the target value.
flow

Default: none

Data Item VariantoptionalOne of: rounded, chip, text

Configuration for data Item Variant.

Choices

rounded
chip
text

Default: none

LimitoptionalNot set (null)

Enforces strict bounds constraints on the absolute maximum quantity of structural array elements rendered on screen.

Default: none

Sizing

Minimum size: 2 × 2 grid cells (width × height).
Default size when dropped on a page: 3 × 3.

Translatable labels

label — Descriptive string identifier rendered adjacent to the text field.

Accessibility

Implements strict ARIA informative status regions (role=‘status’ or role=‘log’ based on format choices) keeping screen reading software updated on dynamic database text changes.

Expressions

Values you can read in expressions

Other parts of your app can read live values from this element in custom expressions:

elements.orderTotal.<property>

loading boolean Indicates if the data is in process of being loaded from the server. elements.orderTotal.loading

error string Error message when the last operation failed. elements.orderTotal.error

formattedData Varies by configuration Display-ready value after format expressions run. elements.orderTotal.formattedData

When The value after the format expression has run — what the reader actually sees. Prefer this over `data` when another element should show the same formatted text.

formattedData full type ↕

string | number | any | undefined

identifier number | string Resolved primary-key value for the loaded record. elements.orderTotal.identifier

color string Resolved display colour after any colour expression runs. elements.orderTotal.color

data null The raw value behind the displayed text. elements.orderTotal.data

When The raw value before formatting. Use it when you need to calculate with the number rather than display it.

To use one of these, open the property you want to drive on the other element, switch it to expression mode in the Expression Editor, and enter:

1
elements.orderTotal.data

Replace orderTotal with this element’s unique id. Select the element in Application Designer and copy the id chip at the top of the right-hand property panel.

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
 6
 7
 8
 9
10
11
12
{
  "config": {
    "dataSource": {
      "viewName": "contacts",
      "identifierName": "identifierName",
      "setAllData": false,
      "responseFormat": "json",
      "customQuery": "customQuery"
    },
    "format": "@@expression:'value'"
  }
}

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
{
  "config": {
    "dataSource": {
      "viewName": "contacts",
      "identifierName": "identifierName",
      "setAllData": false,
      "responseFormat": "json",
      "customQuery": "customQuery"
    },
    "format": "@@expression:'value'",
    "identifier": "@@expression:'value'",
    "icon": "icon",
    "color": "@@expression:'value'",
    "barPosition": "top",
    "limit": 0,
    "variant": "h1",
    "cardVariant": "outlined",
    "dataVariant": "plain",
    "dataItemVariant": "rounded"
  }
}