Account Management
Last updated
Last updated
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.
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. This component's unique feature is its reactivity—selecting an account from the Avonni Data Table instantly displays related information about that account in a separate interface section. This two-section layout ensures a seamless and intuitive user experience.
Reactive Data Display: Learn how to use 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.
Create a screen flow in the Salesforce setup.
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.
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.
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 effectively displaying the account list within the component layout.
Here's a concise list of shortcuts for configuring the Avonni Data Table.
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.
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.
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.
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.
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.
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
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.
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
We'll use the Avonni Progress Indicator to show the current status of the account you've chosen from the main Data Table on the left side of the page.
Choose "Path" as the progress indicator type. This displays a linear progression of steps.
Select "Linear" for the format. This makes the indicator appear as a horizontal line with milestones.
Set the "Current Step" attribute:
Click the "Mapped" button next to "Current Step."
Choose the "Onboarding Progress Status" field (or your equivalent field) from the first selected row of the Data Table (select the Data Table component added previously and then first selected row attribute). This will show the user where they are in the process.
Configure the Data Source:
Decide how you want to define the steps in the progress indicator. You have three options:
Manual: Enter the steps directly in the component settings.
Flow Variable: Use a variable from your flow to set the steps.
Picklist Field: Pull the steps from a picklist field on your Salesforce object.
By following these steps, you can create a dynamic Progress Indicator that visually tracks the status of your selected account.
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.
This part of the tutorial introduces the Avonni Formatted Value component. It dynamically displays 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
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.
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.
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.
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.
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.
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:
Condition: 'All Conditions are met'
Specify: 'Data Table > FirstSelectedRowKeyValue IS NULL'
Set to: 'False'
And add another condition:
Specify: 'Tabs > activeTabValue EQUAL
Set to: 'location'
Result: With this rule, the Avonni Map will appear only when a row in the Data Table is selected and when the Location tab is active
Having trouble with this tutorial? Contact Avonni support for help.
