Conditional Container

Tips & examples

A dual-sided conditional container housing two separate element areas (Primary/True and Secondary/False) that swaps visible contents dynamically based on runtime expression evaluation or screen toggles. Supports border variants, padding configurations, and rich solid/gradient background overlays.

When to use

Conditional container wrapping where child UI layouts must dynamically swap between two distinct view states (Primary/True side and Secondary/False side) based on expression logic.
Grouping complex layout regions that require elevated/outlined container frames, custom padding controls, or solid/gradient background styling.

What you need

Acts as a dual-sided structural container holding independent sets of child UI elements across Primary and Secondary canvas view layers.

Examples

A dual-state dashboard panel displaying active operational metrics on the Primary (True) side and a placeholder onboarding layout on the Secondary (False) side.
A feature container switching view states based on custom expression logic, styled with linear gradient backgrounds and custom padding bounds.

Avoid

Squeezing the conditional container into small layout dimensions when its nested children require ample space, allocate 12 grid columns wide and 12 rows tall.
Using complex conditional containers for simple single-element visibility toggles, toggle the element’s direct visibility flag instead.

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.

Show Content

ValuerequiredYes / no or Custom expression (yes/no): Expression or boolean that controls whether the conditional content is shown.
Example user.isAuthenticated
Default: true

Container Configuration

VariantoptionalOne of: standard, outlined, elevatedInside `containerConfig`

Controls the visual frame style around the container boundary.

Choices

standard
outlined
elevated

Default: none

PaddingoptionalStructured option or Custom expression or TextInside `containerConfig`

Defines internal edge spacing. Can be set using 4 individual numeric inputs (Top, Right, Bottom, Left) or a custom padding expression object.

Example {"pt":3,"pr":10,"pb":3,"pl":4}

Default: none

Background

BackgroundoptionalKey-value mapInside `containerConfig`: Background styling for the container (solid colour, gradient, image, and overlay options).
Default: none

Inside `containerConfig.padding.option_1`: (option_1) ↕

PbrequiredNumber: Default: none
PlrequiredNumber: Default: none
PrrequiredNumber: Default: none
PtrequiredNumber: Default: none

Sizing

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

Accessibility

Renders accessible structural container wrappers. Swapping between Primary and Secondary content regions dynamically updates focus order and screen reader accessibility trees.

Expressions

Values you can read in expressions

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

elements.myConditional.<property>

visible boolean True when the condition is met and the content is shown. elements.myConditional.visible

When Whether this container currently shows its content. Read it from a sibling to keep two parts of the page in step, rather than repeating the same condition in both places.

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.myConditional.visible

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

Child slots

This container accepts nested elements in these slots:

slot	accepts
`content`	any element

Nesting overview

graph TD
  root["advanced_conditional"]
  root --> content["content slot"]

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": false
  }
}

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
{
  "config": {
    "value": false,
    "containerConfig": {
      "padding": {
        "pt": 0,
        "pr": 0,
        "pb": 0,
        "pl": 0
      },
      "variant": "standard",
      "background": {
        "exampleKey": {}
      }
    }
  },
  "children": {
    "content": [
      {
        "type": "default_text_input",
        "config": {
          "label": "Example field"
        }
      }
    ]
  }
}

Ready-made setups

Dual-State Conditional Dashboard Container ↕

Configures a 12x12 dual-sided conditional container that swaps between Primary metrics and Secondary empty states based on dynamic evaluation, complete with custom padding and gradient styling.

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
{
  "config": {
    "show_content": {
      "showContent": "@@expression: dynamicQueries.hasDataResults"
    },
    "container_configuration": {
      "containerVariant": "Elevated",
      "containerPadding": "{\"pt\":4,\"pr\":4,\"pb\":4,\"pl\":4}"
    },
    "background": {
      "backgroundSource": "Color Gradient",
      "gradientType": "linear",
      "gradientDirection": "to bottom right",
      "opacity": 100,
      "backgroundOverlay": "None"
    }
  }
}