Last updated
Was this helpful?
Welcome! This tutorial will walk you through building an interactive "Account Management" section for your Salesforce screen flows using Avonni Components. This component is designed for Salesforce administrators and technical architects who want to create user-friendly interfaces that update instantly.
We'll create an Account Management component with two key parts:
Account List: A table displaying a list of accounts, powered by the Avonni Data Table component.
Account Details: A separate area instantly showing details about the account you select in the table.
The most important feature of this component is its reactivity. When you click on an account in the table, the related information (like contact details, addresses, etc.) will appear immediately in the Account Details section. This makes the interface feel fast and responsive. This provides a smooth and intuitive user experience.
Create a screen flow in the Salesforce setup.
In this step, we'll adjust the basic settings of our screen element to make it look like a custom-built component.
Name the Screen:
First, give your screen element a descriptive name in the "Label" field. This helps you easily identify it later. (For example, "Account Management Screen").
Hide the Header:
Find the "Configure Header" section.
Uncheck the box labeled "Show Header." This removes the standard screen flow header, making it look more like a custom Lightning Web Component (LWC).
Hide the Footer:
Find the "Configure Footer" section.
Uncheck the box labeled "Show Footer." This removes the standard screen flow buttons (like "Next" or "Previous"), giving us a cleaner design.
Why We're Doing This
We're removing the typical "flow" appearance by hiding the header and footer. This makes our Account Management component feel more integrated and professionally designed within your Salesforce page, leading to a better user experience.
In this step, we'll add a "Section" element to our screen and divide it into two columns to organize our content.
Add the Section:
Drag a "Section" element onto your screen flow canvas.
Create the Two-Column Layout:
Once the Section is added, you'll configure its layout.
We'll create two columns:
Column 1: Set this column's width to "8 of 12" (or "8/12"). This will be the wider column.
Column 2: Set this column's width to "4 of 12" (or "4/12"). This will be the narrower column.
This 8/12 and 4/12 split creates a visually balanced layout. It provides enough space for the main content (likely the account list) on the broader column, while still leaving room for additional details (like account information) in the narrower column. This makes the information easier to read and understand
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.
Find and click the "Open Component Builder" button. This opens a window where you can change the Data Table's settings.
Limit Selection to One Account:
Find the "Max Row Selection" setting.
Change this setting to 1. This means users can only select one account at a time. The table will show radio buttons (circles) instead of checkboxes, making it clear that only one selection is allowed
Setting Up the Data Source (Where Your Data Comes From)
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.
Go to the "Data Mappings" section. This is crucially important because it tells the table which Salesforce fields (like "Account Name," "Phone Number," etc.) to display in which columns.
Make sure each column in your table is correctly linked to the corresponding field in your Salesforce Account object
Click on any column within the "Data Mappings" section.
You can adjust settings for each column, such as:
Making it Filterable: Users can filter the table based on that column's values.
Making it Searchable: Allows users to search within that column.
Making it Editable: Allows users to edit the data directly in the table.
Other Settings: Explore different options to customize the column's appearance and behavior.
Customize the Table Header (Optional):
Expand the "Header" section.
You have several options to adjust table header:
Title: Set the title of your table (e.g., "List of Accounts").
**Caption:**Add additional information or detail.
Icon: Select an icon to be displayed.
Icon Size: Select the size of your selected icon.
Button Actions: Add buttons to the header for additional actions (e.g., "Add New Account").
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 chosen account's name.
Additional Settings: Adjust any other necessary settings for the Avonni Header as required
Configure the progress indicator
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.
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 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
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 correct 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.
Configure the Avonni Data Table to display related opportunities
Purpose: Use the Avonni Data Table to dynamically show opportunities for 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
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 to be reactive based on the account selection made on the Data Table on the left-side section. The formula allows a dynamic display of related records.
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.
Reactivity makes your screen flow dynamic, showing or hiding components based on user actions. We'll set this up so that details about an account only appear after the user selects an account in the Data Table.
General Steps (for any component you want to be reactive):
Select the Component: Click on the component you wish to make reactive (e.g., the Avonni Header, Tabs, or Map).
Find Component Visibility Settings: Look for settings related to "Component Visibility," "Conditional Visibility," or something similar. This is usually in the component's properties panel.
Set the Condition: You'll create a condition determining when the component is visible. This condition will usually check if something is true or false.
Choose "All Conditions are Met": Select this condition type.
Save: Save your changes.
Specific Examples (Avonni Header, Tabs, and Map):
Now, let's set up the particular conditions for each component:
Avonni Header (Show only when an account is selected):
Select the Avonni Header component.
Go to its visibility settings.
Set the following condition:
Resource: Data Table > FirstSelectedRowKeyValue (This refers to the selected row in your Data Table).
Operator: IS NULL
Value: False (This means the header will show when FirstSelectedRowKeyValue is not null, i.e., a row is selected).
Avonni Tabs (Show only when an account is selected):
Select the Avonni Tabs component.
Go to its visibility settings.
Set the following condition:
Resource: Data Table > FirstSelectedRowKeyValue
Operator: IS NULL
Value: False (Same logic as the header - show when a row is selected).
Avonni Map (Show only when an account is selected AND the "Location" tab is active):
Select the Avonni Map component.
Go to its visibility settings.
Set the following two conditions (both must be true):
Condition 1:
Resource: Data Table > FirstSelectedRowKeyValue
Operator: IS NULL
Value: False (A row must be selected).
Condition 2:
Resource: Tabs > activeTabValue (This refers to the currently active tab in your Avonni Tabs component).
Operator: EQUAL
Value: location (The active tab must be the one named "location").
Why This Approach?
By using these visibility rules, we create a clean and focused user experience. The details (header, tabs, map) only appear when relevant, making the interface less cluttered and easier to navigate.
Note for Editable Columns: You must create if a column is editable. This ensures that any changes users make are saved back to Salesforce.
