Flow Start Button

Discriminator: flowStartButton
Fluent UI Blazor Component: FluentButton

Description

The FlowStartButton component renders a button that starts another flow when clicked. It supports multiple start modes (background, foreground, interactive), collects input data from bound components, and can optionally validate component state before starting. This component enables chaining flows together and building multi-step interactive workflows.


Properties

Property

Type

Required

Default

Description

component

string

✅ Yes

"flowStartButton"

Type discriminator

style

string

No

null

Inline CSS style

id

string

No

null

Component identifier

text

string

No

"Start Flow"

Button label text

flowPath

string

No

null

Explicit flow path to start. When null, the flow path is determined dynamically from the combined data

allowedFlowPaths

string[]

No

[]

Allowed flow paths when flowPath is null (dynamic mode). The flow path provided in the combined data must be in this list

startMode

FlowStartMode

No

Foreground

How the flow is executed (see values below)

allowMultipleStarts

bool

No

false

Whether the button can be clicked multiple times. When false, the button is disabled after the first successful start

data

JsonObject

No

{}

Static JSON data merged into the combined data and passed as flow input

bindings

ButtonDataBinding[]

No

[]

Data bindings to collect input from other components (see LinkButton)

validatesComponents

string[]

No

[]

Component IDs to validate before starting the flow

FlowStartMode Values

Value

Description

Background

Starts the flow in the background. A success toast is shown with the checkpoint ID. The user stays on the current page

Foreground

Runs the flow synchronously and waits for completion. A success toast shows the final status

InteractiveInNewTab

Starts the flow and opens the interactive flow run page in a new browser tab

InteractiveInCurrentTab

Starts the flow and navigates to the interactive flow run page in the current tab


Flow Resolution

Explicit Flow Path

When flowPath is set, the button always starts the specified flow:

Rendering...

Dynamic Flow Path

When flowPath is null, the flow path is extracted from the combined data. The combined data must contain a JSON object matching the FlowStartData structure:

Property

Type

Description

flowPath

string

The flow path to start. Must be listed in allowedFlowPaths

input

JsonNode

Optional input data to pass to the flow

The flowPath value must be listed in allowedFlowPaths, otherwise the button shows a "flow path not allowed" error.

Rendering...

Note: In dynamic mode, the flowPath can also come from a bound component (e.g. a form field or data grid selection) rather than static data.

Error Handling

Error

Cause

InvalidData

The combined data could not be deserialized as FlowStartData

FlowPathNotAllowed

The resolved flowPath is not in the allowedFlowPaths list

Flow Not Found

The resolved flow path does not match any flow in the workspace


Data Binding and Input

The combined data (static data merged with bound component data) is passed as the input parameter to the started flow. This allows forms, data grids, and other interactive components to feed data into the next flow.

Example: Form → Flow Start

Rendering...

Example: DataGrid Selection → Flow Start

Rendering...

Validation

Before starting a flow, the button validates all components listed in validatesComponents. If any validation errors are found, a warning toast is displayed and the flow is not started.

Common validation scenarios:

  • JsonSchemaForm: Required fields must be filled, types must match, formats must be valid.

  • DataGrid: The required number of items must be selected.


Preview Mode

When used inside the visual editor, the FlowStartButton operates in preview mode. Instead of actually starting a flow, it displays an informational toast showing:

  • The flow path

  • The start mode

  • A preview of the input data (truncated to 500 characters)

This allows flow authors to test data binding and validation without triggering real flow executions.


Button State

State

Behavior

Initial

Button is enabled and ready to click

Processing

Button shows a loading indicator; additional clicks are ignored

Started (single use)

When allowMultipleStarts is false, the button is disabled after the first successful start

Started (multi use)

When allowMultipleStarts is true, the button returns to the initial state after each start


JSON Example

Simple Foreground Start

Rendering...

Background Start with Multiple Uses

Rendering...

Interactive Start in New Tab

Rendering...

See Also