AX - Tags

Overview

AX - Tags is a Lightning App Builder component that displays your Salesforce records as compact, visual tags on record pages, app pages, and home pages.

Perfect for categorization displays, skill badges, multi-select picklist visualization, or anywhere you need a compact alternative to traditional lists

Use this simple tutorial to learn the basics of the Tags component and start building your use cases.

Use Cases

Account & Contact Management

• Display related industries, partner types, or product interests on Account pages

• Show skills, languages, or certifications linked to Contact records

• Highlight account segments, lead sources, or customer tiers

Opportunity & Sales Management

• Present associated products, competitor names, or key stakeholders on Opportunity pages

• Display sales territories, lead sources, or opportunity types

• Show related campaigns or marketing channels

---

Configuration

Using a variant for colour coding

This component allows for the displayed records to be colour coded. To achieve this, create a formula field on your object returning the values Success, Yellow and Error.

To each of these values will correspond a colour matched by the component as such :

• Success = Green

• Warning = Yellow

• Error = Red

Go to Use case example 1 to see this in action.

---

Example 1: Contact Skills on Account Page

Scenario: Display skills available within an account's team members with proficiency-based colour coding.

• Create a Skills custom object with the various skills you wish to track : Skill__c

• Create a Contact Skills custom object that will act as a junction object between Contacts and Skills : Contact_Skill__c

• Create 4 custom fields on the Contact_Skill__c object

  • Lookup field to Contact : Contact__c

  • Lookup field to Skill : Skill__c

  • Picklist to track your contact skill level : Proficiency_Level__c with values (Beginner / Intermediate / Advanced)

  • Text formula field to colour code your tags depending on the Proficiency_Level__c picklist value : Colour_Value_F__c

  • Use this code : CASE(Proficiency_Level__c, 'Beginner', 'Error', 'Intermediate', 'Warning', 'Success')

  • The component records will be colour coded according to these expected values: Success = Green, Warning = Yellow, Error = Red

Steps

Example 2: Display Opportunity related Products

Scenario: Create a clear and impactful view of an Opportunity's products to allow your reps to see products at a glance.

Steps

1

Navigate to Lightning App Builder

2

Drag the Tags component onto your page layout

3

Configure the data source

• Set Object API Name to OpportunityLineItem

• Set Filter to OpportunityId = '{{Record.Id}}'

• Set Order By to Name

4

Configure the header

• Set Header Title to SelectedProducts

• Set Header Icon Name to standard:product

• Set Display as Card to check for visual separation

5

Save & review

---

Best Practices

Visual Design

• Use color variants sparingly to maintain readability and avoid overwhelming users

• Choose between outline and filled styles based on your page's overall design language

• Consider single-line display for sidebars or compact layouts, multi-line for main content areas

Performance Considerations

• Set appropriate limits to prevent performance issues with large datasets

• Use specific filters to reduce query scope and improve load times

• Consider the number of tags when deciding on single-line vs. wrapping display

User Experience

• Enable clickable tags when users need to navigate to related records

• Provide meaningful header titles and captions to give context about the tag grouping

• Use variant fields that provide useful visual categorization (status, priority, type)

Data Quality

• Ensure label fields contain concise, readable text that works well in tag format

• Verify that variant field values map to meaningful visual distinctions

• Test with various data volumes to ensure the display remains useful

---

Troubleshooting

Tags Not Appearing

• Verify the Object API Name is correct and accessible to users

• Check that the filter syntax is valid SOQL and returns results

• Ensure users have permission to view the specified object and fields

Incorrect Colors/Variants

• Verify the Variant Field Name exists on the specified object

• Check that the field contains values that map to Lightning Design System variant styles

• Ensure the variant field is accessible to users viewing the component

Layout Issues

• If tags are cut off, consider increasing the limit or adjusting the single-line setting

• For responsive layouts, test how tags display on different screen sizes

• Adjust header text length to prevent wrapping issues on mobile devices

Navigation Problems

• Ensure clickable tags point to records that users have permission to view

• Verify that the related records exist and haven't been deleted

• Check that page layouts support the target record type for navigation

---

Summary

The Tags component provides an efficient way to display related records as visual, interactive elements within Salesforce Lightning pages. With flexible styling options, color-coded variants, and configurable layouts, it enables users to scan and interact with associated data quickly. The component supports both informational displays and navigation workflows, making it valuable for relationship visualization and quick access to related records across various business processes.