Reusable UI Templates

What are Reusable UI Templates?

Reusable UI Templates are self-contained UI component hierarchies that you design once and instantiate multiple times throughout your application. They solve common UI development challenges:

Repetitive styling: No more redoing component styles and properties for similar UI patterns
Manual updates: Reduce the need to manually change components across multiple locations
Template management: Centralized configuration and management of UI templates

Reusable UI Templates focus on visual components and layout. They cannot include reusable business rules or complex business logic.

Key benefits

Consistency

Ensure uniform UI patterns across your entire application

Efficiency

Design once and use many times - no more recreating similar patterns

Maintainability

Update templates in one place to affect all instances automatically

Omnichannel support

Templates work across different platforms and channels

Template types

FlowX.AI supports two main types of reusable UI templates:

Dynamic Templates (with inputs)
Static Templates (without inputs)

Characteristics:

Include input parameters that receive data from the process
Support output parameters that send data back to the process
Contextualized based on runtime data
Ideal for forms and data-driven interfaces

Use cases: User registration forms, data collection cards, feedback forms

Template structure

A reusable template consists of:

Root component: A single container (Card, Container, or Custom Component)
UI hierarchy: Child components arranged in a hierarchical structure
Event handlers: Interactive elements that can trigger process actions
Data model: Input and output parameters for template configuration
Configuration: Name, description, and resource metadata

Before you begin

Make sure you have:

Access to FlowX.AI Designer
Appropriate permissions to create and manage reusable resources
A clear understanding of the UI pattern you want to standardize

Create a reusable template

Access template management

In FlowX.AI Designer, go to your project
Navigate to Reusable Resources > Templates
Click + New Reusable Template

Configure basic settings

Enter a descriptive name for your template (required)
Template names cannot contain spaces. Use UpperCamelCase or underscores instead.
- ✅ Good: PersonalDetailsCard, User_Registration_Form
- ❌ Avoid: Personal Details Card, user-form

Add an optional description explaining the template’s purpose
Choose your root component type:
- Card: Best for content needing visual separation and styling
- Container: Ideal for layout and grouping without visual styling
Configure the data model with input and output parameters

Define the data model

The template data model defines the internal data structure that the template uses to exchange data with the process — which fields the template receives as input and which it sends back as output. It is separate from the process data model and scoped only to this template.

If you’re unfamiliar with how data models work in FlowX, see the Process data model documentation.

Set up the internal data structure that your template will use:

Set the root element (e.g., applicationUI)
Define field attributes with appropriate data types:

Example: Personal Details Template

applicationUI:
├── firstName_UI – string
├── lastName_UI – string  
├── emailAddress_UI – string
├── phoneNumber_UI – string
├── dob_UI – date
├── gender_UI – string
├── consent_UI – boolean
└── ssn – string

Use descriptive field names with consistent naming patterns (e.g., fieldName_UI) to clearly identify template-specific data.

Configure input and output parameters

Define the data contract between your template and the process:Input Parameters:

Data that flows INTO the template from the process
Example: ssn (pre-filled from existing process data)

Output Parameters:

Data that flows OUT of the template back to the process
Example: firstName_UI, lastName_UI, emailAddress_UI, phoneNumber_UI, dob_UI, gender_UI, consent_UI

Parameters control data flow only. They don’t determine field visibility or editability - you can still edit input parameter fields unless explicitly made read-only.

Once parameters are defined, click Done to establish the template’s data contract.

Design the UI hierarchy

Use the template UI designer to build your component structure:

Root Component (Card/Container)
├── UI Components (Text, Input, Button, etc.)
├── Layout Components (Containers, Flex containers)
└── Interactive Components (Forms, Actions)

The template UI designer focuses on screen parts without navigation concepts or process-related navigation.

Configure event handlers (optional)

Define interactive elements within your template:

Template-defined actions
Form-centric actions

Define event handlers within the reusable template
Assign node actions when instantiated in User Tasks
Use for standard actions like “Save”, “Submit”, or “Cancel”

Test your template

Use Preview Mode to see how your template renders
Verify component hierarchy and basic functionality
Test with different themes and configurations
Save your template when testing is successful

Preview Mode provides visual-only testing. Templates are not functional until embedded in a live process with proper parameter mapping.

Use templates in User Tasks

To integrate reusable templates into your processes, follow this complete workflow:

Prerequisites: Set up data models

Configure Project Data Model

In your project, define the main entity (e.g., Application)
Add child objects that match your template structure (e.g., Client)
Include all fields from your template’s data model:
- firstName, lastName, emailAddress
- phoneNumber, dob, gender, consent, ssn

Configure Process Data Model

Reference the project entity in your process
Select application as the root entity
Include Client as a child object
The data model will automatically populate with the correct entities

Add and configure templates

Add template to User Task

Open the UI Designer for your User Task
In the component panel, locate Reusable Templates
Drag and drop your desired template into the UI hierarchy
The template will appear with red warning icons indicating unmapped parameters

Map input parameters

Select the template instance in the UI hierarchy
Navigate to the template settings panel
Click Define Parameters for Input Parameters
Map each input to process data using dynamic keys: Example mapping:
Static value: "123-45-6789" Dynamic key: ${application.client.ssn}
Use dynamic keys like ${application.client.fieldName} to pull data from your process context automatically.

Map output parameters

Click Define Parameters for Output Parameters
Select all fields that should return data to the process

Map each output to the corresponding process data structure: Example mappings:

applicationUI.firstName_UI → ${application.client.firstName}
applicationUI.lastName_UI → ${application.client.lastName}
applicationUI.emailAddress_UI → ${application.client.emailAddress}

Test the parameter mappings to ensure data flows correctly

Connect template actions to process

Define process action: In Process Designer, create a node action (e.g., saveData)
Link to template: Return to UI Designer, select the action button within the template
Configure the handler: In the Event Handlers section, add a handler with Node Action as the action type and select your node action
FlowX.AI automatically fills in the action identifier and establishes the connection

Runtime behavior

At runtime, the process engine expands reusable templates by:

Replacing the REUSABLE_TEMPLATE placeholder with the actual component hierarchy
Maintaining proper parent-child relationships
Ensuring unique identifiers for each instance
Preserving configured event handlers and data bindings

Manage templates

View template usage

To see where a template is used:

Go to Reusable Resources > Templates
Select your template
Click the Usages tab
Review all processes and User Tasks using the template

Update templates

When you modify a reusable template:

Changes automatically propagate to all instances
Existing process instances may need to restart for updates
Instance-specific configurations are preserved
The system validates changes to prevent breaking existing implementations

Template updates affect all instances immediately. Test changes thoroughly before saving to avoid disrupting active processes.

Template dependencies

Reusable templates can reference these project resources:

Enumerations

Use for dropdown menus and selection components within your templates

Media items

Include images, documents, and other media assets in your templates

Substitution tags

Add dynamic content that updates based on process context

Themes

Apply consistent styling across all template instances

Event handlers in templates

Current capabilities

Event handlers in reusable templates support basic interactive functionality. The system handles:

Action context management: Unique identification for template instances
Form submission: Automatic identification of form elements within template context
Data mapping: Proper mapping of data keys to process variables
Validation preservation: Template validation rules are maintained across instances

Planned scenarios

Template-defined actions
Form-centric actions

How it works:

Define an event handler within the reusable template
Assign the node action when instantiated in a User Task
Use for standard actions needing different backend connections

Best for: “Save”, “Submit”, or “Cancel” actions that need process-specific handling

Reusable UI Templates are designed as self-contained components and do not support nesting within other reusable templates

Troubleshooting

Template not displaying

Possible causes:

Invalid template hierarchy
Missing dependencies (enumerations, media, themes)
Insufficient permissions
Invalid component configurations

Solutions:

Verify template structure in the designer
Check all referenced resources exist
Confirm user permissions for template access
Validate component property settings

Event handlers not working

Possible causes:

Incorrect action context configuration
Invalid form submission setup
Data model compatibility issues
Missing action permissions

Solutions:

Verify action context is properly set
Check form submission configuration
Ensure data models match between template and process
Review user permissions for action execution

Data binding issues

Possible causes:

Invalid key mappings in template instances
Mismatched process data model structure
Data type incompatibilities
Incorrect substitution tag usage

Solutions:

Validate key mappings match expected data structure
Check process data model compatibility
Ensure data types align between components and data sources
Review substitution tag configurations

Reusable UI Templates vs. Reusable Functions

Understanding the difference between these two reusable components is crucial:

Reusable UI Templates
Reusable Functions

Purpose: UI Designer components for creating reusable interface elementsScope:

Visual components and layout
Styling and basic UI interactions
Form structure and input patterns

Usage context: User Tasks and interface designCannot: Include reusable business rules or complex business logic

Advanced features

Planned enhancements

Template nesting

Future support for using templates within other templates for enhanced modularity

Enhanced data model

Input and output parameters with function-like behavior and type safety

Advanced testing

Mock data testing and interactive validation capabilities

Cross-project sharing

Export/import templates and library dependency management

Export and import

You can export and import reusable UI templates to transfer them between projects or environments.

Exporting

Navigate to Reusable Resources > UI Templates
Open the context menu for the template you want to export
Select Export
The template is downloaded as a ZIP file

Importing

Navigate to Reusable Resources > UI Templates
Open the context menu and select Import
Select the ZIP file exported from another project or environment
If templates with the same identifiers already exist, a Review Resource Identifiers Conflicts modal appears
Choose a strategy for each conflicting template (or use Apply to all):
- Keep both - imports the template as a new copy alongside the existing one
- Replace - overwrites the existing template with the imported version
- Skip this one - keeps the existing template unchanged
Click Continue to complete the import

Importing is only available for work-in-progress (WIP) project versions. You cannot import into a committed version.

​What are Reusable UI Templates?

​Key benefits

Consistency

Efficiency

Maintainability

Omnichannel support

​Template types

​Template structure

​Before you begin

​Create a reusable template

​Use templates in User Tasks

​Prerequisites: Set up data models

​Add and configure templates

​Runtime behavior

​Manage templates

​View template usage

​Update templates

​Template dependencies

​Event handlers in templates

​Current capabilities

​Planned scenarios

​Troubleshooting

​Reusable UI Templates vs. Reusable Functions

​Advanced features

​Planned enhancements

Template nesting

Enhanced data model

Advanced testing

Cross-project sharing

​Export and import

​Exporting

​Importing

What are Reusable UI Templates?

Key benefits

Template types

Template structure

Before you begin

Create a reusable template

Use templates in User Tasks

Prerequisites: Set up data models

Add and configure templates

Runtime behavior

Manage templates

View template usage

Update templates

Template dependencies

Event handlers in templates

Current capabilities

Planned scenarios

Troubleshooting

Reusable UI Templates vs. Reusable Functions

Advanced features

Planned enhancements

Export and import

Exporting

Importing