# 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. {% @arcade/embed flowId="ZZB5CVPhLEAPuCH3bj0u" url="" %} ### 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 {% hint style="success" %} #### 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. {% endhint %} *** ### Example 1: Contact Skills on Account Page {% @arcade/embed flowId="GbRkXqliIck3YIzIAzwA" url="" %} **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 {% @arcade/embed flowId="iHaVVPeFzzmKgYoXrkx8" url="" %} **Scenario**: Create a clear and impactful view of an Opportunity's products to allow your reps to see products at a glance. **Steps** {% stepper %} {% step %} #### **Navigate to Lightning App Builder** {% endstep %} {% step %} #### **Drag the Tags component onto your page layout** {% endstep %} {% step %} #### **Configure the data source** * Set **Object API Name** to `OpportunityLineItem` * Set **Filter** to `OpportunityId = '{{Record.Id}}'` * Set **Order By** to `Name` {% endstep %} {% step %} #### **Configure the header** * Set **Header Title** to `SelectedProducts` * Set **Header Icon Name** to `standard:product` * Set **Display as Card** to check for visual separation {% endstep %} {% step %} #### **Save & review** {% endstep %} {% endstepper %} *** ## 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. --- # Agent Instructions: Querying This Documentation If you need additional information that is not directly available in this page, you can query the documentation dynamically by asking a question. Perform an HTTP GET request on the current page URL with the `ask` query parameter: ``` GET https://docs.avonnicomponents.com/app-builder-components/app-builder-components/ax-tags.md?ask= ``` The question should be specific, self-contained, and written in natural language. The response will contain a direct answer to the question and relevant excerpts and sources from the documentation. Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.