Understanding the Flow UI framework

The Flow UI framework primarily consists of two types of script files: Components and Services.

1. Components

Components let us split our app UI into independent, reusable pieces. Components determine what should be rendered for a given piece of metadata; for example, a metadata item with a componentType of Table will be rendered using the Table component. We can customize existing components, or create entirely new ones.

2. Services

Service integrations handle everything not directly related to rendering components. For example, parsing metadata sent from Flow, sending data back to Flow, near-realtime collaboration, etc.

What else?

We may want to know about the following:

Ajax

Helpers for sending requests to Flow. For example: Initialize, join, invoke, etc.

Authorization

Helpers for handling authorization, like for OAuth or SAML.

Callbacks

Store for callbacks that should be executed when a certain response type is received, for example: DONE.

Collaboration

Wrapper of socket.io for syncing flow state across multiple clients in realtime.

Component

Store for registering components into the framework, also some helpers with DOM interaction. For example: Append the root Flow container DOM element.

Engine

The workhorse of the framework that brings together all the other services to perform the heavy lifting. If we need to progress or sync a flow, or re-render the UI, this is where we will look.

JSON

Helpers for constructing Ajax request bodies.

Loader

The initial bootstrapper that injects the latest version of the UI assets.

Log

Wrapper for log-level.

Model

Store for the current state of the app received from Flow. Metadata responses are parsed in here into a format that the various components can render.

Settings

Store for the various settings in the framework.

Social

Request and response handling for the social feed.

State

Store for the current local state of the flow. Changes made to the local state will be synced between clients, but not back to Flow until the flow is progressed or synced.

Styling

Store for registering and getting custom class names for each component type.

Themes

Handles applying custom themes at runtime.

Utils

Various utilities and helper functions.

Also see:


Check out the glossary for a definition of terms and key concepts that appear in the Boomi Flow website, drawing tool, technical documentation, blogs, and marketing communications.

If you need to take a closer look, click on the images to enlarge them. Have a question? Click the Help button on the bottom right-hand corner of this page to ask.