Components for Experience Cloud Get It on the AppExchange

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?

  1. 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.

  2. 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.

  3. 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.

Discover the Uniqueness of Avonni Components

  • Unmatched Customization: Break free from standard designs with our extensive customization options, allowing you to create unique, brand-aligned interfaces.

  • Diverse UI Components: Over 60 advanced UI components offer creative and efficient solutions for various user experience challenges.

  • Enhanced User Engagement: Embed actions and notifications directly in Screen Flows, making interfaces more interactive and user-friendly.

  • Cross-Device Consistency: Ensure a seamless experience across all devices with our responsive design, catering to the needs of a mobile-first world.

  • Efficient Deployment: Rapidly deploy sophisticated Screen Flows, saving time and reducing the need for extensive coding.

  • Experience Cloud Compatibility: Extend sophisticated UI functionalities to external users with full compatibility in Salesforce's Experience Cloud.

  • Continuous Innovation and Support: Benefit from regular updates, new features, and dedicated support to keep your Salesforce experience ahead of the curve

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

  1. Canvas Editor: The Canvas Area displays a preview of the component.

  2. Properties Pane: The Properties Editor displays all the properties users can apply to customize the component.

  3. Interactions Pane: The Interactions Editor helps define end-user gestures on the component (on click, on change…).

  4. 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.

pageProperties Pane

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:

pageInteractions Pane

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.

pageStyle Pane

What's Next?

pageQuickstart Guide

Last updated