Product Tour

Welcome to Avonni Components Salesforce Flows!

Avonni Components empowers you to build more engaging, user-friendly, and visually stunning Flows. With over 70 advanced UI components, you can break free from the limitations of standard Salesforce and create a superior user experience.

Key Benefits of the Avonni Components Package

• Customization Without Limits: Build Flows that perfectly reflect your brand's identity and meet your needs. The Avonni Components give you the freedom to create genuinely custom interfaces.

• Boost User Adoption: Intuitive and interactive Flows are easier to use and more enjoyable. Avonni helps you create Flows that users will want to use.

• Consistent Experience, Everywhere: Ensure your Flows look and function perfectly on any device – desktop, tablet, or mobile. Avonni Components are built for a seamless cross-device experience.

Using the Avonni Components in Your Screen Flows

After installing the Avonni Components package, the components are ready to use in your screen flows. You'll find them easily in the Flow Builder, within the "Custom Components" section.

Meet the Avonni Component Builder

With the Integrated Avonni Component Builder, you can:

• Fine-Tune Functionality: Adjust component properties to get the exact behavior you need.

• Set Up Interactions: Define how components react to user clicks, inputs, and other events.

• Perfect the Style: Customize the visual appearance to create a polished and professional look.

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.

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:

• Flow Navigation

• Show Toast

• Navigate

• Open Alert Modal

• Open Confirm

• Open Flow Dialog

• Fire Confetti

• Export To

• Update Records

• Copy Records

• Update Query

Style Pane

The Style Editor in the Component Builder allows you to personalize the look of over 60 Avonni Components. Using the same design principles as Salesforce's Lightning Design System, you can easily modify the appearance of each component. With a range of unique styling options, you can make the components visually appealing, functional, and consistent with your brand.

What's Next?