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:


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


Helpers for handling authorization, like for OAuth or SAML.


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


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


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


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.


Helpers for constructing Ajax request bodies.


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


Wrapper for log-level.


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.


Store for the various settings in the framework.


Request and response handling for the social feed.


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.


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


Handles applying custom themes at runtime.


Various utilities and helper functions.

Also see: