UI Flows - Docs

Overview

UI Flows are a project resource designed to handle use cases where the full mapping of a business case in BPMN is unnecessary. Using full BPMN mapping for simple UI experiences can introduce unnecessary overhead and complexity. UI Flows also eliminate the need to use subprocesses that introduce different layers into the main process just for UI purposes. UI Flows enable you to build reusable, multi-platform user interfaces that work across web (Angular/React), iOS, and Android applications. They separate UI definitions from process logic, providing a lightweight alternative to full BPMN processes for use cases that don’t require complex business orchestration.

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 for task management capabilities

UI Flows revolutionize how you build applications by allowing you to create a UI once and deploy it across all platforms, dramatically reducing development time and ensuring consistent user experiences.

Key characteristics

Characteristic	Description
Project Resource	UI Flows are managed as independent project resources, separate from process definitions
UI Designer	Configure UI Flows using the familiar UI Designer interface with some behavioral changes
Navigation Areas	Configure the entire user journey from UI Designer, where navigation areas are added as UI assets
Components	Use all available components, substitution tags, media items, and enumerations
Theme Support	Full theme support is available for UI Flows
Data Model	UI Flows have their own data model that you can configure and use
FLX UI Flow Component	A dedicated FLX component (`flx-ui-flow`) similar to the process renderer, which can be embedded anywhere in your application
Custom Components	Add custom components to UI Flows for extended functionality

Platform-Specific Design: When creating a UI Flow, you select a platform (web or mobile). Once created for a specific platform, the UI Flow remains tied to that platform, as the UI experience is expected to be significantly different between platforms.

When to use UI Flows

Use UI Flows for

UI Flows are ideal for scenarios that need a user interface but don’t require the complexity of 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

Application 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

Processes remain the best choice for complex business scenarios:

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

Create UI Flows as the main application shell and use Start Process UI Actions to launch business processes when needed, keeping your architecture clean and maintainable.

Example architecture:

UI Flow provides the home screen, navigation, and dashboard
User clicks “Apply for Loan” → Start Process UI Action launches the loan application 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

UI Flows as project resources

UI Flows are managed as independent project resources, separate from process definitions. This enables:

Independent lifecycle management
Import/export across environments
Reuse across multiple applications
No dependency on process execution

FLX UI Flow component

A dedicated FLX component (flx-ui-flow) is used to render UI Flows, similar to how the process renderer works. This component:

Can be embedded anywhere in your application
Works across web, iOS, and Android platforms
Handles navigation and routing automatically
Integrates with the FlowX platform

Design structured navigation within UI Flows Designer:

Create pages and navigation flows
Configure navigation areas with different types
Setup header and footer zones (web only)
Define home pages with automatic navigation icons

Start Process UI Action

Launch FlowX processes directly from UI Flows to bridge UI and business logic:

Start processes on button clicks or events
Pass data from UI Flow to process
Maintain clean separation between UI and business logic
Return to UI Flow after process completion

Navigate To UI Action

Setup navigation within UI Flows for a better user experience:

Navigate to specific Navigation Areas
Scroll to Container elements
Create multi-step wizards
Build complex navigation flows

Task Manager component

Embed Task Manager directly in UI Flows:

Display task lists within your UI Flow
Filter and search tasks
Launch tasks in context
Provide unified task management experience

Platform-specific configurations

Configure UI behavior for each platform:

Web: Full feature support with all component types
iOS: Mobile-optimized with VoiceOver accessibility
Android: Material design with TalkBack accessibility
Override properties per platform as needed

Home page support

Create UI Flows with dedicated home pages:

Designate any page as the home page
Automatic home icon in navigation
Quick return to home from anywhere
Better UX for mobile applications

Import/Export

Share UI Flows across environments:

Export UI Flows as portable packages
Import into different projects or environments
Maintain consistency across environments
Accelerate deployment

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.

Click Add Resource → UI Flow
Enter a name and description
Select initial platform (Web, iOS, Android)

Design navigation structure

Open UI Flows Designer and manage Navigation Areas:

Add Navigation Areas (pages)
Configure navigation type (Single Page, Wizard, etc.)
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
Custom Actions: Configure other UI interactions

Configure platforms

Set platform-specific configurations:

Switch between Web, iOS, Android tabs
Override properties for specific platforms
Test preview on each platform
Configure accessibility properties for mobile

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.

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

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

Configuring Navigate To UI Action

The Navigate To UI Action enables navigation within UI Flows and scrolling to specific elements. This action ensures navigation between root navigation areas inside the UI Flow.

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

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

Task Manager is added as a UI Component in UI Flows, allowing you to showcase task management capabilities in a simple UI interface.

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

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
Navigation Areas with zones (header, content, footer)
Full wizard and single-page navigation
Task Manager component integration

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 maximum reusability across multiple applications

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

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 slices 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

​UI Flows as project resources

​FLX UI Flow component

​Navigation Areas management

​Start Process UI Action

​Navigate To UI Action

​Task Manager component

​Platform-specific configurations

​Home page support

​Import/Export

​Creating a UI Flow

​Configuring Start Process UI Action

​Configuring Navigate To UI Action

​Navigate to Navigation Area

​Scroll to Container

​Embedding Task Manager

​Routing

​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

UI Flows as project resources

FLX UI Flow component

Navigation Areas management

Start Process UI Action

Navigate To UI Action

Task Manager component

Platform-specific configurations

Home page support

Import/Export

Creating a UI Flow

Configuring Start Process UI Action

Configuring Navigate To UI Action

Navigate to Navigation Area

Scroll to Container

Embedding Task Manager

Routing

Platform considerations

Best practices

Architecture

Design

Migration from subprocess-based navigation

Limitations and compatibility

Current limitations

Future enhancements

Troubleshooting

Related resources