Product Tour
Welcome to Avonni Components!
You're about to embark on a journey to revolutionize your Salesforce Flow Builder experience. With our suite of over 60 advanced UI components, you can now overcome common Salesforce building limitations and bring a new level of sophistication to your projects.
Why Avonni Components?
Solve Customization Limits: Traditional Salesforce components often restrict your creative vision. With Avonni, you can fully customize interfaces to align with your brand's style and functionality. Say goodbye to one-size-fits-all designs and hello to unique, brand-aligned UIs.
Boost User Engagement: Engage your users like never before. Avonni Components enables you to create intuitive and interactive interfaces, making your Salesforce environment more visually appealing and user-friendly.
Seamless Experience Across Devices: In an increasingly mobile world, your applications must perform flawlessly on any device. Avonni ensures your interfaces are responsive and adaptable, providing a consistent experience on desktop or mobile.
Accessing the Avonni Components
When the Avonni Component package is installed, the Avonni Components will be directly accessible in the Flow Builder while building a screen flow. The Avonni Components are located in the custom components section.
The first time you run the Avonni Flow Screen Components library, loading Avonni Flow Screen Components may take some time. If they do not appear immediately, wait a few seconds for them to appear in the Custom section.
>> Avonni Components are slow? Check this article.
Avonni Component Builder
Introduction
The Avonni Component Builder is a user-friendly property editor integrated directly into your interface, designed for customization. It allows administrators to tailor components according to their needs and preferences easily. With the Avonni Component Builder, you can modify:
Component Properties: Adjust the primary attributes and functionalities of the components.
Interactions: Customize how the components interact with user actions or other elements.
Styling Settings: Change the visual style, like colors or shapes, to make the components visually appealing.
The Avonni Component Builder is a powerful ally in creating attractive and functional Screen Flows, ensuring each component looks great and works seamlessly within your flow.
Accessing the Component Builder
When editing an Avonni Flow Screen Component, users can access the Component Builder to customize each component. Click on the "Open Component Builder
" button to access it.
Component Builder UI presentation
Canvas Editor: The Canvas Area displays a preview of the component.
Properties Pane: The Properties Editor displays all the properties users can apply to customize the component.
Interactions Pane: The Interactions Editor helps define end-user gestures on the component (on click, on change…).
Style Pane: The Style Editor to customize the look and feel of the component.
Properties Pane
The Properties Editor, located on the right side of the Avonni Component Builder page, displays all the properties that can be customized for any selected Avonni Component.
Interactions Pane
The Avonni Component Builder simplifies the process of adding interactions by leveraging the robust capabilities of Flow Builder, all without requiring any coding. This makes it easier for end-users to execute complex actions, enhancing their overall experience and productivity.
Interactions serve various purposes, from simple redirections to implementing complete business flows. Below are the available interactions:
Style Pane
The Style Editor in the Component Builder offers customization options for the appearance of over 60 Avonni Components. Following the Lightning Design System guidelines, it provides a straightforward way to modify each component's appearance, with its unique styling settings available for adjustment. This feature ensures that the components function well and look appealing and consistent with your overall branding.
What's Next?
pageQuickstart GuideLast updated