Product showcase

Learn the basics of the Avonni Flow Screen Components library with this example.

Overview

This tutorial requires installing the Avonni Flow Screen Components managed package on your Salesforce org.

This Product Showcase tutorial is a guide on how to build a product showcase component that displays a list of products using the Avonni Carousel flow screen component.

Objective

This tutorial aims to teach you how to build a product showcase component that displays a list of products and allows end-users to view product details when they click on a product.

Key Components

The tutorial covers using the Avonni Header and Carousel screen components, which is essential in creating a product showcase component that is visually appealing and functional.

Step-by-Step Guide

The tutorial is structured in a step-by-step format, making it easy for individuals to follow and understand. It walks the user through building a product showcase component, providing clear instructions and tutorials.

Final Result

Steps

The steps to build a products carousel components are as follows:

1. Create a Screen Flow

  • Go to your Salesforce setup page

  • Type "Flows" in the search bar and click on Flows under "Process Automation"

  • Click on the "New Flow" button to create a flow

  • Select "Screen Flow" and click Create.

2. Create a Get Records collection

The very first step starts with creating our Get Records collection to ask Flow Builder to fetch all the Product records by following the below steps:

  • Add a Get Records element to fetch product records

  • Enter a collection Label > GetProducts

  • Select the Product Object

  • Select "None - Get all Task Records" in the condition requirements field

  • Select "All Records" regarding the number of records to display

  • Click "Done"

3. Add our first screen element

The very first step starts with creating our Get Records collection to ask Flow Builder to fetch all the Task records by following the below steps:

  • Add a screen element

  • Enter a Label: Screen 1

  • Click on the Configure Header section and uncheck "Show Header"

  • Click on the Configure Footer section and uncheck "Show Footer"

4. Add the Header component

  • Drag the Header component from the components list to your screen flow (the Header Component is located under the custom section)

  • Enter an API Name. For example, showcaseHeader.

5. Configure the Header

General settings

  • Click on the Open Component Builder button to access all the settings for the Header component

  • Enter a header title (e.g: Products catalog)

  • Enter a header caption (e.g: Showcase)

  • Toggle "Is Joined" and "Pull to Boundary" to make our header component more appealing.

  • Expand the Avatar Section

  • Select an icon (standard:products) to add an icon next to the title and caption text.

  • Set the size to Medium

Adding an action

Actions enable users to trigger an interaction. Here we will add a new button to let users create a new product.

  • Expand the Actions section

  • Click on the "Add Actions" button

  • Enter a label: "New"

Create the interaction on the New button action

Here we are going to create a button to let users create new product

  • Click on the Interactions tab.

  • Click on the "Add Action Click" to create our interaction

  • Select a target name: "New"

  • Select Navigate as Type

  • Select Object Page as Page Reference Type

  • Select the Product object as the Object API Name

  • Select New as Action Name.

  • Click on Save.

Configure Header component styling settings

  • Click on the Style tab.

  • Open the Background Section to set the Header Background color to: #032d60

  • Open the Title and Caption section to set the color to white: #ffffff

  • Click on Done.

Under the Header component, we will drag the Carousel component, the second part of our product showcase component.

  • Drag the Carousel component from the components list to our screen flow (the Carousel component is located under the custom section)

  • Enter an API Name. For example, carouselProducts.

General settings

  • Click on the Open Component Builder button to access all the settings for the Carousel component

  • Set the Items per panel to 2 (same for Small, Medium and Large)

  • Expand the Data Source section and select Variable

Configure Data Mapping

First, let's select our source collection, the one created in Step 2 >ย GetProducts

Now we can link fields from our source collection to attributes from the Carousel element. The following fields can be associated to the following attributes:

  • Title => Product Name

  • Description => Product Description

  • Image Source => Display URL

  • Name => Product ID

Create an interaction on Item Click

We just completed the data mapping to map fields with carousel attributes. Now, we can create an interaction to define the action when users click on a Carousel item.

  • Click on the Interactions tab

  • Type => Flow Navigation

  • Type => Next Screen

8. Create a second Get Records collection

To display only the information about the product that was clicked, we need to create a new collection called "Get Records" and use it to filter the products. This will ensure that only the information about the selected product is displayed to the user, making it easier for them to find the information they need.

  • Add a Get Records element to fetch Product data

  • Enter a collection Label

  • Add the Product Object

  • Select "All conditions are met" in the condition requirements field

  • Add Id equals carousel >ย Clicked Item name

  • For the "How Many Records to Store" >ย Select Only the first record

  • Click "Done"

9. Add the second screen element

Now we are going to add a second screen element after our previous Get Record collection created by following the steps:

  • Add a screen element

  • Enter a Label: Screen 2

  • Click on the Configure Header section and uncheck "Show Header"

  • Click on the Configure Footer section and uncheck "Show Footer"

10. Add screen components on our Screen 2 element

Add a back button

  • Drag an Avonni button element

  • Add a button label "<< Back"

  • Set the variant to Neutral

  • Click on the Interactions tab

  • Select the Flow Navigation type and Previous Screen.

Add product information description.

  • You can add a Display text element or an image to display information about the selected product.

  • In the Insert a resource field, select the variable created in Step 8 and add the field information that needs to be displayed.

Troubleshooting

  • The click on a product item is not working > When mapping your data source, make sure to fill in the "Name" attribute. This is an important step to ensure that your data is correctly mapped and can be easily accessed and used.

  • My product image is not displayed >ย make sure to have a product image (or URL) in the corresponding field.

Last updated