Number Field

Tips & examples

A compact, read-only numerical data text block that displays formatted integers or decimals alongside units, percentages, custom currency markings, and contextual error accent highlights.

When to use

Displaying a read-only numeric value, score, index, metric, or currency value within user interfaces.
Rendering financial tracking fields or statistical values that require explicit prefix/suffix symbols (e.g. £, €) or dynamic highlight gating for losses.

Examples

A dashboard tile rendering a database revenue cell formatted with a currency prefix and bold red styling triggered on negative margins.
Displaying a precise fractional calculation summary clamped cleanly via decimal precision configurations.

Avoid

Using to capture user numerical entries, use a form-bound number input control element instead.
Allocating massive grid canvas dimensions, keep this small indicator element sized to 1 row tall and 1 or 2 columns broad.

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.

Value

ValuerequiredCustom expression: A custom expression textbox representing the numeric value to draw. Defaults to 0.
Example 0
Default: buildCustomExpressionValue("0")

Formatting

Is PercentagerequiredYes / no: A boolean selection switch that automatically appends a percent sign (%) to the end of the printed value string.
Default: false
PrecisionrequiredNot set (null): A text input or numeric field defining the maximum allowance of decimal places to preserve (defaults to 0).
Default: none
PrefixrequiredText: Text or currency glyph tokens positioned directly before the printed numeric structure (e.g., adding a pound sign £).
Example £
Default: none
SuffixrequiredText: Text or unit layout identifiers positioned directly after the printed numeric structure (e.g., adding a euro sign €).
Example €
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 flat semantic typography elements. Screen readers parse baseline prefix, numerical formatting steps, and visual unit markers explicitly to guarantee perfect audio interpretations.

Expressions

Values you can read in expressions

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

elements.myNumberField.<property>

value number | string The current value (number or PostgREST string). elements.myNumberField.value

When The number being displayed, after the element has resolved it. Use it when a neighbouring element must calculate from the same figure.

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.myNumberField.value

Replace myNumberField 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

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
{
  "config": {
    "value": "@@expression:'value'",
    "precision": 0,
    "isPercentage": false,
    "prefix": "prefix",
    "suffix": "suffix",
    "highlight": "@@expression:true"
  }
}

Ready-made setups

Formatted Financial Metric Box ↕

Configures a compact 1x1 currency box displaying decimal precisions, absolute symbols, and alerts triggered on negative numbers.

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
{
  "config": {
    "value": {
      "valueExpression": "@@expression: dynamicQueries.getProfitMargin"
    },
    "formatting": {
      "isPercentage": false,
      "precision": "2",
      "prefix": "£",
      "suffix": "",
      "highlightingCondition": "Negative Values"
    }
  }
}