Empower your Salesforce Admins to deliver complex screen flows in no time, with a wide variety of readily available screen components!
- Save development time and resources with 50+ interactive Screen Flow components.
- Enjoy a tailored experience with the ability to customize the properties and theme of every component right within Flow Builder.
- Take the user experience to the next level with embedded actions and pop-up notifications within the Screen Flow.
- Expose the components and screen flows in Experience Cloud for external users.
Ever since their launch, screen flows have brought to the table the ability to combine user input with Salesforce automation, a task which used to require developer support (considering it was not possible with either of the above declarative options). Out of the box, Salesforce provides an array of components, but they have yet to progress as rapidly as other features of flows. What if you need more options?
Avonni is focused on supporting your Admin team, and enables them to build user centric Screen Flows packed with intricacies without needing any developer support, giving them greater control and access to enhanced features. The Flow Screen Components package brings to the table more than 50 custom screen flow components for your Salesforce team,internal users as well as Experience Cloud users to take advantage of in their daily processes.
This in-depth overview will showcase the main Avonni components, ideal use cases, and setup effort, as well as how fast your users can (and will) come to enjoy them.
As mentioned above, this managed package is all about custom screen flow components and a packaged library ready to aid day-to-day activities: progress bars, interactive tables, activity timeline, and even signature input, just to mention a few.
We will explore a few of the available components, but make sure you check out all that are already released here.
Note: In this post, we assume that you are already familiar with Salesforce Screen Flows functionality – no worries if you’re at the beginning of your journey though, as this Trailhead module will give you a great overview to get started with.
Meet the Avonni Component Builder
The first thing you will notice when dropping the first Avonni component onto your screen flow canvas is certainly the number of available options. While some attributes, such as data sources, are readily available on the side panel of the component (just as you would see with any standard or custom one), the true customization possibilities lie within the Component Builder.
Here is where Salesforce Admins will control every aspect of the component, with a real-time preview of their changes. As you will see below, there are three available tabs, each with their own set of attributes to tweak in order to obtain the desired aspect and behavior for the component.
Access all properties and control component behavior from one place
The first tab within the Component Builder hides the Properties pane – where all the magic happens. As mentioned above, you will notice some of these properties available on the previous page even before accessing the Component Builder. However, in order to experience all options, as well as a full-size preview, this is where all changes should be made.
Most properties can be either set manually for the component, or dynamically mapped from a record if desired – in the example below, we will continue using the Carousel Component, but note that each component has its own set of specific properties. A common denominator for all of them is that this is where the selection of the Data Source will happen, either manually or from a collection found in the flow, as well as defining the buttons we will later leverage for actions.
Handle complex requirements within actions triggered directly from the component
Interactions are the way Avonni empowers admins to handle complex requirements without writing a single line of code or leveraging additional developer support in the end. These actions are tied to the component through user behavior. In this example, the options are the user clicking on one of the items on the screen or on the button we created – each of them can have different interactions tied to them depending on the desired behavior.
As you will notice while exploring all of the possibilities, each action also has its own set of properties to be considered, such as theme or their on-screen behavior.
By far the most powerful feature when it comes to interactions within Avonni components, is the ability to use another active flow – in this scenario, that gives the possibility of accessing any of the other existing screen flows right from this component. Not only can you input all required variables for the secondary flow, but you can also control the behavior when the flow finishes, is closed, or even errors out, ensuring a fully tailored experience.
Manipulate component visual attributes in just a few clicks
Last but definitely not least within the Component Builder, the Style editor is your go-to place for deciding the look and feel of your screen component. Not only can you control the borders, the positions, the padding, as well as the color and font, but you can also control the images. In this example, the image I choose is larger than expected, but luckily this attribute, as well as the background color, can be modified in just a few moments within the Style tab.
Sooner or later you will meet stakeholders on a video call or in person. Until then, images are a great visual aid. The end result of the Carousel screen component can be used immediately with Contacts as a dynamic data source, a recordId variable to pass the AccountId from the Record Page, and voila!
Combine the list view functionalities with the power of Salesforce Flow
This custom component will help you achieve most – if not all – of the things you would like to do using the Salesforce out-of-the-box Data Table component, plus a lot of extras you may not yet have considered.
Once the Component Builder is accessed for the Data Table, you will have the option to set parameters on the right-hand side panel. In addition, a brand new one will appear on the left-hand side, allowing you to drag and drop fields from the Data Source directly within the table.
The Data Collection itself will be the collection generated by the Get Records element, or another collection variable if needed. Once columns are dropped into the table, they can be reordered or renamed. Plus, the extra properties (such as in-line editing or if the column is searchable) can be specifically defined for each column.
After adding the Screen Flow on the desired Lightning Page, the Data Table component can be used to search through the columns – these allow you to search, filter as desired, or make use of the available interactions.
Data Table Actions
Trigger custom messages, automations, and even confetti with the click of a button
Similar to Salesforce list views, on top of the in-line editing and filtering, what makes the Avonni Data Table component so powerful is definitely the interaction capabilities. To be more specific, you can define either header or row actions which allow the selected record(s) to be passed onto another flow, to either conduct an action or display data.
Additionally, just as you saw in the Carousel example at the beginning of the post, you can add information, confirmation, or alert messages, which can also be combined to appear before a flow dialog is triggered.
In the above example with an Accounts Data Table on the homepage, I added a row-level action called “View Contacts”. Let’s test it out!
As seen above, the “View Contacts” button was actually hiding another screen flow using the Data Table component to display and offer the possibility of exporting Contact records. The Export action is readily available for the Avonni Data Table component with the option to select between a .csv or .xlsx document, but keep in mind that any of the other interaction options can be used as well.
Don’t forget to take a look over the Data Table component documentation – there are many more properties to explore, but it’s worth checking out the examples provided by Avonni as well.
Vertical Visual Picker
Organize choices, streamline decision making, and avoid clutter
After seeing the Avonni Data Table component in action, you may be tempted to use it immediately. However, there are components to not only help organize choices in a visually pleasant way, but also to streamline decisions – the Avonni Vertical Visual Picker is the perfect example.
This component also has additional functionality to help avoid clutter on screen by preventing the display of multiple options, which could lead to confusion. The ability to add sub-items for each of the options can help admins to easily organize options into categories, with additional choices becoming available once the primary selection has been made.
Custom interactions can also be defined for this visual picker, but as the main goal is to streamline the experience, there are no buttons or extra clicks involved, as the action will be triggered on change. The same options remain available for the interactions, including triggering another flow.
Redefine what should be included in the Activities timeline
While you are most likely already familiar with Salesforce activities, as well as the out-of-the-box Activity timeline, other than filtering on demand and viewing Tasks, Meetings, Emails or Calls, there isn’t much customization to be done.
The Avonni Activity Timeline component is a supercharged version of the one already available in Salesforce, as it allows you to define exactly what the ‘activities’ are for the given use case. This means that you are not limited to Tasks and Events, but you can include other standard or custom objects as well.
The above example of the activity timeline is centered around the Sales team needs, and displayed at the Account level. Within the screen flow itself, any records you need to display have to be retrieved through the Get Records element, resulting in a variable for each set of object records you want to include which can then be used within the Avonni Apex Action – the final output will be an Apex Defined variable that will serve as the Data Source for the actual Activity Timeline screen component.
There is a maximum of ten collections you can combine within the Apex Action, with the option to define the key properties for each – for example, I used the Created Date for the Quotes, but the Close Date for the Opportunities, while Due Date is used for Tasks. Be sure to take a look at the step-by-step instructions for the Activity Timeline too.
The 50+ available Flow components included in the Avonni managed package cover a wide range of processes. The good news? Not only are they constantly improving existing components to offer even more options and functionality, brand new ones are bound to keep coming!
The Avonni Screen Flow Components Roadmap is public – you can peruse the components that are going to be released soon, review, and vote (on the ones under consideration). You can even submit your very own idea for a component. While testing the Data Table component, I would have liked one of the lookup fields to be editable, and guess what, that functionality is coming in June 2023, along with a few others.
You may already have in mind a few places where these components will be a game changer in your Salesforce instance – let’s explore a couple of them. One important thing to note is the fact that all these components can be picked and combined depending on the process at hand, but their applicability is not focused on one use case or one team at all!
It’s no surprise that with so many components to choose from, there is a possibility of enhancing the experience for absolutely all of your internal Salesforce users, not just one specific team. Additionally, the screen components can be used multiple times in the same flow, if needed, or in multiple different flows on the same page – the same component can easily provide insight to different teams based on the data source you chose.
For example, if we are to choose the Carousel component, sellers can benefit from a visual display of Products directly on their Opportunity record, while Marketing teams could be presented with a slideshow of event and venue pictures on their Campaigns.
In addition to internal users, your customers and partners using Experience Cloud do not have to miss out! You can mix and match any of the Avonni custom components within screen flows to be exposed on your site – from simply providing the exact location of your offices using the Maps component, to allowing your users to make use of custom interactions on Salesforce records with a fully branded Data Table component.
The Avonni Flow Screen Components library could become the ultimate time saver for your team’s screen flows, while enhancing the user experience of your Salesforce instance and allowing admins to benefit from pre-built components (that would otherwise have to be built by a developer).
Although this is a managed package, the setup could not have been easier – considering it only contains the custom components and permissions. There are just three steps to complete before you can proceed to building some amazing screen flows:
- Install the managed package from the AppExchange listing
- Assign a license
- Assign the Avonni Flow Screen Components permission set
As you would expect when it comes to having so many available components to choose from, there is also very detailed documentation to support your journey. The Avonni team has taken the time to not only explain every single step of the process, but also all of the functionalities. Within the documentation, you will easily find:
- The Product Tour, presenting all features.
- Numerous tutorials to build flows using the Avonni pre-built components.
- Live Use Case examples you can take a look at in real time.
On top of these, as you may have additional questions pertaining to your particular situation or business requirements, the support chat is only a few clicks away (in the right-hand corner of the page) at all times.
The pricing model for Avonni’s Flow Components is not only straightforward, but also allows flexibility to thoroughly test out the components for your particular processes before deciding on the long term commitment.
All of the components can be leveraged for free by up to ten Salesforce users – users who will actually access the flows the components are used in, not the entire pool of users in your Salesforce org. Once the number of users needs to be increased, the pricing starts at just $5/user/month for the Essentials Tier, with the option to upgrade to Professional for unlimited Experience Cloud guest user access. Additionally, the cost per user reduces as more users are added.
You can check out all pricing details on Avonni’s website.
Overall, the components library Avonni provides is sure to be a gamechanger in the speed of delivery, as well as sophistication of your screen flows – transforming Flow Builder into an even more powerful no-code platform. You are able to adapt the components to your company’s branding and particularities, and users across all the teams are bound to enjoy the elevated experience they’ll benefit from in Salesforce.
As there is no cost involved, be sure to try out the Avonni Flow Screen Components package right in your developer edition or sandbox – discover how building the perfect screen flow has just become a whole lot easier.