Ctrlk
WebsiteYouTube Channel🪄 Build with AISubscribe to Updates
For the complete documentation index, see llms.txt. This page is also available as Markdown.

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

Getting Started

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

spinner

Key features

  • Data Integration: Pulls related records from any Salesforce object using a SOQL filter, sort order, and record limit.

  • Visual Tags: Displays each record as a compact tag, with a variant field driving color-coded styling (success, warning, error).

  • Interactivity: Optional clickable tags that navigate directly to the related record's detail page.

  • Layout Options: Choose single-line or wrapped display, and outlined or filled tag styles.

  • Customization: Configurable header with title, caption, icon, and an optional count of displayed records.

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

Add the Tags component to a Lightning record, app, or home page in App Builder and configure via the Properties Panel.

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.

Properties

Label
Type
Default
Required
Description

Object API Name

String

—

Yes

API name of the Salesforce object used to retrieve the records displayed as tags. Examples: Contact, Opportunity, Custom_Object__c.

Filter

String

—

SOQL WHERE clause used to filter which records are shown as tags. Example: Status = 'Active' or Type__c = 'Premium'.

Order By

String

—

Field API name used to sort retrieved records before rendering tags. Example: Name, CreatedDate.

Maximum Number of Records

Integer

—

The maximum number of records to retrieve and display as tags. Useful for preventing clutter when there are many related records.

Label Field Name

String

—

Yes

Field API name used as the text label for each tag. Examples: Name, Skill__c, Category__c.

Variant Field Name

String

—

Field API name that determines the tag's visual variant (e.g., success, warning, error) for conditional formatting. Examples: Priority__c, Status__c.

Clickable

Boolean

false

If true, makes tags clickable so they link directly to the related record's detail page.

Outline

Boolean

false

If true, displays tags with an outlined style instead of a solid fill.

Single Line

Boolean

false

If true, forces all tags to display in a single horizontal line. Overflowing tags will be truncated or hidden.

Header - Title

String

—

Text shown as the main heading above the tags. Ideal for contextual labeling, such as “Related Skills” or “Top Accounts.”

Header - Caption

String

—

Subheading text shown below the main title. Used to provide additional context such as “Sorted by Close Date” or “Filtered by Priority.”

Header - Icon Name

String

—

The Lightning Design System name of the icon (e.g.,…

Header - Show Number of Records

Boolean

false

If true, displays the total number of records associated with the tags in the header.

Display as Card

Boolean

true

If true, displays all tags inside a styled card container for better visual presentation in dashboards or record pages.

Use Case Examples

Example 1: Contact Skills on Contact Page

spinner

Scenario: Display a contact's skills with proficiency-based colour coding.

Prerequisites:

  • 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

1

Navigate to Lightning App Builder

Edit your Contact record page (Setup > Lightning App Builder > find your Contact page)

2

Drag the AX - Tags component onto your page layout

3

Configure the data source

Set Object API Name to Contact_Skill__c to connect your tags to the right Salesforce object.

4

Configure the filter and sort

  • Set Filter to Contact__c = '{{Record.Id}}' to only display skills related to the current contact

  • Set Order By to Name

5

Configure the tag label and colour

  • Set Label Field Name to Name

  • Set Variant Field Name to Colour_Value_F__c for proficiency-based colour coding

6

Configure the Header

  • Set Header - Title to Skills

  • Set Header - Icon Name to standard:skill for an intuitive look

7

Click Save to lock in your configuration changes

Result: The Contact page shows a "Skills" card with each skill displayed as a colour-coded tag — green for Advanced, yellow for Intermediate, red for Beginner.

Example 2: Display Opportunity related Products

spinner

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

Key Considerations

  • Visual Design: Use color variants sparingly; choose outline vs. filled and single- vs. multi-line display to suit your layout.

  • Performance: Set record limits and use specific filters to keep large datasets responsive.

  • User Experience: Enable clickable tags for navigation, and add header titles, captions, and meaningful variant fields for categorization.

  • Data Quality: Use concise label fields that read well as tags, and verify variant values map to meaningful visual distinctions.

Troubleshooting Common Issues

  • Tags Not Appearing: Verify the Object API Name and SOQL filter return results, and that users can view the object and fields.

  • Incorrect Colors/Variants: Confirm the Variant Field Name exists, is accessible, and contains values that map to Lightning Design System variant styles.

  • Layout Issues: If tags are cut off, raise the limit or adjust single-line; test responsive display and header length on mobile.

  • Navigation Problems: Ensure clickable tags point to existing records that users have permission to view.

Last updated

Was this helpful?