How to change dynamically Avonni Button Menu Icons

Overview

Want to make your user interface more responsive? This tutorial will show you how to change the Avonni Button Menu icon dynamically. This lets you provide immediate visual feedback to the user based on their choices. This tutorial leverages reactive screens from Flow Builder.

Guided Steps

Step 1: Drag the Avonni Button menu

And enter a component API Name

Step 2: configure the Avonni Button Menu items

Let's customize the Avonni Button Menu with the choices you want to offer the user. Here's what to do:

• Find the Menu Items Settings: In the settings for your Avonni Button Menu component, look for the area labeled "Menu Items" or something similar.

• Add Your Choices: Here's where you'll create each option the user will see. Think about the different views you have (like table, kanban, etc.) Each view choice will be a separate menu item.

Important:

• Labels: Give each menu item a clear name that tells the user what kind of view it changes to.

• Values: Each menu item needs a unique 'value'. These 'values' will be important later when we create formulas

Step 3: Create a formula for the Selected Icon Name

This formula dynamically controls the displayed icon based on the user's selection in the Avonni button menu component.

IF({!viewButtonMenu.value}=='table', 'utility:table', 
IF({!viewButtonMenu.value}=='kanban', 'utility:kanban', 
IF({!viewButtonMenu.value}=='grid', 'utility:tile_card_list',  
IF({!viewButtonMenu.value}=='groupby', 'utility:summarydetail', 
IF({!viewButtonMenu.value}=='calendar', 'utility:shift_pattern', 
IF({!viewButtonMenu.value}=='map', 'utility:location', 'utility:table')))) ))

Here's a breakdown of how it works:

1: Check Avonni Button Menu Selection

• The formula first checks the value of the {!viewButtonMenu.value} attribute. This attribute stores the user's chosen view mode from the Avonni button menu component (assuming viewButtonMenu is the API name of the component).

2: Match Selection to Icon Name

• Similar to before, the formula checks the value of {!viewButtonMenu.value} against different options:

  • If the value is 'table', the formula returns 'utility:table'.

  • If the value is 'kanban', it returns 'utility:kanban', and so on.

• These string values likely represent the names of icons within Salesforce's icon library, prefixed with "utility:".

3: Default Icon

• If none of the conditions match (meaning the user selected an unsupported view mode), the formula uses 'utility:table' as the default icon.

In essence, this formula acts like a lookup table. Based on the user's selection in the Avonni button menu, it retrieves the corresponding icon name to display.

Example:

• If the user selects 'kanban' from the Avonni button menu, the formula evaluates to 'utility:kanban' and displays the kanban board icon.

Additional Notes:

• Ensure the values in {!viewButtonMenu.value} exactly match the options available in your Avonni button menu component.

• The specific icon names used ('utility:table', 'utility:kanban', etc.) depend on Salesforce's icon library. For the exact icon names available, refer to the Salesforce documentation.

Step 4: Create a formula for the selected view

This formula is used for dynamic display or behavior changes based on the value of a field called "viewButtonMenu".

IF({!viewButtonMenu.value}=='', 'table', {!viewButtonMenu.value})

Here's how it breaks down:

Core Logic

• IF({!viewButtonMenu.value}=='', 'table', {!viewButtonMenu.value})

  This is essentially saying:

  • IF the value in the 'viewButtonMenu' field is empty (''), THEN display the word 'table'.

  • ELSE (if the field is not empty), display the actual value that's stored in the 'viewButtonMenu' field.

Step 5 : Assign formulas to the Avonni Button properties.

Now that you've created your formulas, let's link them to your Avonni Button Menu to make everything work together. Here's how:

• "Selected Icon Name" Formula:

  • Find the "Icon Name" attribute in your Avonni Button Menu's settings.

  • Assign the formula that dynamically chooses the icon (the one we worked on earlier) to this "Icon Name" attribute.

• "Selected View" Formula:

  • Locate the "Value" attribute in your Avonni Button Menu's settings.

  • Assign the formula that tracks the user's view selection to this "Value" attribute.

Key Point: By placing these formulas in the right spots, you're telling the Avonni Button Menu:

• Which icon to display based on the user's choice.

• How to track the user's current view selection.

Step 6: Set component visibility on elements

Now we'll ensure the right components appear when the user clicks different options in your Avonni Button Menu. Here's how:

1. Focus on a Component: Based on the menu selection, choose one component to make visible or hidden.

2. Find Visibility Settings: Open the settings of that component and look for the option like "Set Component Visibility".

3. Write a Visibility Rule: You'll need to write a short rule that goes like this:

   • If the Avonni Button Menu's "Value" attribute equals... (and here, you'll put the exact value from Step 3.1 that matches this component)...

   • Then show this component.

Key Points

• You'll repeat this for each component you want to show or hide dynamically.

• The values you used back in Step 3.1 are crucial – make sure those values match here for the logic to work.