Visual product catalog

The spring catalog on the account record: six products, one photo each, an Add to order button under every tile.

Overview

The spring catalog on the account record: six products, one photo each, an Add to order button under every tile. The rep never leaves the account. The catalog is one Image List Dynamic Component on the Account record page, reading product records through a Query data source. This tutorial rebuilds the catalog of the Northwind Distribution account page, in the Sales app, in your own org.

What you build

Avonni Image List on a Salesforce Account record page: six product photos in three columns, each with name, SKU, price and an Add to order button

• Open Northwind Distribution and the catalog sits under the highlights panel, headed 6 products · in stock above Spring catalog.

• Three tiles across, two rows: the product photo, then the name, the SKU and the price under it.

• A search box on the right of the header, for larger catalogs.

• Add to order under every tile fires an interaction that creates an order line on this account.

Before you start

Adapt this to your own org. Catalog Product and Order Line are objects this tutorial creates, because the org it was captured in had neither. If you already sell from Salesforce, your products are in Product2 with a price book and your lines in OrderItem: point the query at your product object and the Create Record interaction at your line object, and none of the other steps change. The grid itself asks for one thing only, a field holding an image address. Everything else on the tile is optional.

• The Avonni Experience Components package, which carries Dynamic Components, is installed. Whoever builds the component needs the Avonni Experiences Admin permission set; the people who use the page need a license and Avonni Dynamic Components User. See Installation & Licenses Management.

• An Account record page you can edit in Lightning App Builder. The examples below use the account Northwind Distribution (Type Partner, Industry Furniture retail) in the Sales app.

• Two custom objects, one for the catalog and one for the order lines the button creates:

Object	Field	Type	Role
Catalog Product (Catalog_Product__c)	Name	Text	The product name, Oslo lounge chair. The tile title.
	SKU__c	Text	OSL-CH-01. Also the display order of the tiles.
	Price__c	Currency, 0 decimal places	The unit price
	Category__c	Picklist: Seating, Tables, Lighting, Storage	Used by the filter variation in Take it further
	Photo_URL__c	URL	The photo on the tile
	In_Stock__c	Checkbox	The query filter
	Catalog_Line__c	Formula (Text)	OSL-CH-01 · $389 under the name, see step 1
Order Line (Order_Line__c)	Name	Auto Number, OL-{0000}
	Account__c	Lookup (Account)	The account the rep is looking at
	Product__c	Lookup (Catalog Product)	The tile the rep clicked
	Quantity__c	Number, 0 decimal places	1 at creation
	Unit_Price__c	Currency, 0 decimal places	The price at the time of the click

Sample data. Six products, all in stock:

Product	SKU	Category	Price
Oslo lounge chair	OSL-CH-01	Seating	389
Nordic oak table	NRD-TB-02	Tables	1,190
Arc floor lamp	ARC-LP-03	Lighting	145
Milo three-seat sofa	MIL-SF-04	Seating	1,780
Ladder bookshelf	LAD-BS-05	Storage	260
Birch bar stool	BRC-ST-06	Seating	129

Use six product photos you own. Store them where the org can load them and put the address in Photo URL: a static resource (/resource/Catalog_Photos/oslo-lounge-chair.jpg), a Salesforce File, or an external URL your org's Trusted URLs allow. Landscape photos of similar proportions make the grid even. The photos in the figure are not part of this tutorial.

Permissions. Users need Read on Catalog Product and its fields, and Create on Order Line for the button to work. The order line is created as the user who clicks, with that user's access.

Build it

1

Create the two objects, the formula and the products

1. In Setup, open Object Manager and create Catalog Product and Order Line with the fields listed above.

2. On Catalog Product, add the Catalog Line formula field (return type Text):

SKU__c & " · <strong>$" &
IF(Price__c >= 1000,
   TEXT(FLOOR(Price__c / 1000)) & "," & RIGHT("00" & TEXT(FLOOR(MOD(Price__c, 1000))), 3),
   TEXT(FLOOR(Price__c))) &
"</strong>"

1. Load the six sample products with In Stock checked.

Why: the tile's description is rich text, so the <strong> tags render the price in bold, as in the figure. Mapped straight to the currency field, the description would print 1190, with no symbol and no separator: a mapping inserts a field's value as it is stored.

2

Create the Dynamic Component and add the Image List

1. From the App Launcher, open the Avonni Components App and click New Component.

2. Name it Spring catalog and set Target Page Object to Account.

3. Drag Image List onto the canvas and select it. The Edit Image List panel opens on the right with the Properties, Interactions and Style tabs.

Why: the catalog itself is the same on every account. The Target Page Object is for the button: it is what gives the interaction the Id of the account the rep is looking at.

The Image List on the canvas with the six products, once the query of step 3 is connected.

3

Connect the query

1. In the Data Source section, select Query and click Create Query.

2. Choose the Catalog Product object.

3. Under Filters, add In_Stock__c equals true.

4. Set Order By to SKU__c, ascending, and click Done.

Why: the filter is what "in stock" means on the page. Take a product off the shelf and its tile is gone at the next load. See Query for the filter operators.

The query editor.

4

Map the tiles

In the Data Mappings section:

1. Label: Name.

2. Description: Catalog_Line__c.

3. Image Source: Photo_URL__c.

4. Leave Key Field on {{Record.Id}}.

5. Search Fields: Name and SKU__c.

Why: Image Source is the only mapping the list needs to show something; the other two put the name and the SKU and price line under each photo.

The tile mappings. Description is a rich text field, so the merge field sits in an editor.

5

Set the header and the search

1. In the Header section, set Title to Spring catalog and Caption to 6 products · in stock. Under Avatar, set Fallback Icon Name to standard:product, Variant to Circle and Size to Small.

2. In the Search section, turn on Show Search, set Placeholder to Search products and Position to Right.

Why: the caption is text you type, not a count the list computes. Update it when the catalog changes, or leave the number out of it.

Header. Variant and Size are under the Avatar block's Advanced Options.

Search.

6

Set the layout and the image

1. In the Layout section, set Number of Columns to 1 Col, Number of Columns Small Container to 2 Cols, Number of Columns Medium Container to 3 Cols and Number of Columns Large Container to 3 Cols.

2. In the Image section, set Position to Top and Crop Fit to Cover.

Why: three columns fill the main region of a desktop record page without shrinking the photos; the smaller breakpoints keep the tiles readable on a narrow screen. Position decides where the photo goes relative to the text: Top puts the photo first and the name, SKU and price under it. The default, Bottom, puts the text above the photo.

Layout and Image.

7

Add the button

In the Actions section, under Item Actions, add an action with Label Add to order, Name addToOrder and Icon Name utility:add.

Why: the action puts the button under every tile. Name is what the interaction in the next step listens for.

The item action.

8

Wire Add to order

1. Open the Interactions tab and, under Item Action Click, add an interaction.

2. Set Target Name to addToOrder and the type to Create Record.

3. In the Record Variable list, select Enter Record Data Manually, then set Object to Order_Line__c.

4. Map the fields:

   • Account__c: the current record's Id, {!$Component.RecordId}

   • Product__c: {{Record.Id}}

   • Unit_Price__c: {{Record.Price__c}}

   • Quantity__c: 1

5. Add a Show Toast action that runs when the record is created: Title Added to order, Message The product was added to this account's order, Variant Success.

Why: {{Record.…}} is the product behind the tile the rep clicked, and {!$Component.RecordId} is the account the page is on. The two together are what makes one button work for every product on every account. See Using Variables and Component Data for the current record variables.

The Create Record interaction under Item Action Click, with the Show Toast on success.

9

Save, activate, add to the record page

1. Click Save, then Activate.

2. In Lightning App Builder, open the Account record page, drag AX - Dynamic Component into the main region under the highlights panel and select Spring catalog in its Properties Panel.

3. Click Save, then Activate the page for the Sales app. See Publishing your Dynamic Components.

The settings that matter

Setting	Value	Why
Image Source (imageSrc)	Photo_URL__c	The tile is the record: one product, one photo
Number of Columns Large Container (largeContainerCols)	3 Cols	Three clean columns in the main region of a desktop record page
Position (imageAttributes.position)	Top	Photo first, text under it. The default puts the text above the photo
Crop Fit (imageAttributes.cropFit)	Cover	Tiles of the same shape whatever the proportions of the photos
Item Actions (actions)	Add to order, name addToOrder	One button per tile, the same on every tile
Show Search and Position (searchable, searchEngineAttributes.position)	on, Right	The search box on the right of the header, ready for a catalog of two hundred products

Interactions

Trigger	Action	What to set
Item Action Click, Target Name addToOrder	Create Record, Enter Record Data Manually	Object Order_Line__c. Account__c = {!$Component.RecordId}, Product__c = {{Record.Id}}, Unit_Price__c = {{Record.Price__c}}, Quantity__c = 1.
The same, when the record is created	Show Toast	A success toast such as Added to order.
Item Click, optional	Navigate	Page Reference Type Record Page, Object API Name Catalog_Product__c, Record Id {{Record.Id}}, Action Name view. Requires Items Clickable on in Content.

Try it

1. Open Northwind Distribution. Six tiles in three columns, in SKU order, under 6 products · in stock and Spring catalog.

2. Type oak in Search products: one tile left, Nordic oak table. Clear the search.

3. Click Add to order under Arc floor lamp. The toast appears, and an Order Line OL-0001 now exists with Account Northwind Distribution, Product Arc floor lamp, Unit Price 145 and Quantity 1.

4. Uncheck In Stock on Birch bar stool and reload the page: five tiles. Check it again.

Take it further

The same list exists on two other Avonni surfaces:

• Image List for Flow Screen Components, inside a screen flow.

• Image List for LWC Components, as the avonni-dd-image-list tag in your own component.

Three variations worth trying:

• Add Category__c under Filters in Data Mappings, and set Type to Horizontal in the Filter section: Seating, Tables, Lighting and Storage become filter chips above the grid. Filters are a Query feature, which this catalog already is.

• For a catalog of a few hundred products, turn on Show Pagination in the Pagination section and set Number of Items per Page to 9.

• Switch Variant to Masonry in Content when the photos have different proportions and you would rather keep them whole than crop them.

Troubleshooting

Problem	Cause	Fix
The name and price show above the photo	Position in the Image section is on its default, Bottom.	Set Position to Top.
The description prints 1190 instead of NRD-TB-02 · $1,190	Description is mapped to the currency field. A mapping inserts the stored value, with no formatting.	Map Description to the Catalog_Line__c formula.
Add to order does nothing	No interaction is set under Item Action Click, or its Target Name does not match the action's Name, or you are in the builder preview, where interactions do not run.	Set Target Name to addToOrder, then test on the activated record page.
The order line is created with an empty Account	Target Page Object is not set to Account, or the component sits on a page that is not an Account record page, so {!$Component.RecordId} has no value.	Set Target Page Object to Account and place the component on the Account record page.
A tile has no photo	The URL in Photo_URL__c is not one the org can load: a wrong static resource path, or an external host that is not in your Trusted URLs.	Fix the URL, and set Image Fallback in the Image section so a missing photo still leaves a clean tile.
The Filter section has no effect	No field is selected under Filters in Data Mappings, or the data source is Manual. Filters are built from the fields of a Query.	Use a Query data source and select Category__c under Filters.