How to add clickable buttons

Overview

This tutorial guides you step-by-step through adding row-level action buttons to an Avonni Data Table within a Dynamic Component. You'll learn how to create buttons in each table row and trigger actions related to that specific record. Examples include buttons to Edit, Delete, View Details, or launch a custom process (like a Screen Flow).

---

Guided Tutorial

Follow these steps to add a column of action buttons and configure what happens when a user clicks them.

Phase 1: Setup and Configuration

1

Open the Dynamic Component Builder

• Click the App Launcher (waffle icon) in Salesforce.

• Search for and select Avonni Experiences.

• Navigate to the Dynamic Components tab.

• Create a New component or click the name of an existing component to open the builder.

2

Add or Select the Data Table

• If your canvas is empty, drag and drop the Data Table component from the components panel onto the canvas.

• If you already have a Data Table, simply click on it to open the properties panel on the right.

3

Add a New Column

• In the properties panel, locate the Data Mappings section.

• Click Add Column

4

Configure Column Type

• In the column settings, change the Type to Action or Buttons.

• Optional: Give the column a label (e.g., "Actions") or leave it blank for an icon-only column.

5

Define the Buttons (Row Actions)

• Scroll down to the Type Attributes or Row Actions section within the column settings.

• Click Add Item for each button you want to appear (e.g., create one item named "Edit" and another named "Delete").

• Important: Assign a unique Name (ID) for each item (e.g., edit_action, delete_action). You will need these names in Phase 2.

• Optional: You can set icons (like utility:edit) or variants (like destructive) to style the buttons

Phase 2: Add Logic with Interactions

Row Actions and Buttons in Avonni Dynamic Components do not work automatically; you must define an "Interaction" to tell the system what to do when a specific button is clicked.

1. Switch to the Interactions Tab: At the top of the Component Builder properties panel, click the Interactions tab.

2. Add a New Interaction: Click Add Interaction.

3. Set the Trigger:

   • Target: Select the specific Row Action Name you defined in Phase 1 (e.g., edit_action).

   • Trigger: Ensure this is set to On Row Action.

4. Choose the Action:

   • Type: Select the action you want to perform. Common examples include:

     • Navigate: To go to a standard Salesforce page (like the Record Edit page).

     • Open Flow Dialog: To launch a Salesforce Screen Flow in a modal.

     • View all the interactions available

5. Configure the Action Details:

   • Example (Edit Record):

     • Type: Navigate

     • Page Reference Type: Record Page

     • Action Name: Edit

     • Record ID: Click the value field and simply select Record Id from the dropdown list. This maps the navigation target to the specific record ID coming from your Data Table.

   • Example (Launch Flow):

     • Type: Open Flow Dialog

     • Flow: Select your custom Flow.

     • Input Variables: Map your Flow's recordId variable to Record: Id from the Data Table

6. Save: Click Save to apply your changes.

Troubleshooting: Missing Flow Input Variables?

To see a variable in the Name dropdown menu, you must first ensure that the variable is marked as Available for input inside your Salesforce Flow Builder settings. If you do not see your variable listed, check your Flow configuration to confirm this setting is enabled

Phase 3: Test Your Component

1. Save the Component and exit the Builder.

2. View the page in Salesforce.

3. Click the button in one of the table rows and verify that the correct action (e.g., the Edit modal opens for that specific record) triggers

---

Interactive Guided Tutorial