Reusable UI Templates let you create UI components once and use them across multiple User Tasks and processes. This approach eliminates repetitive styling work, reduces manual component updates, and provides centralized template management.

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 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
  • UI actions: 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 Designer
  • Appropriate permissions to create and manage reusable resources
  • A clear understanding of the UI pattern you want to standardize

Create a reusable template

1

Access template management

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

Configure basic settings

  1. Enter a descriptive name for your template (required)
    • Example: “Personal Details Card” for user information display
  2. Add an optional description explaining the template’s purpose
  3. Choose your root component type:
    • Card: Best for content needing visual separation and styling
    • Container: Ideal for layout and grouping without visual styling
    • Custom Component: Use for specialized components with custom behavior
  4. Configure the data model with input and output parameters
3

Design the UI hierarchy

Use the template UI designer to build your component structure:
Root Component (Card/Container/Custom)
├── 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.
4

Configure UI actions (optional)

Define interactive elements within your template:
  • Define UI actions within the reusable template
  • Assign node actions when instantiated in User Tasks
  • Use for standard actions like “Save”, “Submit”, or “Cancel”
5

Test your template

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

Use templates in User Tasks

After creating a reusable template, you can add it to your User Task interfaces.

Add a template to a User Task

  1. Open the UI Designer for a User Task
  2. In the component panel, locate Reusable Templates
  3. Drag and drop your desired template into the UI hierarchy
  4. Configure instance-specific properties as needed

Template integration

When you add a reusable template to a User Task, the system creates a new UI template with the REUSABLE_TEMPLATE component identifier:
Template integration example
{
  "id": 123456789,
  "flowxUuid": "uuid-string",
  "componentIdentifier": "REUSABLE_TEMPLATE",
  "type": "FLOWX",
  "reusableUiTemplateContext": "instance-context-uuid",
  "reusableUiTemplateFlowxUuid": "template-uuid",
  "navigationAreaId": 96777851,
  "nodeDefinitionId": 1443167
}

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 UI actions and data bindings

Manage templates

View template usage

To see where a template is used:
  1. Go to Reusable Resources > Templates
  2. Select your template
  3. Click the Usages tab
  4. 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:

UI actions in templates

Current capabilities

UI actions 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

How it works:
  1. Define a UI action within the reusable template
  2. Assign the node action when instantiated in a User Task
  3. Use for standard actions needing different backend connections
Best for: “Save”, “Submit”, or “Cancel” actions that need process-specific handling

Current limitations

  • Data model: Input/output parameters are not yet fully available
  • Complex validation: Advanced data validation scenarios are limited
  • Cross-template actions: Actions cannot span multiple template instances
  • Template nesting: Cannot use reusable templates inside other reusable templates

Best practices

Design principles

Organization strategies

  • Group related templates: Organize templates by business domain or UI pattern type
  • Use consistent naming: Establish naming conventions that make templates easy to find
  • Document thoroughly: Include clear descriptions and usage guidelines for each template
  • Version carefully: Use project versioning to manage template changes safely

Performance considerations

  • Keep hierarchies flat: Avoid deeply nested component structures that might impact rendering performance
  • Optimize resources: Use efficient media and enumeration references
  • Design efficient actions: Create UI actions that perform well across different contexts
  • Use efficient data binding: Choose data binding patterns that minimize processing overhead

Troubleshooting

Common issues

Debugging tools

The FlowX platform provides several debugging capabilities:
  • Template Inspector: Examine template structure and properties in detail
  • Action Debugger: Trace UI action execution and identify issues
  • Data Viewer: Monitor data flow and binding between templates and processes
  • Error Console: View template-related errors and warnings with detailed messages

Important distinctions

Reusable UI Templates vs. Reusable Functions

Understanding the difference between these two reusable components is crucial:
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

Key separation points

  • No cross-compatibility: UI templates and business functions cannot be used together
  • Different contexts: UI templates work in the UI Designer; functions work in Service Tasks
  • Distinct functionality: Each serves a specific purpose in the FlowX architecture
  • Separate management: Each type of component is managed independently

When to use templates

Use Reusable UI Templates for:
  • Standardizing form layouts and input patterns
  • Creating consistent card designs and information displays
  • Building reusable navigation components
  • Establishing standard button and action layouts
Don’t use templates for:
  • Business logic or data processing
  • Complex calculations or validations
  • API integrations or external system calls
  • Process workflow automation

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

Current capabilities

Template testing:
  • Preview mode for isolated template rendering
  • Design validation for component hierarchy
  • Style testing with different themes
Integration support:
  • Standard FlowX UI components
  • Automatic theme application
  • Project resource access (enumerations, media, substitution tags)