Aquileo | Add a Custom Icon to an Apex-Defined Action in Salesforce

Role hierarchy in Salesforce is a powerful mechanism that defines the access and visibility of records within an organization. By default, role hierarchies allow users higher in the hierarchy to access records owned by users below them. While this feature ensures data transparency and accessibility for managers and team leads, there are scenarios where you may want to override this behavior to enforce stricter record-level access controls.

In this article, we will explore how role hierarchy works, why overriding it may be necessary, and the various methods to achieve this in Salesforce. This guide is tailored for intermediate to advanced developers, covering both declarative and programmatic approaches with detailed examples.

What is an Invocable Action?

An invocable action in Salesforce is a mechanism that enables developers to encapsulate useful code functionality into a declarative building block. These building blocks can then be used by admins in tools like Flow Builder. Developers write an Apex class containing the logic and annotate it with the @InvocableMethod annotation, which allows the method to be invoked as an action.

Key Features:

Inputs and Outputs: Define input parameters and specify outputs that are passed back to the flow.
Declarative Integration: Once the method is annotated, it becomes accessible in Flow Builder as an action.
Reusable Logic: Encapsulate business logic for easy reuse across flows.

Adding a Custom Icon to an Invocable Action

By default, Apex-defined invocable actions in Flow Builder are displayed with a standard Lightning icon. However, Salesforce allows you to replace this with a custom icon, making the flow visually intuitive and easier to manage. The custom icon can be sourced from either:

Salesforce Lightning Design System (SLDS) icons, or
Custom SVG files uploaded as static resources.

Benefits of Custom Icons:

Improved visual representation for better identification.
Enhanced flow readability, especially in complex automations.
Easier organization in auto-layout mode.

Steps to Add a Custom Icon

1. Using an SLDS Icon

Salesforce Lightning Design System provides a wide range of pre-defined icons that can be used in invocable actions.

Format:

@InvocableMethod(label='Action Label' iconName='slds:category:name')

slds: Denotes that the icon is from the SLDS library.
category: The category of the icon (e.g., standard, custom).
name: The specific name of the icon within the category.

@InvocableMethod(label='Hash Text' iconName='slds:custom:custom76')
public static void hashTextMethod(List<String> inputs) {
    // Your logic here
}

This example sets the custom76 icon from the custom category as the icon for the invocable action.

SLDS Icon Considerations:

Only Standard Object and Custom Object icons are supported.
Ensure the icon name is valid; otherwise, Flow Builder will display the default lightning icon.

2. Using a Custom SVG File

Custom SVG files allow for a more tailored visual representation of your action. The SVG file must be uploaded as a static resource and meet specific formatting requirements.

Format:

@InvocableMethod(label='Action Label' iconName='resource:namespace__iconName:svgID')

resource: Indicates that a static resource is being used.
namespace: The namespace of the package containing the invocable action. For unmanaged packages, leave this blank.
iconName: The name of the static resource containing the SVG file.
svgID: The value of the id attribute in the <svg> element of the file.

Example:

@InvocableMethod(label='Lock Record' iconName='resource:Lock:top')
public static void lockRecordMethod(List<Id> recordIds) {
    // Your logic here
}

This example uses a custom SVG file named Lock with an id of top.

Requirements for the SVG File:

1. The <svg> element must include the following attributes:

id: Identifies the element.
xmlns: Specifies the XML namespace.
viewBox: Defines the coordinate system.

2. The <svg> element must not include style, height, or width attributes.

3. The file must not include <clipPath> elements.

4. Each <path> element in the file must include a fill attribute.

Uploading the SVG File:

Navigate to Setup > Static Resources.
Click New and upload your SVG file.
Provide a unique name for the static resource.

3. Testing the Custom Icon

After configuring the iconName attribute in your invocable action, test it in Flow Builder:

Open Flow Builder and create or edit a flow.
Add the invocable action to the canvas by selecting Action and searching for your method.
Switch to Auto-Layout mode to view the custom icon.
Verify that the custom icon appears as expected. If there’s an issue, Flow Builder will revert to the default Lightning icon.

Example Implementation

Here’s a complete example of an Apex class with a custom SVG icon:

Apex Class:

apex

public class CustomIconAction {
    @InvocableMethod(label='Encrypt Text' description='Encrypts the input text using AES encryption' 
                     iconName='resource:CustomIcons:encryptIcon')
    public static List<String> encryptText(List<String> inputTexts) {
        List<String> encryptedTexts = new List<String>();
        for (String text : inputTexts) {
            // Example encryption logic
            encryptedTexts.add(Crypto.encryptWithManagedIV('AES256', Blob.valueOf(text), Crypto.generateAesKey(256)).toString());
        }
        return encryptedTexts;
    }
}

SVG File (Static Resource):

<svg id="encryptIcon" xmlns="https://www.w3.org/2000/svg" viewBox="0 0 24 24">
  <path fill="#4CAF50" d="M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zM11 16h2v2h-2zm0-10h2v8h-2z"/>
</svg>

Upload this file to Static Resources with the name CustomIcons.

Best Practices and Considerations

Error Handling: If the custom icon cannot be rendered (e.g., due to incorrect formatting or missing file), Flow Builder will display the default Lightning icon.
Icon Testing: Always test your custom icons in a sandbox or developer org to ensure proper rendering.
Auto-Layout Only: Custom icons are visible only in auto-layout mode in Flow Builder.
SVG Optimization: Minimize SVG complexity to improve performance and ensure compatibility.

Conclusion

Custom icons in Apex-defined invocable actions enhance the usability and clarity of flows in Salesforce Flow Builder. By using SLDS icons or custom SVG files, developers can provide a tailored visual representation, making it easier for administrators and users to identify actions.

Follow the best practices and formatting guidelines to ensure your custom icons render correctly and contribute to a seamless user experience in Flow Builder.

Add a Custom Icon to an Apex-Defined Action in Salesforce