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

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.

Property	Type	Description	Example
Object Api Name	String	API name of the Salesforce object for gallery data (e.g., Product2, ContentDocument).	Product2
Filter	String	SOQL WHERE clause to filter records (e.g., Status__c = 'Active').	Category__c = 'Featured'
Order By	String	Field and direction to sort records (e.g., CreatedDate DESC).	Name ASC
Maximum Number of Records	Integer	Limits the number of records displayed (e.g., 5).	10
Media Source Field	String	Field with URL or ContentDocumentId for media (e.g., ThumbnailUrl__c).	Id (for ContentDocument)
Title Field Name	String	Field for the gallery item title (e.g., Name).	Title
Description Field Name	String	Field for the gallery item description (e.g., Description).	ShortDescription__c
Hide Indicator	Boolean	Hides the progress dots if true.	false
Hide Navigation	Boolean	Hides navigation arrows if true.	false
Loop	Boolean	Enables continuous looping of the carousel if true.	true
Disable Auto Scroll	Boolean	Disables automatic scrolling if true.	false
Scroll Duration	Integer	Time (in seconds) between auto-scroll transitions (default 5).	5
Display as Card	Boolean	Shows the gallery in a card layout if true.	true
Columns	Integer	Number of items per panel (1 to 10, default 1).	3
Item Clickable	Boolean	Makes items clickable to redirect to the record page if true.	true

Best Practice: Use Filter to show relevant media; set 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.

---

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

1

Navigate to Lightning App Builder

Edit your Home page or create a custom App page

2

Drag the AX - Gallery component onto your page layout

3

Configure Data Source

• Set Object Api Name to Product2

• Set Filter to Type__c = 'Headphone' (shows only headphone products)

• Set Media Source Field to ThumbnailUrl__c (custom field containing product image URLs)

• Set Title Field Name to Name (displays product names)

4

Configure Display Options

• Check Display as Card for styled container presentation

• Set Columns to 3 (shows three product images per slide)

• Check Item Clickable for navigation to individual product records

5

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

---

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.

---

Summary

The Avonni Gallery component enhances Lightning pages with a customizable carousel for images or videos. It’s perfect for product showcases or event visuals