.label-version {
    display: inline-block;
    font-weight: bold;
    color: #ffffff;
    background-color: #007bff; /* A calm blue color */
    padding: 0.5px 15px;
    border-radius: 12px;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
    font-size: 0.9em;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    margin-right: 5px;
    transition: background-color 0.3s ease;
    text-decoration: none; /* Remove underline from link */
}

.label-version:hover {
    background-color: #0056b3; /* Darker blue on hover */
}


File preview properties (web)

File preview properties (mobile)

Android

File preview styling

Sizing

Configuring a File preview element

File Preview example

Docs

Release notes

SDKs

Setup guides

Requests

Academy

Support

Community

The File Preview UI element is a user interface component that enables users to preview the contents of files quickly and easily without fully opening them. It can save time and enhance productivity, providing a glimpse of what's inside a file without having to launch it entirely.

File preview

FlowX.AI is an AI multi-experience development platform that sits on top of legacy systems and creates unified, scalable digital experiences.

Introduction

Let's explore how to build innovative solutions with FlowX.AI.

Building with FlowX.AI

Based on what you need to accomplish and understand, find below-suggested tracks you can follow. Choose the track that suits you best.

Learn more

FlowX.AI architecture

The FlowX.AI Designer is a collaborative, no-code, web-based application development environment, designed to facilitate the creation of web and mobile applications without the need for coding expertise.

FlowX.AI Designer

Theme management feature enables you to easily change the appearance and styling of your application. You can personalize the look and feel of your application to your branding, preferences, or specific requirements.

Themes

Fonts management allows you to upload and manage multiple font files, which can be later utilized when configuring UI templates using the UI Designer.

Fonts

System assets serve as a centralized hub for managing and organizing various types of media files outside an application, used on themes, including images, GIFs, and more.

System assets

The first step of defining your business process in the FlowX.AI Designer is adding a new process definition for it.

Creating a new process definition

Once you create a new process definition, you can start configuring it by adding new nodes.

Adding a new node

We use actions to add business decisions to the flow or link the process to custom integrations and plugins.

Adding an action to a node

To add business decisions in the flow and use them to pick between a flow branch or another, we can use exclusive gateways.

Handling decisions in the flow

Adding more flow branches

Creating a user interface

Back in steps is a functionality that allows you to go back in a business process redo a series of previous actions in the process.

Moving a token backwards in a process

To export process definitions versions and move them between different environments, you can use the export version/ import process feature.

Exporting / importing a process definition version

Entering the realm of FlowxX unlocks a spectrum of possibilities for elevating processes and workflows. From automation to data-driven decision-making, several straightforward approaches pave the way for leveraging this platform efficiently. Let's delve into the ways to kickstart a process.

Initiating processes

Overview of Global and Application Resources, including their usage, dependencies, promotion, and configuration within the platform.

Resources

Applications group all resources and dependencies needed to implement an use case.

Applications

Libraries are specialized projects that serve as reusable containers for resources that can be shared across multiple applications.

Libraries

The Build feature allows for the creation of deployable packages of an application, encapsulating all its resources into a single unit.

Builds

The Active policy defines the strategy for selecting which build version of an application is active in the runtime environment.

Active policy

The Configuration parameters overrides feature allows you to set environment-specific values for certain parameters within an application.

Configuration parameters overrides

The Process Designer workspace is tailored for creating and editing business processes, featuring a menu with all the essential elements needed to design a process.

Process Designer

The core of the platform is the process definition, which is the blueprint of the business process made up of nodes that are linked by sequences.

Process definition

In the Data Model, you can add new key-pair values, which enables you to use shortcuts when adding new keys using the UI Designer, without having to switch back and forth between menus.

Data model

Learn how to configure, start, and execute subprocesses efficiently within your process flow.

Subprocess management

With versioning, you can easily track your process definition's evolution.

Versioning

Navigation areas play a pivotal role in user interface design. They enhance the user experience by providing a structured, organized, and efficient way for users to interact with and explore various features and solutions.

Navigation areas

A Business Process Model and Notation (BPMN) node is a visual representation of a point in your process. Nodes are added at specific process points to denote the entrance or transition of a record within the process.

BPMN nodes

Let's go through all the options for configuring start and end nodes for a process definition.

Start/end nodes

Send message task and Receive message task nodes are used to handle the interaction between a running process and external systems. This is done using Kafka.

Send message/receive message tasks

A task node refers to a task that utilizes various services, such as Web services, automated applications, or other similar services, to accomplish a particular task.

Task node

This node represents an interaction with the user. It is used to display a piece of UI (defined in the UI Designer or a custom Angular component. You can also define actions available for the users to interact with the process.

User task node

In the world of process flows, decisions play a crucial role, and that's where the Exclusive Gateway comes into play. This powerful tool enables you to create conditional pathways with ease.

Exclusive gateway

When you have multiple operations that can be executed concurrently, the Parallel Gateway becomes a valuable tool. This type of node creates a parallel section within the process, particularly useful for tasks that can run independently without waiting for each other. It's essential to close each parallel section with another Parallel Gateway node.

Parallel gateway

Error Events expand the capabilities of process modeling and error handling within BPMN processing. These Error Event nodes enhance the BPMN standard and offer improved control over error management.

Error events

The activity that a node has to handle is defined using an action. These can have various types, they can be used to specify the communication details for plugins or integrations.

Node actions

Send data to user interface action is based on Server-Sent Events (SSE), a web technology that enables servers to push real-time updates or events to clients over a single, long-lived HTTP connection. It provides a unidirectional communication channel from the server to the client, allowing the server to send updates to the client without the need for the client to continuously make requests.

Send data to user interface

An Upload File action is an action type that allows you to upload a file to a service available on Kafka.

Upload file action

A Start subprocess action is an action that allows you to start a subprocess from another (parent) process.

Start subprocess action

It is a type of action that allows you to send data from a subprocess to a parent process.

Append params to parent process

The FlowX Designer offers various options to configure the Kafka Send Action through the Actions tab at the node level.

Kafka send action

The Start Integration Workflow action initiates a configured workflow to enable data processing, transformation, or other tasks across connected systems.

Start integration workflow action

The FlowX platform offers a variety of ready-to-use UI components that can be used to create rich web interfaces. These include common form elements like input fields, dynamic dropdown menus, checkboxes, radio and switch buttons, as well as other UI elements like image, text, anchor links, etc. The properties of each component can be customized further using the details tab, and design flexibility is achieved by adding styles or CSS classes to the pre-defined components. The UI templates are built in a hierarchical structure, with a root component at the top.

UI Designer

There are two types of buttons available, each with a different purpose.

Buttons

The Table component is a versatile UI element allowing structured data display with customizable columns, pagination, filtering, and styling options.

Table

Image UI elements are graphical components of a user interface that display a static or dynamic visual representation of an object, concept, or content.

Image

The indicators (Message UI elements) allow you to display different types of messages.

Indicators

Typography is an important aspect of design that greatly influences how users perceive and interact with your content. In this section, we'll explore how to effectively utilize two essential UI elements, "Text" and "Link."

Typography

Multiple UI elements can be linked to a specific action via a UI action. If the action is just a method to interact with the process, the UI Action adds information about how that UI should react. For example, should a loader appear after executing the action, should a modal be dismissed, or if some default data should be sent back to the process.

UI actions

Validators are an essential part of building robust and reliable applications. They ensure that the data entered by the user is accurate, complete, and consistent. In Angular applications, validators provide a set of pre-defined validation rules that can be used to validate various form inputs such as text fields, number fields, email fields, date fields, and more.

Validators

In modern application development, the ability to create dynamic and interactive user interfaces is essential for delivering personalized and responsive experiences to users. Dynamic values and computed values are powerful features that enable developers to achieve this level of flexibility and interactivity.

Dynamic & computed values

FlowX localization and internationalization adapt applications to different languages, regions, and formats, enhancing the user experience with dynamic date, number and currency formatting.

Localization and internationalization

Layout settings are available for all components that can group other types of elements (for example, Containers or Cards).

Layout configuration

Token is the concept that describes the current position in the process flow. When you start the process you have a graph of nodes and based on the configuration you will go from one to another based on the defined sequence (connection between nodes).

Token

Scripts are used to define and run actions but also properties inside nodes. For now, the following script languages are supported.

Supported scripts

The engine is the core of the platform, it is the service that runs instances of the process definitions, generates UI, communicates with the frontend and also with custom integrations and plugins. It keeps track of all currently running process instances and makes sure the process flows run correctly.

FlowX.AI Engine

The Advancing Controller is a support service for the FlowX.AI Engine that enhances the efficiency of advancing operations. It facilitates equal distribution and redistribution of the workload during scale-up and scale-down scenarios.

FlowX.AI Advancing Controller

The FlowX Events Gateway is a service that centralizes the communication with Server-Sent Events (SSE) messages from Backend to Frontend.

FlowX.AI Events Gateway

Generic parameters are variables or settings that are used to control the behavior of a software application or system. These parameters are designed to be flexible and adaptable, allowing users to customize the software to their specific needs.

Generic parameters

The License Engine is part of the core extensions of the FlowX.AI platform. It is used for displaying reports regarding the usage of the platform in the FlowX.AI Designer.

FlowX.AI License Engine

The Audit service provides a centralized location for all audit events. The following details are available for each event.

FlowX.AI Audit

The Scheduler is part of the core extensions of the FlowX.AI platform. It can be easily added to your custom FlowX deployment to enhance the core platform capabilities with functionality specific to scheduling messages.

FlowX.AI Scheduler

The Data Search service is a microservice that enables data searches within other processes. It facilitates the creation of processes capable of conducting searches and retrieving data by utilizing Kafka actions in tandem with Elasticsearch mechanisms.

FlowX.AI Data Search

Adding new capabilities to the core platform can be easily done by using plugins. FlowX plugins represent already-built functionality that can be added to a FlowX.AI platform deployment.

FlowX custom plugins

You can add a language and use it in document and notification templates.

Languages

The OCR (Optical Character Recognition) plugin is a powerful tool that enables you to read barcodes and extract handwritten signatures from .pdf documents with ease.

OCR plugin

Get ready to revolutionize your journey with our upcoming AI-powered agents.

FlowX AI Agents

FlowX Designer's WYSIWYG ("What You See Is What You Get") editor enables you to create and modify notification and document templates without the need for complicated coding from the developers. WYSIWYG editors make the creation/editing of any type of document or notification easier for the end-user.

WYSIWYG editor

Integrations play a crucial role in connecting legacy systems or third-party applications to the FlowX Engine. They enable seamless communication by leveraging custom code and the Kafka messaging system.

Overview

The Integration Designer simplifies the integration of FlowX with external systems using REST APIs. It offers a user-friendly graphical interface with intuitive drag-and-drop functionality for defining data models, orchestrating workflows, and configuring system endpoints.

Integration Designer

Connectors are the vital gateway to enhancing FlowX.AI's capabilities. They seamlessly integrate external systems, introducing new functionalities by operating as independently deployable, self-contained microservices.

This guide focuses on creating a **Kafka** consumer using Spring Boot.

Creating a Kafka consumer

This guide focuses on creating a **Kafka** producer using Spring Boot.

Creating a Kafka producer

If you need to test the business process flow but haven't completed all integrations, you can still do so by utilizing the mock integrations server included in the platform.

Mock integrations

Observability with OpenTelemetry

FlowX.AI uses a number of third-party software components

Third-party components

Swimlanes provide a way of grouping process nodes by process participants.

Swimlanes

An optional attribute, from the authorization token, that can be set in order to restrict access to process instances based on a business specific value (ex. bank branch name).

Business filters

Process status

Start process

Start process and inherit values

Execute action

To enable and to compute warnings for already existing processes from previous FlowX versions (< 4.1), you must use the following endpoint to compute all the warnings.

Enable misconfigurations

The Documents Plugin provides the following REST API endpoints for interacting with the stored files.

List buckets

List objects in a bucket

Download a file

Add new Kafka exchange mock

View Kafka exchanges

FLOWX.AI provides web and native mobile SDKs. These SDKs enable developers to create applications that can be displayed in a browser, embedded in an internet banking interface, or in a mobile banking app. The SDKs automatically generate the user interface (UI) based on the business process and data points created by a business analyst, reducing the need for UX/UI expertise.

SDKs overview

FlowxProcessRenderer is a low code library designed to render UI configured via the Flowx Process Editor.

Angular SDK

The FlowxProcessRenderer is a low code library designed to render UI configured via the Flowx Process Editor.

React SDK

iOS SDK

Android SDK

Deploying microservices involves breaking down an application into smaller, modular components that can be independently deployed. Each microservice should include all necessary dependencies and configurations to ensure smooth and reliable operation.

This guide provides instructions on how to set up and configure the FlowX.AI Engine to meet specific requirements.

FlowX Engine setup

Configuring access roles for processes

Improving data management using data partitioning and the archival processes.

Partitioning & archiving

The Application Manager is a backend microservice for managing FlowX applications, libraries, versions, manifests, configurations, and builds. This guide provides detailed instructions for setting up the service and configuring its components to manage application-related operations effectively.

Getting Started

Platform overview

Building blocks

FlowX.AI Designer

Platform deep dive

API reference

File preview

Configuring a File preview element

File preview properties (web)

File preview properties (mobile)

iOS

Android

File preview styling

Sizing

File Preview example

Getting Started

Platform overview

Building blocks

FlowX.AI Designer

Platform deep dive

API reference

​Configuring a File preview element

​File preview properties (web)

​File preview properties (mobile)

​iOS

​Android

​File preview styling

​Sizing

​File Preview example

Configuring a File preview element

File preview properties (web)

File preview properties (mobile)

iOS

Android

File preview styling

Sizing

File Preview example