UI Flows - Docs

Available starting with FlowX.AI 5.3.0: UI Flows enable you to build reusable, multi-platform user interfaces that work across web, iOS, and Android applications.

Overview

UI Flows are a project resource for use cases where full BPMN mapping is unnecessary. Full BPMN mapping for simple UI experiences introduces overhead and complexity. UI Flows also eliminate subprocesses that add layers to the main process for UI purposes only.

UI Flows support web (Angular/React), iOS, and Android. They separate UI definitions from process logic, providing an alternative to BPMN processes when business orchestration is not required.

Multi-Platform Support

Create UI once and deploy to web, iOS, and Android with platform-specific configurations

Process Integration

Launch FlowX processes from UI Flows when needed using Start Process UI Action

Navigation Management

Manage Navigation Areas, pages, and scrolling within UI Flows Designer

Task Manager Integration

Embed Task Manager as a UI component to display task lists

Key characteristics

Characteristic	Description
Project Resource	Managed as independent project resources, separate from process definitions
UI Designer	Configure using UI Designer (navigation areas appear as UI assets instead of BPMN nodes)
Navigation Areas	Add navigation areas as UI assets to define the user journey
Components	Supports components, substitution tags, media items, and enumerations
Theme Support	Themes apply to UI Flows
Data Model	UI Flows have their own data model for localization and formatting
FLX UI Flow Component	The `flx-ui-flow` component renders UI Flows and can be embedded in any container app
Custom Components	Custom components can be added to UI Flows

Platform selection is permanent: When creating a UI Flow, you select a platform (web or mobile). This cannot be changed later. Changing the project-level platform setting does not update existing UI Flow resources.

When to use UI Flows

Use UI Flows for

Use UI Flows when you need a user interface without BPMN process orchestration:

Information Display

Dashboards, reports, and static content that doesn’t require process orchestration

Task Management

Task lists and task management interfaces with embedded Task Manager component

Navigation Shells

App navigation structures, home pages, and menu systems

Form Collections

Data entry forms that start processes but don’t need their own process context

Use processes for

Use processes when you need:

Business Logic

Complex workflows with business rules, approvals, and integrations

State Management

Applications requiring process state tracking and persistence

Orchestration

Multi-step operations with decision points and parallel execution

Combine both approaches

Use UI Flows as the main app shell and Start Process UI Actions to launch business processes when needed.

Example:

UI Flow provides the home screen, navigation, and dashboard
User clicks “Apply for Loan” → Start Process UI Action launches the loan process
After process completion, user returns to the UI Flow dashboard

Key features

What’s included in UI Flows v1:

Create and render UI Flows for Web, iOS, and Android platforms
Navigate between Navigation Areas with Navigate To action
Embed Task Manager component for task management
Configure UI Flow data model for localization
Start FlowX processes from UI Flows via Start Process action

In UI Flows Designer:

Create pages and navigation flows
Configure navigation areas (Page, Tabbar, Zone, Modal)
Set up header and footer zones (web only)
Define home pages with navigation icons

Start Process UI Action

Launch FlowX processes from UI Flows:

Start processes on button clicks or events
Pass data from UI Flow to process
Return to UI Flow after process completion

Navigate To UI Action

Configure navigation within UI Flows:

Navigate to specific Navigation Areas
Scroll to Container elements
Create multi-step wizards

Task Manager component

Embed Task Manager in UI Flows:

Display task lists
Filter and search tasks
Launch tasks in context

Home page support

Designate any page as the home page
Automatic home icon in navigation
Return to home from any screen

Import/Export

Export UI Flows as portable packages
Import into different projects or environments

Creating a UI Flow

Create UI Flow resource

In FlowX Designer, navigate to your project and create a new UI Flow as a project resource.

Navigate to UI Flows tab
Click + Add button
Enter a name and description
Select platform (Web or Mobile)

Design navigation structure

Open UI Flows Designer and manage Navigation Areas:

Add Navigation Areas (pages)
Configure navigation type (Single Page or Wizard)
Setup zones (header, content, footer) for web
Define navigation flow between areas

Add UI components

Build your interface using the component library:

Drag and drop UI components
Configure component properties
Add Task Manager component if needed
Setup data bindings

Configure UI actions

Setup interactivity and navigation:

Start Process: Launch processes when needed
Navigate To: Move between Nav areas or scroll to containers
External: Open a link in a new tab

Set home page (optional)

Designate a page as the home page:

Select the Navigation Area
Mark as “Home Page”
Configure home icon appearance

Test and validate

Test your UI Flow:

Preview across platforms
Test navigation flow
Verify Start Process actions work
Check Task Manager integration

Configuring Start Process UI Action

The Start Process UI Action allows you to launch FlowX processes from UI Flows. Although UI Flows do not require a process and user tasks, they support actions for process initiation.

How it works

When a process is started from a UI Flow:

The FlxProcessRenderer component is dynamically added, replacing the UI Flow content
The process renderer inherits configuration from the UI Flow and shares common stores:
- API URL and static assets path
- Workspace and project IDs
- Language and locale settings
- Build information
- Theme and fonts
- Substitution tags and media items

When configuring the FlxUIFlow component in your container app, ensure the processApiPath parameter is set to enable process starting capabilities.

Configuration steps

Add button or trigger

Add a UI component that will trigger the process (typically a Button).

Add UI Action

Configure the UI Action:

Click Add UI Action
Select Start Process type
Choose the process definition to start from the dropdown

Configure forms and data

The Start Process action allows you to configure:

Process selection: Select the process to start
Forms to submit: Choose which forms to include with the start request
Custom body: Define which data to send as start parameters

{
  "customerId": "${uiData.customer.id}",
  "applicationAmount": "${uiData.amount}"
}

Configure behavior

Set what happens after process starts:

Navigate to process UI
Stay in UI Flow
Show confirmation message

Optional: Add analytics

Configure analytics tracking:

Analytics name: Set a name for tracking
Custom payload: Add additional data for analytics

Configuring Navigate To UI Action

The Navigate To UI Action handles navigation within UI Flows and scrolling to specific elements. The Navigate To action either routes (changes the URL/view) or scrolls (anchor navigation) depending on the context:

Scenario	Behavior	Example
Destination inside same Navigation Area (single page)	Scroll	Button in Card X scrolls to Card Y within the same Page
Destination inside same Navigation Area (wizard navigation)	Route	Button navigates to next step in a wizard Page
Destination outside Navigation Area, different root	Route	Button in Page 1 navigates to Page 2
Destination outside Navigation Area, same root (wizard)	Route	Button in Zone 1 routes to Zone 2 within a wizard Page
Destination outside Navigation Area, same root (single page)	Scroll	Button in Zone 1 scrolls to Zone 2 within a single-page layout
Destination is a Modal	Route	Button opens Modal as a routed view

Detailed navigation examples

Example layout:

Page 1 - Single page form
├── Zone - Header
│   └── Card 1 (Button 2)
├── Zone - Content
│   ├── Card 2 (Button 1)
│   ├── Modal
│   │   └── Card 8
│   ├── Card 9 (Button 3)
│   └── Card 10 (Button 4)
└── Zone - Footer
    └── Card 3

Page 2 - Wizard navigation
├── Card 4
├── Card 5
└── Card 6

Action outcomes:

Action	Destination	Result
Button 1	Modal/Card 8	Route to modal
Button 2	Card 10	Scroll to Card 10
Button 3	Card 4 (Page 2)	Route to Page 2, Card 4

Add navigation trigger

Add a Button or menu item that triggers navigation.

Configure Navigate To action

Add UI Action → Navigate To
Select target: Navigation Area
Choose the destination Navigation Area

Available destinations include all Navigation Areas in the hierarchy plus first-level children (Card, Container, Custom).

Optional: Pass data

Configure data to pass to the destination area if needed.

Scroll to Container

Identify target container

Ensure the target Container component has a unique identifier.

Configure Navigate To action

Add UI Action → Navigate To
Select target: Container Element
Enter the container identifier
Configure scroll behavior (smooth, instant)

Embedding Task Manager

Add Task Manager as a UI component in UI Flows to display task lists without requiring a process.

Add Task Manager component

In UI Flows Designer, add the Task Manager component to a Container or Card.

Select a view

Configure which view to display in the Task Manager:

Select the view you want from your available views list
Each view can have different columns, filters, and sorting options

Routing

UI Flows use a simplified routing approach for navigation:

Route Type	Description
UI Flow Route	The base route is defined by the UI Flow where the FLX UI Flow component is added
Process Instance Route	When a process is started from a UI Flow, an additional route segment is added based on the process instance UID

Browser back button support

When a process starts from a UI Flow, a new route is created based on the process instance UID. Users can return to the UI Flow using the browser’s back button.

Future enhancements: Additional routing logic is planned for future iterations, including routes defined based on multiple root navigation areas and new action types for navigation.

Platform considerations

Web
Mobile

Full Feature Support:

All UI component types available (except File upload)
Navigation Areas with zones (header, content, footer)
Full wizard and single-page navigation
Task Manager component integration

Excluded Navigation Areas:

Stepper & Step

Excluded Components:

File upload

Available Root Navigation Areas:

Page
Tabbar
Zone

Component Hierarchy:

Page (multiple allowed)
├── Card
├── Container
├── Custom
├── Modal
├── Zone
└── Tabbar

Tabbar
└── Tab (multiple allowed)
    ├── Card
    ├── Container
    ├── Custom
    ├── Modal
    ├── Zone
    └── Tabbar

Modal (multiple allowed)
├── Card
├── Container
└── Custom

Mobile-Optimized (iOS & Android):

Preview selection via dropdown (iOS/Android)
Basic Navigation Areas (Page, Tab Bar), no header/footer zones
Platform-specific property overrides (copy to/from iOS/Android)

Excluded Navigation Areas:

Zone
Stepper & Step

Excluded Components:

Task management
Table
File upload

Available Root Navigation Areas:

Page
Tabbar (only as first root - not enforced in UI Designer)

Component Hierarchy:

Page (multiple allowed)
├── Card
├── Container
├── Custom
└── Modal

Tabbar
└── Tab (multiple allowed)
    ├── Card
    ├── Container
    ├── Custom
    └── Modal

Modal (multiple allowed)
├── Card
├── Container
└── Custom

Use the platform selection subheader in UI Designer to switch between platforms and configure platform-specific behaviors.

Best practices

Architecture

Use UI Flows for UI Logic

Keep navigation, layout, and presentation in UI Flows

Use Processes for Business Logic

Delegate complex business operations to processes via Start Process action

Minimize Data in UI Flows

UI Flows are stateless - pass necessary data to processes when starting them

Reuse Across Projects

Design UI Flows for reuse across multiple apps

Design

DO: ✅ Create clear navigation hierarchies
✅ Use descriptive names for Navigation Areas
✅ Test on all target platforms before deployment
✅ Configure accessibility properties for mobile
✅ Use Task Manager component for task-centric applications DON’T: ❌ Duplicate business logic in UI Flows and Processes
❌ Create overly complex navigation structures
❌ Ignore platform-specific limitations
❌ Skip accessibility configuration for mobile apps
❌ Use UI Flows when you need process state management

If you currently use subprocesses for UI-only scenarios, consider migrating to UI Flows:

Identify UI-only subprocesses

Review your subprocesses and identify those that:

Only display UI without business logic
Act as navigation shells
Could be replaced with simpler UI

Create equivalent UI Flow

Build a UI Flow that replicates the UI functionality:

Create Navigation Areas matching subprocess pages
Add UI components
Setup navigation using Navigate To actions

Migrate process launches

Replace subprocess starts with Start Process UI Actions:

Keep actual business processes as processes
Launch them from UI Flows when needed

Test thoroughly

Verify functionality across platforms:

Navigation works correctly
Process launches function properly
Data flows as expected

Deprecate old subprocesses

Once validated, remove the unnecessary subprocess layers.

Limitations and compatibility

Current limitations

UI Flows v1 has the following limitations:

Data Persistence: UI Flows don’t persist data like processes do - data must be passed to processes for storage
Data Fetching: UI Flows cannot directly fetch data from external systems - use Start Process action to retrieve data via process integrations
Back Navigation: Limited back navigation compared to process-based flows
Complex Conditionals: For complex business rules, use processes instead
Reusable UI: Reusable UI components are not yet supported in UI Flows
Permission-based UI: UI visibility based on user permissions is not yet available
Undo-Redo: Limited undo-redo support in UI Flows Designer
Multi-Instance (Concurrent): While a UI Flow can launch multiple process instances (for example, separate buttons for mortgage or credit card applications), it cannot yet have multiple instances running concurrently from the same page

Future enhancements

Planned for future releases:

Data fetching: Retrieve data from FlowX or external systems via workflow API integration
Reusable UI integration: Integrate reusable UI components in UI Flows with input/output parameters and data mappers
Permission-based UI: Configure UI visibility and behavior based on user permissions
Enhanced resource management: Undo-redo, caching, resource usages, merge conflicts, and audit logging
Advanced actions: Start project with entrypoint, start process/project with mappings
Additional UI components: Modal as UI element, Process component, Chat component
AI integration: AI-powered features for UI Flows

Troubleshooting

Start Process UI Action not working

Possible causes:

Process definition not published
Missing required process parameters
Insufficient permissions

Solutions:

Ensure process definition is published in target environment
Verify all required parameters are mapped in UI Action
Check user has permission to start the process
Review browser console for error messages

Navigate To action not working

Possible causes:

Target Navigation Area doesn’t exist
Container identifier mismatch
Navigation configuration error

Solutions:

Verify target Navigation Area is defined
Check container identifier matches exactly (case-sensitive)
Review navigation configuration in UI Designer
Test navigation flow step by step

Task Manager component not showing tasks

Possible causes:

Task Manager not properly configured
User doesn’t have tasks
Filter configuration too restrictive

Solutions:

Verify Task Manager component configuration
Check user has assigned tasks in Task Manager
Review and adjust filter settings
Ensure Task Manager service is running

Platform-specific configuration not applying

Possible causes:

Wrong platform selected in preview
Configuration not saved
Cache issues

Solutions:

Switch platform tabs and verify configuration
Save UI Flow and refresh browser
Clear browser cache and reload
Test on actual device if possible

UI Designer Overview

Learn about UI Designer capabilities and interface

Navigation Areas

Understand Navigation Areas in processes and UI Flows

UI Actions

Configure UI Actions including Start Process and Navigate To

Task Management

Learn about Task Manager and task management capabilities

Getting Started

Platform overview

FlowX.AI Designer

Building projects

Building blocks

Platform deep dive

API reference

​Overview

Multi-Platform Support

Process Integration

Navigation Management

Task Manager Integration

​Key characteristics

​When to use UI Flows

​Use UI Flows for

Information Display

Task Management

Navigation Shells

Form Collections

​Use processes for

Business Logic

State Management

Orchestration

​Combine both approaches

​Key features

​Navigation Areas management

​Start Process UI Action

​Navigate To UI Action

​Task Manager component

​Home page support

​Import/Export

​Creating a UI Flow

​Configuring Start Process UI Action

​How it works

​Configuration steps

​Configuring Navigate To UI Action

​Navigation behavior: Route vs Scroll

​Navigate to Navigation Area

​Scroll to Container

​Embedding Task Manager

​Routing

​Browser back button support

​Platform considerations

​Best practices

​Architecture

Use UI Flows for UI Logic

Use Processes for Business Logic

Minimize Data in UI Flows

Reuse Across Projects

​Design

​Migration from subprocess-based navigation

​Limitations and compatibility

​Current limitations

​Future enhancements

​Troubleshooting

​Related resources

UI Designer Overview

Navigation Areas

UI Actions

Task Management

Overview

Key characteristics

When to use UI Flows

Use UI Flows for

Use processes for

Combine both approaches

Key features

Navigation Areas management

Start Process UI Action

Navigate To UI Action

Task Manager component

Home page support

Import/Export

Creating a UI Flow

Configuring Start Process UI Action

How it works

Configuration steps

Configuring Navigate To UI Action

Navigation behavior: Route vs Scroll

Navigate to Navigation Area

Scroll to Container

Embedding Task Manager

Routing

Browser back button support

Platform considerations

Best practices

Architecture

Design

Migration from subprocess-based navigation

Limitations and compatibility

Current limitations

Future enhancements

Troubleshooting

Related resources