Adding Row Actions

Overview

This guide is designed to walk you through adding row actions to an Avonni Data Table that displays a list of opportunities. While the table will source data from a GetRecords collection or a Query, it focuses on enabling row actions. These actions provide a dropdown menu for additional options when users click on a row. The tutorial is set in the context of displaying opportunities to give a practical example for implementing row actions.

The final result looks like this:

Steps

Here are the steps to build the Data Table as shown above:

1. Add a datatable component

The first step starts with adding the Avonni Datatable to a Screen Flow. Add the Avonni Datatable by following the below steps:

Drag the Datatable component from the components list to your screen flow (located under the custom section)
Enter an API Name. For example, OpportunityDatatable, DatatableOpp... .
Click on the Open Component Builder button to access all the settings for the datatable

2. Configure initial settings

The Avonni Data Table provides a variety of customization options to help you create the table that best fits your needs:

Hide Table Header: Removes the header section at the top of the table.
Hide Checkbox Column: Eliminates the checkbox column usually found on the left side, typically used for selecting rows.
Show Row Number Column: Add a column displaying the row numbers for easier reference.
Hide Column Header Default Action: Removes the default actions usually available in each column header, such as sorting.
Suppress Bottom Bar: Hides the bar at the bottom of the table that often contains pagination controls or summary information.
Customize Column Widths: Allows you to manually set the width of each column for a more tailored display.

These options allow you to create a Data Table that aligns with your requirements.

3. Displaying data on the Data Table

In the Data Source section, you'll decide where the data for your datatable will come from. You have two choices:

Manual: Choose this if you plan to create the columns and input data by hand.
Variable: Opt for this if you wish to link the table to a source collection and automatically map the data.

For this example, we'll use the "Variable" option to populate the table with data from our source collection dynamically.

4. Configure Data Mapping

In this phase, you'll map the data to create table columns based on the fields in your source collection. Here's how to go about it:

Click "Add Columns": Start by clicking this button to create your initial column.
Choose a Source Field: Pick a field from the 'Source Field' dropdown. Your first column will be modeled after the selected field.
Specify Data Type (Optional): Data shows up as text by default. Choose a different display type from the' Type' dropdown if you want another one. See the section on 'Formatting with Data Types' for more details.
Other Customizations: You can also set other features for your column, like choosing an icon (Icon Name), making it editable (Editable), or allowing sorting (Sortable).
Save: Once you're happy with the settings, click the 'Save' button.
Add More Columns: To include additional columns, repeat the steps above.

This setup lets you define how each column will display data from your source collection.

5. Add row actions

Here's how to incorporate row actions into your Avonni datatable, depending on your data source:

If Using Manual Data Source:

Go to Data Source Section: Start by clicking the "Add Column" button in this section.
Column Name: Enter a name for the column, for instance, "action".
Type Selection: Choose "Action" from the 'Type' dropdown menu.
Create Row Action Items: Go to the 'Type attribute' section to set up your row action items.
Add More Actions: Repeat the previous step to include additional row action items.
Menu Alignment: Optionally, you can adjust how the action menu aligns with the row.
Save: Don't forget to save your changes.

If Using Variable Data Source:

Go to Data Mappings Section: Click the "Add Column" button here.
Data Type: Choose "Action" for the data type (leave the source field empty).
Create Row Action Items: Navigate to the 'Type attribute' section to make your row action items.
Add More Actions: Duplicate the above step to add more row action items.
Menu Alignment: Fine-tune the action menu's alignment if needed.
Save: Conclude by saving your updates.

Following these steps based on your data source, you'll successfully add row actions to your Avonni datatable.

Dive Deeper

pageHow to create an interaction to open another flow

6. Create interactions

The steps to create interactions on your row action items are as follows:

Go to the interaction tab
Click on the "Add Row Action" button to create your first interaction on row action items.
Select the Target name (your row action item) on which you would like to create your interaction.
Select the Type of interaction. Learn more about interactions.
Click Save.

You can assign multiple interactions to a single Row Action item, which can be mixed and matched as needed. If you set up multiple interactions for the same action type, they will execute in the sequence in which they were defined.

7. Customize the interaction to launch another flow

In this step, we'll demonstrate how to create an interaction using a row action that opens another flow. Specifically, we'll launch a flow to change the opportunity owner.

Open the Component Builder from the Data Table component.
Click on the Interactions Tab.
Choose the target name (in this case, "Change Owner").
Select "Open Flow Dialog" as the interaction type.
Select the flow you want to open when end-users trigger the action.
If needed, add the input variable. In this example, we're passing the Account record ID variable as input for the flow we're launching.
Add an "On Finish" item if needed. This can be used to reload the initial flow after the launched flow is completed.

Problems?

If your Data Table is not working correctly, make sure you have adequately added a key field (usually the unique ID of your record). Failing to add a key field may result in incorrect interaction behavior and incorrect inline editing capabilities.

Last updated 4 months ago