UI Rendering

Overview

Interactive UI Rendering lets you build rich user interfaces for your interactive flows. You can display custom UIs while a flow is running (e.g. progress dashboards, live data) or after a flow completes (e.g. result summaries, reports, action buttons that chain into other flows).

You define the UI as a component tree in JSON. Each component has a component type (e.g. "stack", "label", "card") and a set of properties that control its appearance and behavior. At runtime, Connect renders these components using the Fluent UI Blazor component library, giving your output a consistent, modern look and feel.

Defining a Component Tree

The UI is defined as a JSON tree. Every node in the tree is a component identified by a component property (the type discriminator). Components can be nested — containers like stack and card accept children.

Example

Rendering...

This produces a vertical layout with a header label, a horizontal divider, and a card containing a body text label.

Data Binding and Interaction

Components are not just for display — some can collect data and validate user input:

Data-providing components (DataGrid, JsonSchemaForm) collect user input such as selected rows or form values. You assign them a unique id so that buttons can reference them.
Action components (LinkButton, FlowStartButton) can bind to data-providing components to gather their data when clicked. They can also validate those components before performing their action, showing a warning if validation fails.
Container components (Stack, Card) automatically aggregate data and validation from all their children.

This enables powerful patterns like: a form + a "Submit" button that validates the form and starts another flow with the form data as input.

Available Components

Component	Type Discriminator	Based on	Description
Stack	`stack`	FluentStack	Layout container that arranges children horizontally or vertically
Label	`label`	FluentLabel	Text display with typography, color, and alignment options
Card	`card`	FluentCard	Styled container with optional minimal appearance
Divider	`divider`	FluentDivider	Horizontal or vertical visual separator
Icon	`icon`	FluentIcon	Icon with configurable variant, size, and color
DataGrid	`dataGrid`	FluentDataGrid	Data table with sorting, filtering, pagination, and row selection
JsonSchemaForm	`jsonSchemaForm`	JSON Schema Form	Auto-generated form from a JSON Schema definition
LinkButton	`linkButton`	FluentButton	Button that opens a URL, with optional data-driven placeholders
FlowStartButton	`flowStartButton`	FluentButton	Button that starts another flow with configurable start mode

Common Properties

Every component supports the following base properties:

Property	Type	Required	Default	Description
`component`	`string`	✅ Yes	—	The component type (see table above)
`style`	`string`	No	`null`	Inline CSS style applied to the rendered element (e.g. `"margin: 10px; width: 50%"`)
`id`	`string`	No	`null`	Unique identifier used for data binding and validation

Important: The id property is required when a component needs to provide data to a button. For example, a DataGrid must have an id so that a FlowStartButton can bind to its selected rows. Without an id, the component cannot participate in data binding.

Visual Editor

Connect includes a built-in visual editor for designing and previewing interactive UI output templates. The editor has two panels:

JSON editor (left) — Write or paste the JSON component tree. Syntax highlighting and validation are provided.
Live preview (right) — The component tree is rendered in real time as you edit the JSON.

The editor runs in preview mode: clicking a FlowStartButton shows an informational toast with the flow details instead of actually starting a flow, so you can safely test your UI without side effects.

Predefined Templates

The visual editor offers ready-made templates to help you get started. Select a template to load its JSON into the editor and see the result instantly.

Template	Description
Label	Simple label with header typography and accent color
Stack	Vertical stack with multiple label items
Card	Card with title, divider, and content
Divider	Horizontal divider between two sections
Icon	Row of icons in different colors (success, warning, error, info)
LinkButton	Button that opens an external URL
FlowStartButton	Button configured to start a flow
DataGrid	Data grid with sortable columns and pagination
JsonSchemaForm	Auto-generated contact form from a JSON Schema
Layout Showcase	Complex dashboard with nested stacks, cards, icons, and link buttons
DataGrid Showcase	Feature-rich data grid with filtering, selection, and pagination
Form Showcase	Form with data binding to a flow start button
FlowStartButton Showcase	Multiple flow start buttons with different start modes

Display Settings

You can customize the appearance of the interactive flow run page to tailor the end-user experience.

Flow-Level Settings

These are configured in the flow's interactive settings:

Setting	Default	Description
Hide Flow Title	Off	Hides the flow title, flow ID, and checkpoint ID at the top of the page
Hide Navigation Bar	Off	Hides the application navigation sidebar, giving the output full-width space
Hide Status Card	Off	Hides the execution status card (progress ring, elapsed time, Rerun / New Inputs buttons)

Query Parameter Overrides

Display settings can be overridden on a per-link basis using URL query parameters. When set, these take precedence over the flow-level settings.

Query Parameter	Values	Description
`hide_title`	`true` / `false`	Override the flow title visibility
`hide_navbar`	`true` / `false`	Override the navigation bar visibility
`hide_status`	`true` / `false`	Override the status card visibility

Example:

Rendering...

This is useful for embedding interactive flow outputs in iframes, kiosk displays, or external portals where the Connect navigation is not needed.

Shared Value Types

Several components share common value types for alignment, color, and orientation. These are listed here for reference and linked from individual component pages.

Orientation

Value	Description
`Horizontal`	Arrange items side by side
`Vertical`	Arrange items top to bottom

HorizontalAlignment

Value	Description
`Left`	Align to the left
`Start`	Align to the start (locale-aware)
`Center`	Center-align
`Right`	Align to the right
`End`	Align to the end (locale-aware)
`Stretch`	Stretch to fill the available space
`SpaceBetween`	Distribute items evenly with space between them

VerticalAlignment

Value	Description
`Top`	Align to the top
`Center`	Center-align
`Bottom`	Align to the bottom
`Stretch`	Stretch to fill the available space
`SpaceBetween`	Distribute items evenly with space between them

Color

Value	Usage
`Neutral`	Default / neutral tone
`Accent`	Primary accent color
`Warning`	Warnings (yellow / orange)
`Info`	Informational messages (blue)
`Error`	Errors (red)
`Success`	Success indicators (green)
`Fill`	Filled background
`FillInverse`	Inverted fill
`Lightweight`	Subtle / lightweight tone
`Disabled`	Muted / disabled appearance
`Custom`	Custom CSS color — use the `customColor` property to specify the value (e.g. `"#E74C3C"`, `"rgb(255, 0, 0)"`)

Conigma Connect