.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 */
}


Stepper

Tab bar

Page

Modal

Zone

Navigation areas

Container

Card

Form

File preview

Collection

UI components

Docs

Release notes

SDKs

Setup guides

Requests

Academy

Support

Community

This log outlines the changes in component styles and props from v4.0 to v4.1.

Components change log v4.1

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

A process instance is a specific execution of a business process that is defined on the FlowX.AI platform. Once a process definition is added to the platform, it can be executed, monitored, and optimized by creating an instance of the definition.

Process instance

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.

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

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

Layout settings will be 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 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

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

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

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

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.

Web SDK (Angular renderer)

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

This guide provides step-by-step instructions to help you configure and deploy the Advancing Controller effectively.

FlowX Advancing Controller setup

To set up FlowX Designer in your environment, follow this guide.

FlowX Designer

The FlowX.AI Admin microservice manages process-related entities and provides the REST API used by the FlowX.AI Designer. The processes defined here will be handled by the FlowX.AI Engine. The Admin microservice uses most of the same resources as the FlowX.AI Engine.

FlowX Admin setup

The CMS service is a microservice that allows managing taxonomies and contents. It is available as a Docker image and is designed to make it easy to edit and analyze content. This guide will walk you through the process of setting up the service and configuring it to meet your needs.

FlowX CMS setup

This guide will walk you through the process of setting up the Scheduler service.

Scheduler setup

This guide will walk you through the process of setting up the events-gateway service.

FlowX Events Gateway setup

This guide will walk you through the process of setting up the Audit service and configuring it to meet your needs.

Audit setup

This guide will walk you through the process of setting up the Data Search service using a Docker image.

FlowX Data Search setup

The License Engine is a service that can be set up using a Docker image. This guide will walk you through the process of setting up the License service and configuring it to meet your needs.

License Engine setup

To set up a plugin in your environment, you must go through the next steps.

Plugins setup

The Documents plugin provides functionality for generating, persisting, combining, and manipulating documents within the FlowX.AI system.

Documents plugin setup

The Notifications plugin is available as a docker image, and it has the following dependencies.

Notifications plugin setup

The plugin is available as a docker image.

Task management setup

The OCR plugin is a docker image that can be deployed using the following infrastructure prerequisites.

Release Notes

​Navigation areas

​Stepper

​Tab bar

​Page

​Modal

​Zone

​UI components

​Container

​Card

​Form

​File preview

File preview

​Collection

Navigation areas

Stepper

Tab bar

Page

Modal

Zone

UI components

Container

Card

Form

File preview

Collection