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.

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.

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

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

Navigate to Lightning App Builder

Edit your Product2 record page.

Drag the AX - Gallery component onto your page layout

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)

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

Save and test the gallery functionality

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

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

Navigate to Lightning App Builder

Edit your Home page.

Drag the AX - Gallery component onto your page layout

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 : Type__c = News
Set Title Field Name to Name (displays product names)
Order by CreatedDate desc (show most recent articles first)

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)

Customize Header

Header Title = Latest Company News
Check Display as Card for styled container presentation

Save & Review

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 [email protected] for assistance.

Last updated 1 month ago

Was this helpful?