ISV Spotlight: Avonni Flow Screen Components Provides More than 50 UI Components

/0 Comments/in /by

Editor’s Note: UnofficialSF is pleased to enable commercial creators of Flow extensions like Centro 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.

The Avonni Flow Screen Components library is a managed package that contains over 50+ customizable UI components to enhance Salesforce Flows. This library facilitates the creation of user-friendly interfaces, improving the user experience.

Flow Screen Components

The Avonni Flow Screen Components library offers various reactive UI components for Salesforce screens, catering to various needs like inputs, displays, indicators, pickers, and interactions for improved user experience. The components are designed to be “Reactive,” ensuring seamless interactions and real-time updates based on user input. 

Input Components for Easy Data Collection

  • Rating: Gather user feedback effortlessly with a star rating system.
  • Dual Listbox: Let users move options between two lists.
  • Color Picker: Enable intuitive color value selection for your users.

Presentation Components for Engaging Interfaces

  • Calendar: Boost data management with a visually organized component.
  • Tabs: Organize content effectively.
  • QR Code: Generate QR codes for easy scanning.

Special Input Components for Advanced Functionality

  • Barcode Scanner: Scan and easily process barcodes.
  • Slider: Allow users to adjust values using a draggable slider.
  • DateTime Picker: Combine date and time selection in one component.

Data Display Components for Effective Visualization

  • List: Display collections of items in a structured format.
  • Data Table: Enhance tabular data with sorting, filtering, and pagination.
  • Map: Showcase records on an interactive map for better context.

Progress Components for Visual Feedback

  • Progress Bar: Provide a visual indication of progress with percentage values.
  • Progress Indicator: Track task progress with clear step indicators.

Visual Picker Components for Engaging Selection

  • Visual Picker: Offer users visually appealing selection tools for multiple options.

Content Components to Enrich Your Flows

  • Carousel: Rotate images to highlight important information.
  • Illustration: Include eye-catching illustrations.
  • Buttons: Add clickable buttons for seamless interactions.

Interaction Components to Enhance User Experience

  • Flow Navigation: Control the flow of navigation in your app.
  • Show Toast: Display toast notifications for real-time user feedback.
  • Navigate: Direct users to specific locations within your app.

This is just a glimpse of the components within the Avonni Flow Screen Components library. To view the complete list of components available in the Avonni Flow Screen Components library, visit https://avonni-templates-dev-ed.develop.my.site.com/. 

Custom Property Editor

The Avonni Flow Screen Components library has a built-in Custom Property Editor that seamlessly integrates with the Flow Builder. This editor makes it easy to customize and configure your components in various ways:

  1. Drag-and-drop functionality: Effortlessly rearrange fields within a component by dragging and dropping them.
  2. Dynamic customization: Adjust component settings to fit your specific requirements.
  3. Live preview: See changes to the component in real time.
  4. Interaction configuration: Personalize the user experience by adding custom interactions.
  5. Style Editor: Fine-tune the component’s look to match your brand or design preferences.

The Custom Property Editor streamlines adapting Avonni Components to meet your unique needs.

Use Case example: Create an accounts management component with Flow Builder

Let’s dive into a practical use case where we create a comprehensive account management component. This detailed guide will lead you through designing an account management component.

Install the managed package to begin using the Avonni Flow Screen Components library. It’s free to use within a sandbox environment, and for production organizations, you can utilize it for up to 10 users at no cost. This allows you to create and test Avonni  components within Salesforce Flows without any initial investment.

The accounts management component lets users:

  • View and manage accounts in a single location
  • Quickly search, filter, and sort accounts using the Avonni Data Table
  • Review onboarding process stages for selected accounts using the Avonni Path
  • Access and edit account-specific information, such as contact details, billing information, and notes, using the Avonni Tabs component
  • Visualize the geographical location of an account using the Avonni Map component.

Account Management component built with Flow Builder

We’re using the following Avonni Components to create this specific use case: 

  • Avonni Header: Provides a customizable header section
  • Avonni Data Table: Displays a list of accounts, allowing users to select an account and view various associated information.
  • Avonni Path: Showcase the onboarding process stage upon account selection.
  • Avonni Tabs: Organizes additional account information into accessible sections.
  • Avonni Map: Provides a visual representation of the location for the selected account.

The main steps to build this component are:

Define a header using the Avonni Header Component

Think about adding the Avonni Header at the top of your screen flow. This will give all the following components a uniform look and feel and improve the overall design and harmony of the Account Management component. It’s a small change that can make a big difference in your layout.

Screen flow settings

  • Add a screen element and name it: Main Screen
  • Hide the Header and Footer Section

Avonni Header configuration

  • Drag the Avonni Header Components
  • Configure the Avonni Header properties
    • Open the Component Builder
    • In the Title field, enter: “Accounts Management”
    • Check the toggles “Is Joined” and “Pull to Boundary” – to make this component more consistent with the subsequent component. 
    • Expand the Avatar Section to set the Account icon as an avatar next to the title.
    • Expand the Actions Section to create a “New” button action to let end-users create a new account on the fly.

Avonni Header Styling Configuration

  • Set the Header background color to white

Avonni Header interaction configuration

Now, let’s configure an interaction for the ‘New’ button present on our Avonni Header Component. Clicking this button will allow users to create a new account. Here’s how we proceed:

  • Add a “New” action button
  • Click on the interaction tab to create an Action click interaction:
    • Target Name: New
    • Type: Navigate
    • Page reference type: Object Page
    • Object API Name: Account
    • Action name: New

Adding the Section component

Adding a ‘ Section ‘ element is important before incorporating the Avonni Data Table component into our screen flow. This element is crucial because it allows us to create two distinct sections within our screen element. These separate sections allow us to easily organize and drag the desired components into their respective places. This ensures a well-structured and logical layout, paving the way for a smooth integration of the Avonni Data Table component.

Utilize the Avonni Data Table to display a list of records

Here we will configure the Avonni Data Table for our Accounts management use case. We’ll customize row selections, data source connections, column layouts, and actions and define specific interactions. Additionally, we will set filters and designate searchable fields to optimize the user experience. Let’s dive into these steps to create a robust, user-friendly table.

Configuration steps

  • Set the settings “Maximum row selection value” to 1 to permit a maximum row selection of just one. This way, users can concentrate on one account at a time.

Data Source configuration steps

Let’s set up the Data Source on the Avonni Data Table. We’ll link the source to our ‘Get Records’ collection, customize the table layout by adding columns, and add ‘Row Actions’ for user interactivity. Let’s get started.

  • In the Data Source section: Link the data source to the previously created ‘Get Records’ collection that fetches account records information.
  • Adding columns by dragging and dropping fields from the collection allows a customized data table layout.
  • Adding a Row Actions column: Edit, Change Account Owner. 

Create the interactions on Row actions

Let’s delve into setup the interactions on row actions. We’ll establish an interaction for the “Change Account Owner” action, triggering another flow for effortless account owner changes. You’ll also learn to pass the Record ID input variable to access the corresponding record in the new flow.

Configuration steps

  • Create an interaction on the Change Account Owner action to open another flow allowing users to change the account owner
    • Pass the Record ID input variable to open the other flow to the corresponding record.
  • Set filters: Set the Account Type and Industry fields as filterable.
  • Searchable Field: Set the account name field as searchable.

Display the selected account name using the Avonni Header

Now, we’ll integrate another Avonni Header component at the top of the right section of our screen flow. This will act as a gateway to manage account-specific information, operating with the Avonni Data Table. Upon account selection, the Header will dynamically display the account name. Let’s configure it.

Configuration steps

  • Drag the Avonni Header component on the right section
  • Open the Component Builder
  • Map the Title to the Avonni Data Table component to display the account name value of the first selected row:
    Title > Mapped > Avonni Data Table > First Selected Row > Account Name

Showcase the account’s status using the Avonni Progress Indicator.

We’ll incorporate the Avonni Progress Indicator, a key component to present the account’s status visually. This component represents progress, giving users clear insights about the account’s status.

Configuration steps

  • Drag the Avonni Progress Indicator component under the Avonni Header added on the right section
  • Open the Component Builder
  • Select the Progress indicator type to Path
  • Map the Current Steps value to the Avonni Data Table component to display the Onboarding Progress value of the first selected:
    Current Step > Mapped > Progress > First Selected Row > Onboarding Process
  • Manually input the values for the Path Progress Indicator, ensuring they match those from your corresponding Salesforce field.

Organizing account information with the Avonni Tabs

Moving forward, the next component we’ll introduce is Avonni Tabs. This component helps organize various account information into separate, manageable tabs. By implementing Avonni Tabs, we’ll enhance user navigation, making finding and updating specific account details easier.

Configuration steps

  • Drag the Avonni Tabs Component
  • Open the Component Builder
  • For each tab, assign a manual label by entering a descriptive name in the “Label” field. This label will be displayed on the tab when users interact with your flow.

Use the Avonni Formatted Value to display a field information

As we continue to enhance our account management component, the next component we use is the Avonni Formatted Value. This component is designed to provide a visually appealing display of field information. In this use case, using the Avonni Formatted Value will make the field presentation more user-friendly and intuitive. 

Configuration steps

  • Drag the Avonni Formatted Value Component
  • Open the Component Builder
  • Map the Formatted Value to the Avonni Data Table component to display the account type value of the first selected row.
    Value > Mapped > Formatted Value > First Selected Row > Account Type

Visibility Configurations: Your Key to a Dynamic Screen Flow

  • Remember to configure component visibility settings for each component in your screen flow to ensure they are displayed based on specific criteria. For example, set the component visibility of the Avonni Header to only show when the first selected row key value in the Avonni Data Table is not false. Effectively handling component visibility will lead to achieving the final result. 

Upcoming Developments: Our Objectives and Request for Ideas

Our goal with the Avonni Flow Screen Components library is to improve the Salesforce end-user experience through a no-code approach, offering a broad selection of fully customizable UI components that can be tailored to specific needs.

Our Vision:

  1. Enhance the Salesforce end-user experience with no-code solutions
  2. Supply a wide array of customizable UI components for Salesforce Admins
  3. Leverage Flow Builder for seamless user experience and no-code custom business processes

We value your suggestions and ideas as we work towards these goals. 

Final Thought 

The Avonni Flow Screen Components library enhances the Salesforce end-user experience by offering a comprehensive range of customizable UI components. These components are integrated into Flow Builder, enabling you to create more user-friendly interfaces and custom business processes without coding. 

To elevate your Salesforce Flows, we encourage you to install the Avonni Flow Screen Components library from the AppExchange today. Remember, it’s free for up to 10 users in a production organization. Start exploring the potential of the Avonni Flow Screen Components library and transform your Salesforce experience!