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:
- Using themes
- Creating a custom theme
- Creating a basic container
- Creating a custom component
- Overriding a default component
- Custom style for components
- The three states of custom components
- Components : Client side validation
- Enabling client side validation
- Custom validation of components