Skip to main content
CYPEX Documentation
    Support
    v2.0.0 Latest stable release View changelog ->
    1. CYPEX — PostgreSQL Application Platform
    2. /
    3. Element Dictionary
    4. /
    5. Various
    6. /
    7. Array Text Field
    Various Referencegenerated

    Array Text Field

    Display a list of text

    Technical id
    default_array_text_field
    Default size
    2 × 1 cells

    A read-only display element that renders an array of text strings as styled badge chips, supporting array length limits and custom color, size, and variant formatting.

    When to use

    • Displaying read-only collections or arrays of strings (e.g. tags, badges, categories, emoji indicators) as styled chip tokens.
    • Rendering dynamic string arrays retrieved from queries or calculated expressions with length caps and custom chip styling.

    What you need

    • Arrays of strings (string[]), tag lists, dynamic query array results, or calculated array expressions.

    Examples

    • A read-only tag display panel rendering an array of category labels assigned to a database record.
    • A status metric tile displaying dynamic keyword chips with a maximum length cap and outlined primary styling.

    Avoid

    • Using for interactive string array entries where users need to add or delete tags — use array_text_input instead.
    • Using for single read-only text strings — use text_field instead.

    Use instead

    • Array Text Input — The workflow requires capturing, typing, or editing string array items rather than just displaying them as read-only tags.
    • Text Field — Displaying a single text string value rather than an array of multiple string tags.

    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.

    Setup
    ValuesrequiredCustom expression
    A custom expression evaluating to an array of strings. Defaults to ["🚀", “🎉”].
    Example ["🚀", "🎉"]
    Default: buildCustomExpressionValue('["🚀", "🎉"]')
    Max LengthoptionalNumber
    An integer input capping the maximum number of array string items displayed in the view.
    Example 5
    Default: none
    Styling
    ColoroptionalOne of: primary, secondary, default
    Selects the visual accent color applied to the tag chips.
    Choices
    • primary
    • secondary
    • default
    Default: none
    SizeoptionalOne of: small, medium
    Selects the visual scale of the rendered tag chips.
    Choices
    • small
    • medium
    Default: none
    VariantoptionalOne of: filled, outlined
    Selects the background fill and outline style of the tag chips.
    Choices
    • filled
    • outlined
    Default: none

    Sizing

    • Default size when dropped on a page: 2 × 1.

    Accessibility

    Renders as a semantic list container (<ul> or <div>) holding read-only list items/badges. Screen readers announce each array item sequentially.

    Where you can place it

    Drag this element into one of these containers:

    1
2
3
4
5

    {
  "config": {
    "values": "@@expression:'value'"
  }
}

    1
2
3
4
5
6
7
8
9

    {
  "config": {
    "values": "@@expression:'value'",
    "maxLength": 0,
    "color": "primary",
    "variant": "filled",
    "size": "small"
  }
}

    Ready-made setups

    Configures an 8x2 read-only array text field displaying query category tags with primary outlined chip styling and a length limit of 5 items.

     1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13

    {
  "config": {
    "setup": {
      "arrayExpression": "@@expression: dynamicQueries.getArticleCategories",
      "maxLength": 5
    },
    "styling": {
      "color": "Primary",
      "size": "Medium",
      "variant": "Outlined"
    }
  }
}