> For the complete documentation index, see [llms.txt](https://docs.avonnicomponents.com/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://docs.avonnicomponents.com/app-builder-components/app-builder-components/ax-gallery.md). # AX - Gallery ## Overview **AX - Gallery** is a Lightning App Builder component that displays images and videos in an interactive carousel on your record pages, app pages, and home pages. Use it to showcase product photos, training videos, project visuals, or any media stored in Salesforce. Configure the layout, navigation controls, and image sources—including Content Documents, static resources, or URLs—right in App Builder without code. Perfect for product catalogs, visual documentation, property listings, or any scenario where users need to browse through multiple images or videos ### Getting Started Use this simple tutorial to learn the basics of the Gallery component and start building your use cases. {% @arcade/embed url="" flowId="rDl7FfSoLHhDJwZwoZXc" %} ### Key features * **Media Sources:** Pulls images or videos from any Salesforce object—via a custom URL/Text field, or Salesforce Files using ContentDocument/ContentDocumentLink. * **Carousel Controls:** Auto-scroll with configurable duration, looping, navigation arrows, and progress indicator dots. * **Layout:** Adjustable image size and column count for a single-item or grid-like slide. * **Interactivity:** Optional click-through from each item to its record detail page. * **Header Customization:** Add a title, caption, icon, and record count to the gallery header. * **Dynamic Bindings:** Use `{{Record.FieldApiName}}` to filter or scope the gallery to the current record. ### Use Cases * **Product Record Page:** Display rotating product images for sales reps. * **Real Estate Listing Page:** Show property photos on listing records. * **Event or Campaign Page:** Present event photos or promotional banners. * **Internal News Carousel:** Share company updates via an image gallery. * **Featured Product Highlights:** Showcase top-selling items. * **Event Promotions:** Highlight upcoming webinars or sessions. *** {% hint style="info" %} **See it in a real project** [Fall course catalog](https://docs.avonnicomponents.com/projects/use-cases/portals-and-partner-sites/fall-course-catalog): A course catalog on a portal, six photos with price and seats left. {% endhint %} ## Configuration Add the Gallery component to a Lightning page in App Builder and configure it via the Properties Panel. ### Properties | Label | Type | Default | Required | Description | | ------------------------------- | ------- | ------- | -------- | --------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | | Object API Name | String | — | Yes | Specifies the API name of the Salesforce object from which the gallery component retrieves records. | | Filter | String | — | | Defines the SOQL WHERE clause conditions used to filter the records returned for the gallery. | | Order By | String | — | | Specifies the field and direction used to sort the returned records (e.g., CreatedDate DESC). | | Maximum Number of Records | Integer | — | | Sets the maximum number of records to retrieve and display in the gallery. Helps control load performance and visual density. | | Media Source Field Name | String | — | Yes | Identifies the API Name of the field in the record that contains the image or video to be displayed in the gallery. | | Title Field Name | String | — | | Specifies the API Name of the field in the record used as the main title displayed with each gallery item. | | Description Field Name | String | — | | Indicates the API Name of the field in the record used to provide a longer description or supporting text for each gallery item. | | Image Size | String | `full` | | Defines the display size of the image. Valid values include small, medium, large, and full. Controls how prominently the image appears within the component. Options: `small`, `medium`, `large`, `full`. | | Clickable | Boolean | `false` | | If true, each gallery item becomes an interactive link that navigates users to the detail page of the associated Salesforce record when clicked. | | Hide Indicator | Boolean | `false` | | Determines whether to display the carousel's progress indicator—typically a series of dots showing the current item's position in the gallery. | | Hide Navigation | Boolean | — | | Controls the visibility of left and right arrow buttons used for manually navigating through the gallery. When true, these arrows are hidden, limiting navigation to swipe or auto-scroll only. | | Loop | Boolean | `false` | | If set to true, the carousel loops back to the beginning after the last item is displayed, creating an infinite scroll experience. | | Disable Auto Scroll | Boolean | — | | Controls whether the carousel automatically transitions between items after a set interval. When true, auto-scroll is disabled and users must manually navigate through content. | | Scroll Duration (seconds) | Integer | `5` | | Defines the time interval, in seconds, between automatic transitions when auto-scroll is enabled. A typical default is 5 seconds. | | Number of Columns | Integer | `1` | | Number of items shown per panel (between 1 and 10; defaults to 1). Higher values create a grid-like slide (e.g., 3 across for product tiles). | | Header - Title | String | — | | Text displayed as the main title in the component header. Example: “Gallery” or “Images”, “Documents”. | | Header - Caption | String | — | | Subheading text displayed below the header title to provide context. | | Header - Icon Name | String | — | | The Lightning Design System name of the icon (e.g.,… | | Header - Show Number of Records | Boolean | — | | If true, displays the total number of items in the gallery at the top of the component. | | Display as Card | Boolean | `true` | | When enabled, the entire gallery is wrapped in a card-style visual container with padding and a subtle border or shadow. | *Best Practice:* Use Filter to show relevant media; set Number of Columns based on screen size. Dynamic values (e.g., `{{Record.FieldApiName}}`) work only on Lightning Record Pages. *Note:* No Interactions or Style tabs are available in App Builder; functionality is managed via properties. *** ## Use Case Examples ### Example 1: Product Catalog Gallery on Home/App Page {% @arcade/embed url="" flowId="Tya9fmemVcuptimBgYcy" %} **Scenario**: Display a visual catalog of headphone products in a carousel format, allowing users to browse and navigate to individual product details. **Prerequisites**: This example assumes you have Product2 records with a custom field `Type__c` (picklist containing product categories like "Headphone", "Speaker", etc.) and `ThumbnailUrl__c` (text field containing image URLs). **Steps** {% stepper %} {% step %} #### Navigate to Lightning App Builder Edit your Product2 record page. {% endstep %} {% step %} #### Drag the **AX - Gallery** component onto your page layout {% endstep %} {% step %} #### **Configure Data Source** * Set **Object API Name** to `Product2` * Set **Filter** to `Type__c = 'Headphone'` (shows only headphone products) * Set **Media Source Field Name** to `ThumbnailUrl__c` (custom field containing product image URLs) * Set **Title Field Name** to `Name` (displays product names) {% endstep %} {% step %} #### **Configure Display Options** * Check **Display as Card** for styled container presentation * Set **Number of Columns** to `3` (shows three product images per slide) * Check **Clickable** for navigation to individual product records {% endstep %} {% step %} #### Save and test the gallery functionality {% endstep %} {% endstepper %} **Result**: A product catalog gallery showing all headphone products in an interactive carousel, perfect for product browsing and discovery on dashboard or catalog pages ### Example 2: Knowledge Article Carousel {% @arcade/embed url="" flowId="PAKI4TauBAosRW7Zb8FI" %} **Scenario:** Display a carousel of your company's most recent articles with images on your Home Page. **Prerequisites:** * Create a `ImageId__c` text field to store the ContentDocumentId on the Knowledge object * Create a picklist field `Type__c` ('News'...) for filtering {% stepper %} {% step %} #### Navigate to Lightning App Builder Edit your Home page. {% endstep %} {% step %} #### Drag the **AX - Gallery** component onto your page layout {% endstep %} {% step %} #### **Configure Data Source** * Set **Object API Name** to Knowledge\_\_kav * Set **Media Source Field Name** to ImageId\_\_c (custom field containing product image URLs) * Set **Filter** to `Type__c = 'News'` * Set **Title Field Name** to `Name` (displays product names) * Set **Order By** to `CreatedDate DESC` (show most recent articles first) {% endstep %} {% step %} #### **Configure Display Options** * Choose **Image Size** = `full` * Check **Clickable** for navigation to individual product records * Set **Number of Columns** to `3` (shows three articles per slide) {% endstep %} {% step %} #### Customize Header * **Header - Title** = `Latest Company News` * Check **Display as Card** for styled container presentation {% endstep %} {% step %} #### Save & Review {% endstep %} {% endstepper %} *** ## Key Considerations * **Data Source:** Use ContentDocument for org-wide files; filter by FileType (e.g., PNG, JPG). * **Performance:** Limit records with Maximum Number of Records for faster loading. * **Navigation:** Enable Item Clickable for record access; test URL reachability. * **Accessibility:** Ensure media alt text is available via descriptions. * **Limitations:** No file upload or editing; respect sharing/FLS rules. *** ## Troubleshooting Common Issues * **No Media Displayed:** Check Media Source Field and Filter syntax; verify field permissions. * **Carousel Not Scrolling:** Ensure Disable Auto Scroll is false and Scroll Duration is set. * **Click Not Working:** Confirm Item Clickable is true and records have valid IDs. * **If Issues Persist:** Contact our support team at for assistance. --- # Agent Instructions This documentation is published with GitBook. GitBook is the documentation platform designed so that both humans and AI agents can read, navigate, and reason over technical content effectively. Learn more at gitbook.com. ## Querying This Documentation If you need additional information that is not directly available in this page, you can query the documentation by asking a question. Perform an HTTP GET request on the following URL with the `ask` and `goal` query parameters: ``` GET https://docs.avonnicomponents.com/app-builder-components/app-builder-components/ax-gallery.md?ask=&goal= ``` `ask` is the immediate question: it should be specific, self-contained, and written in natural language. `goal` is what the user is ultimately trying to achieve, the reason they need the answer. Sharing it helps GitBook give you a better, more relevant answer. A goal is most helpful when it describes the outcome the user wants rather than restating the question. For example, with `ask=how do I create an API token`, a goal like `automate deployments from our CI pipeline` lets GitBook tailor the answer to that use case. 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.