Editor’s Note: UnofficialSF is pleased to enable commercial creators of Flow extensions like Common-Unite to introduce their products and demonstrate useful use cases. One of our goals is to see a rich tier of commercial solutions in addition to the many free extensions that will continue to be available.

Content provided by Common-Unite

The Flow Took Kit (Form and Table Builder) app is a 100% Salesforce native tool that enables you and your team to create custom Flow Screen components declaratively, with clicks, not code. These custom components leverage the power of Flow, instead of Apex, to control your component’s processes and actions. By combining Flow and the Flow Tool Kit, your team can create advanced interfaces, forms, surveys, or wizards for both internal and external users. Reducing your team’s development time, cost, or reliance on external form builder solutions.

What sets the Flow Tool Kit apart?

The Flow Tool Kit is 100% built to leverage the power of Salesforce Flow. Our custom components and features, such as live formula recalculation, modular/reusable components, and the Form (Repeater), will allow your team to move out of custom code and into a declarative Flow solution. The Flow Tool Kit is built upon the idea of modular components. Just like LWC’s or Visualforce Components, we provide your team with tools to create modular, reusable Flow Screen components. These components are configured within a custom interface outside of Flow, which allows for the decoupling of complex Flow logic from ever-changing front-end design requirements. This means that System Admins or Super Users without Flow proficiency can own and manage components without ever needing to open or edit a Flow.

Build Modular/Reusable Flow Screen Components

There is a concept that developers adhere to when writing code “Don’t Repeat Yourself” (DRY). The idea is simple, try not to duplicate code. Instead, write it once and ensure that other solutions can reference and reuse the same code if needed. With this principle, when a change needs to be made, a developer only has to update the code in one place instead of multiple locations. This reduces both initial development time, as well as future administration. We love Flow, and Flow provides tools such as subflows and invocable flows to allow logic and processes to be reused. However, when considering Flow Screens, no standard feature is provided to reduce duplicated form design and visibility logic. This often leads to duplicative configuration. This is administrative debt!

The Flow Tool Kit enables your team to create modular/reusable Flow screen components with clicks, not code. Each component contains its own set of fields, styling, and conditional logic. Admins and Developers can add these components to one or many flow screens. If something in your business logic changes, update the component, and all Flows that reference your component are instantly updated, Magic! Furthermore, our form components can be reused throughout the Flow Took Kit. Please look at our Form (Repeater) and Form (Table) elements, as well as our Shopping Cart and Survey extensions.

Decouple complex back-end processes from fluid front-end design

Everything is moving to Flow, but Flow sometimes does require a developer’s eye to design and maintain efficient back-end business processes. With the Flow Tool Kit, we decouple the front-end UX from the complex back-end processes handled by Flow. This means that your team can pass the task of field arrangement, styling, customizing labels, and other ever-changing front-end requirements to System Admins that do not currently have the skill set needed to manage a Flow. This pattern is equivalent to how Developers implement fieldsets within Visualforce and Lightning Components.

Leverage the power of Salesforce Flow

The Flow Tool Kit was designed to leverage the power of Flow. With Salesforce Flow, your team will have few, if any, limits when it comes to building out complex solutions. If you do find a limit, Flow can be extended with custom code to handle your unique business requirements.

Salesforce Flow is powerful when it comes to pre-processing and post-process handling. However, Flow has many gaps when working with Flow screen solutions. These gaps are what the Flow Tool Kit (Form and Table Builder) app was designed to fill.

Key Features | Flow Tool Kit (Form and Table Builder)

Form Builder Interface

The Form Builder Interface is a standalone app where users create custom Flow Screen components. The interface includes a live preview window that is always visible. Each change updates the live preview so your Users can see what their component will look like when dropped into a Flow. Adding input fields to your component is equivalent to the new GA Flow Fields feature within a Flow screen. Add the field to your component, and the fields data-type, label, help-text, and requiredness are loaded as your starting point. Unlike the Flow Fields feature, you can override the system defaults with custom labels, help text, prompt messages, requiredness, and more. The fields added to your component stay synced with the field’s API names. Therefore there is no need for field mapping within the Flow.

Try the Form Builder Interface!

Key Field Override Features

Display Picklist fields as Radio Options or Radio Buttons (define the number of columns)
Display Multiselect Picklist as Multiselect Checkboxes (define the number of columns)
Display Boolean/Checkbox Fields as Picklist and provide alternative labels such as: “Active, Inactive,” “Yes, No,” “Valid, Invalid,” etc.
Override default Labels
Append and Prepend Text
Change the Label’s Position (Stacked, Inline, or Hidden)
Add Placeholder Text
Add or Override Inline Help Text
Disable/Hide Inline Help Text
Require or Disable Input Field
Min and Max length for Text Inputs
Min and Max Values for Date, DateTime, Time, and Number fields
Set the Height of RichText and TextArea Fields

Each form component can be styled with custom themes. Conditional logic is also configured and packaged within your custom form components. Conditional logic is used to show, hide, require or disable fields and sections within your component. Conditional logic is triggered via field updates and/or pre-filling input fields within Flow Builder. See how it works.

Live Formula Field Recalculation

Form Components can include and display the values of calculated Formula Fields. These formulas can also be configured to recalculate in real time within your Flow screen. As users change field values, your formulas will be recalculated, displaying the updated result. Use these formula results to trigger conditional logic, hiding and/or showing fields and sections based on the updated formula value.

Table Builder Interface

The Table Builder Interface functions just like the Form Builder Interface. Declaratively add and arrange table columns, override header labels, and customize display properties. As you make changes, the table is updated within the preview window, allowing you to track how your table will look within a flow.

Try the Table Builder Interface!

Table components can be reused within multiple flows. Simply add your table component to a flow screen and pass in a record collection to populate the rows. Within Flow, you define how Users interact with the table records by enabling users to create, update, select or delete records. Adding or updating records within a table functions like a quick action on a standard record page. Admins pass in Form components to the table, as well as an optional pre-fill record template. When a user clicks the “New” or “Edit” button, a modal opens, displaying the fields defined within the form component. Users can edit field values for a record even if not displayed as a table column. Tables can also be configured to display as a hierarchy tree.

Flow Screen Components and Flow Actions

Modular form components, built with the Form and Table Builder interfaces, can be weaved together with standard flow screen components and custom and third-party components to create advanced forms and interfaces.

Form

The “Form” screen component is what an administrator uses to add form components to Flow screens. Our form screen components communicate, passing field and visibility updates between components. This allows you to easily weave together components across objects as well as standard and custom Flow screen components. The custom property editor allows admins to assign record type options, hide headers, override the theme, or collapse form sections within accordions.

Dynamic Form Component Assignments

Form Components can be explicitly added to a Flow screen with a “hard-coded” reference. Alternatively, Form Components can be assigned to your Flow screens dynamically. This is powerful! Consider our free Survey extension app. We leverage a single Flow, with one screen, to handle and create Survey_Reponse__c records. We pass into our Flow a Campaign Id. The related Campaign stores a reference to a Survey form component. Each Survey component can be configured with custom Survey questions and branding. This allows us to dynamically change the fields displayed within the Flow based on the related Campaign. Allowing a single Flow screen to handle an unlimited combination of survey questions. This pattern, “Data-driven screen flows,” is a recommended best practice. Check out this UnofficialSF article for additional considerations: Scaling to Thousands of Screens with Lightning Flow.

Form (Repeater)

The Form (Repeater) component allows users to create and/or edit multiple records within a single Flow screen. Admins can pass a form component to the (Repeater) and a collection of records if the component requires a pre-filled form. Users can then add more records by clicking the ‘New’ button. The repeater adds a new record to the screen with the same input fields packaged within the form component. In addition, admins can customize the repeater within flow screens by enabling a User to Create, Clone, Select or Delete records within the repeater.

Form (Buttons)

The custom buttons within the Flow Tool Kit allow you to configure as many buttons as your solution requires within a single Flow screen. Easily customize each button’s label, icon, branding, or action with our intuitive property editors. Confirmation modals can also be enabled for any button. When enabled, the user is presented with a custom message and a confirmation button that must be clicked to move the Flow forward. Additionally, buttons can be configured to bypass field validation as well as trigger Google reCaptcha validation. You also control how and where your buttons are displayed, such as within docked footers or grouped drop-down menus.

Simplify complex Flow solutions

Reduce Loops

Loops add complexity to flows and can degrade the user experience. Therefore, the Flow Tool Kit includes two features, the Form (Repeater) and Form (Table), which allow users to add, update, delete or select multiple records within a single flow screen. These components return output collections (e.g., Insert Collection, Update Collection, Delete Collection, Selected Collection). As a User interacts with records within these components, the records are sorted and added to the appropriate output collections. These output collections could then be passed right into DML elements (Create, Update, Delete) within your Flow. You can also predefine field values for new records created within these components with a record template. This is useful for setting values such as RecordTypeId or related lookup Ids that should apply to all new records.

Eliminate Field Mappings

Form Components maintain a direct reference to your Object schema. This allows your field labels, help text, picklist values, and field API names to stay in sync with your object. Changes made are instantly visible within your Form Components and the Flows that reference them. This also means that there is no need for field mappings within your Flow. Instead, our Form Components pass back a “record” variable with all field values added or updated by your users mapped to the referenced field API names. Simply pass this “record” output into a DML element for processing. For some Flow solutions, this could mean most changes happen within the Form Builder with no need to open and update the related Flows, just like Field Sets. Magic!

Next Steps

Try out the latest release of the Flow Tool Kit by visiting our site commonunite.force.com or through the AppExchange. We have two versions of the Flow Tool Kit, “Free” and “Unlimited.” The Free version includes all features but will limit your org to the following objects: Account, Contact, Case, Lead, and our custom Survey object. The Unlimited version is sold as an org-wide license and allows for any object Custom or Standard. Nonprofits with ten Users or fewer can purchase the Unlimited license for $30 per month. All other orgs can purchase the Unlimited license for $150 per org per month. You can contact us for custom pricing considerations. Visit our Vimeo showcase for how-to videos and demos.

From Common-Unite: A powerful Screen Component Builder