Account Management

Introduction

Welcome to our detailed tutorial, where we guide you through creating a dynamic and reactive Account Management Component using Avonni Components in a screen flow. This tutorial is designed for Salesforce administrators and technical architects looking to enhance their user interface with efficient, real-time data interaction.

Purpose

The primary objective of this tutorial is to demonstrate how to build an Account Management Component that showcases a list of accounts using the Avonni Data Table. The unique feature of this component is its reactivity - selecting an account from the Avonni Data Table will instantly display related information about that account in a separate section of the interface. This two-section layout ensures a seamless and intuitive user experience.

Key Features

Reactive Data Display: Learn how to utilize reactivity, a powerful feature of the Flow Builder, to create components that respond in real-time to user interactions.
Two-Section Layout: Understand the structure of the component, with one section dedicated to displaying the account list and the other for showing detailed information on the selected account.
Enhancing with Avonni Components: Discover how to use various Avonni Components to enrich the right panel with real-time information, further leveraging the reactivity feature.

To enable Reactive Screens by default, verify that your screen flow uses at least version v59 of the Flow API. This version ensures the necessary support for dynamic component behavior.

Step-by-Step Implementation:

Step 1: Create a New Screen Flow

Create a screen flow in the Salesforce setup.

Step 2: Add a Screen Element

Step 3: Configure the Screen Element

In this step, we focus on customizing the screen element. Begin by naming the label of the screen element for clear identification. Then, in the "Configure Header" section, uncheck "Show Header" to give our component a custom Lightning Web Component (LWC) appearance despite it being a screen flow. Apply the same principle in the "Configure Footer" section by unchecking "Show Footer."

These adjustments ensure a cleaner, more integrated user interface, enhancing the overall user experience.

Step 4: Add a Section Element

In this step, introduce a section element into the screen flow. Create a two-column layout within this section: set the first column to occupy 8 out of 12 parts of the width and the second column to take up the remaining 4 out of 12 parts. This distribution ensures a balanced and visually appealing layout for your component's content.

Step 5: Drag the Avonni Data Table

For this step, drag the Avonni Data Table component into your screen flow's left section (the larger 8/12 width column). This placement is essential for displaying the account list effectively within the component layout.

Step 6: Configure the Avonni Data Table

Here's a concise list of shortcuts for configuring the Avonni Data Table.

Open component builder

Click the 'Open Component Builder' to access and configure the Avonni Data Table properties. This is where you'll tailor the data table settings to fit your component's needs.

Configure max row selection

Set the 'Max Row Selection' of the Avonni Data Table to 1. This limits users to selecting only one row at a time, displaying a radio button instead of a checkbox for selection.

Configure the Data Source

The initial and crucial step in configuring the Avonni Data Table is setting up the Data Source. This determines the source and structure of the data in the table, which is crucial for its correct functionality and meeting data presentation requirements. For simplicity in this example, we use the 'Query Data Source', which doesn't require managing a get records collection.

We select the 'Account' object. Adjust filters if needed.

Configure the Data Mappings

Data Mappings in the Avonni Data Table are vital for accurately displaying data, particularly with variable sources like the Query data source. This feature aligns Salesforce data fields with the correct columns in the table, ensuring a precise representation of information.

Configure the columns

Optionally, each column in the Avonni Data Table can be individually configured. Click on a column within the Data Mappings section to adjust its settings. This allows you to make columns filterable, searchable, editable, and more, tailoring the table to your needs.

Remember to create an ' On Save ' interaction when configuring a column in the Avonni Data Table to be editable. This step is essential to ensure that user changes are properly saved.

Configure the Avonni Data Table Header

You can configure a Header on the Avonni Data Table by expanding the Header section. Here's the various settings you can customize on the Header section:

Title: Set the header title.
Caption: Add a caption.
Icon: Choose an icon.
Icon Size: Adjust the size of the icon.
Button Actions: Configure button actions as needed

Step 8: Configure the right-side section

Configure the Avonni Header

Location: Place the Avonni Header at the top of the right section in your screen flow.
Functionality: Configure the Avonni Header to automatically show the account name chosen from the Avonni Data Table on the left.

Configuration

Access Component Builder: Open the component builder for detailed settings.
Title Configuration: Under the Title attribute, select 'Mapped' and navigate to 'Data Table > First Selected Row > Account Name' to link the header with the selected account's name.
Additional Settings: Adjust any other necessary settings for the Avonni Header as required

Configure the Avonni Tabs

Placement: Drag the Avonni Tabs component into your screen flow's right section (4/12 width column).
Open Component Builder: Access the Component Builder for further configurations.
Create Tabs: Manually create three tabs - 'Details', 'Location', and 'Related'.
Set Active Tab: Designate 'Details' as the active default tab.

Configure the Avonni Formatted Value

This part of the tutorial introduces the Avonni Formatted Value component. It's used to dynamically display specific field information related to the account selected from the Avonni Data Table. This feature enhances user interaction by providing immediate, relevant details in the right section of our screen flow.

Placement: Drag the Avonni Formatted Value component to the right section of your flow, positioning it below the previously added Avonni Tabs.
Open Component Builder: Access the Component Builder for configurations.
Label Configuration: Enter the desired label for the Formatted Value component in the Label field.
Value Setting: Choose 'Mapped' in the value field. Select 'Avonni Data Table screen component > first selected row' and then pick the field value to display upon account selection from the Avonni Data Table in the left panel.
Field Type Adjustment: Modify the Type field as necessary, choosing 'currency' or 'percent' to match the type of the field value you intend to display

Configure the Avonni Map

In this section, we will configure the Avonni Map component to display the location of an account selected from the Avonni Data Table on the left side. This enhances the visual representation of account data. Follow these steps:

Placement: Drag the Avonni Maps component into the right section below the Avonni Tabs.
Component Builder: Open the Avonni Maps component builder.
Marker Mode: Select the single marker mode, as we aim to display only the location of the selected account.
Field Mapping: For each location attribute (street, city, state, postal code), link it to the first selected row of the Avonni Data Table. For instance, choose Mapped > Avonni Data Table > first selected row > Billing street to display the street. Repeat for other location-related fields.

This configuration allows for an interactive map display that updates according to the account selection, providing a more engaging user experience.

Purpose: Use the Avonni Data Table to dynamically show opportunities related to the account selected from the left-side data table.
Steps: Follow the forthcoming instructions to configure the data table for displaying these related opportunities effectively

Step 1: Create a Text formula resource

We need to create a text formula resource (from the new resource panel on your screen flow) if we want the Avonni Data Table being reactive based on the account selection made on the Data Table on the left-side section. The formula is allowing to dynamically displayed related records.

"Account.Id = '"&{!<<YOUR DATA TABLE API NAME>>.firstSelectedRow.Id}&"'"

Step 2: Drag the Avonni Data Table component

Select the Query Data Source
Select the Object you'd like to Query
On the Filter section, select Mapped to add the formula created just above.
Add any other additional settings needed for your Data Table.

Step 9: Configure Reactivity

To enable Reactive Screens by default, verify that your screen flow uses at least version v59 of the Flow API. This version ensures the necessary support for dynamic component behavior.

This step involves setting up reactivity, a critical feature that determines the display of components based on specific criteria. For instance, we configure the Avonni Tabs to only appear when a row is selected in the Avonni Data Table. This functionality enhances the dynamic interaction within the component.

Reactivity configuration is a crucial step for each Avonni Component that requires dynamic display based on certain conditions. This process ensures components react and appear in response to specific user actions or criteria within the flow.

Configure Reactivity for the Avonni Header

To ensure the Avonni Header component appears only when a row is selected in the Avonni Data Table, configure the visibility rule as follows:

Visibility Rule Setup:
- Condition: 'All Conditions are met'
- Specify: 'Header > FirstSelectedRowKeyValue IS NULL'
- Set to: 'False'
Result: With this rule, the Avonni Header will appear only when a row in the Data Table is selected.

Configure Reactivity for the Avonni Tabs

To ensure the Avonni Tabs component appears only when a row is selected in the Avonni Data Table, configure the visibility rule as follows:

Visibility Rule Setup:
- Condition: 'All Conditions are met'
- Specify: 'Data Table > FirstSelectedRowKeyValue IS NULL'
- Set to: 'False'
Result: With this rule, the Avonni Tabs will appear only when a row in the Data Table is selected.

Configure Reactivity for the Avonni Map

To ensure the Avonni Map component appears only when a row is selected in the Avonni Data Table AND the Avonni Tabs active value EQUAL 'location", configure the visibility rule as follows:

Visibility Rule Setup: