# Product showcase

## Overview

This tutorial will show you how to create a product showcase in Salesforce using the Avonni Carousel component. You'll end up with a display that shows a list of products, and when users click on a product, they'll see more details about it.

**What You'll Learn:**

* How to use the Avonni Header and Carousel components to build your showcase.
* How to make the showcase look good and work well

## Final Result

<figure><img src="/files/wZ4lFLdGLq3TtX51zbH7" alt=""><figcaption></figcaption></figure>

{% hint style="info" %}
**What you'll learn**

* [How to create a screen flow](#1.-create-a-screen-flow)
* [How to add a GetRecords element](#2.-create-a-get-records-collection)
* [How to use the Avonni Component Builder](#4.-add-the-header-component)
* [How to configure Data Mapping](#7.-configure-the-carousel)
* [How to create an interaction](#7.-configure-the-carousel)
* [How to add a second screen flow](#9.-add-the-second-screen-element)
  {% endhint %}

## Steps

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

### 1️⃣ Create a Get Records collection

First, we need to get a list of all your products from Salesforce.

1. **Add a 'Get Records' Element:** Flow Builder finds your product information.
2. **Label it 'GetProducts'**: This helps us keep track of this data later in the flow.
3. **Choose the 'Product' Object:** We want product data specifically.
4. **No Conditions:** Select "None - Get all Task Records" so we get *all* your products.
5. **Get All Records:** Make sure "All Records" is selected to get everything.
6. **Click 'Done'**

{% @arcade/embed flowId="7hUotgEpiWpgeA12ADyA" url="<https://app.arcade.software/share/7hUotgEpiWpgeA12ADyA>" %}

### 2️⃣ 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`**"

{% @arcade/embed flowId="zFJydP101VdvxE3v8Jmh" url="<https://app.arcade.software/share/zFJydP101VdvxE3v8Jmh>" %}

### 3️⃣ 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*.

{% @arcade/embed flowId="t8JDUQqme5PzhLxLLfiR" url="<https://app.arcade.software/share/t8JDUQqme5PzhLxLLfiR>" %}

### 4️⃣ 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`**

{% @arcade/embed flowId="cz5N8g3ajfGJyP2XcXvD" url="<https://app.arcade.software/share/cz5N8g3ajfGJyP2XcXvD>" %}

#### Adding an action&#x20;

Actions enable users to trigger [an interaction](/flow/component-builder/interactions-panel.md). Here we will add a new button to let users create a new product.&#x20;

* Expand the Actions section
* Click on the "**`Add Actions`**" button
* Enter a label: "**New**"

{% @arcade/embed flowId="PAxAeGdOaYSVkLd35jQF" url="<https://app.arcade.software/share/PAxAeGdOaYSVkLd35jQF>" %}

#### 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**.

{% @arcade/embed flowId="Vmk58XHw1ZPikqBS0P1G" url="<https://app.arcade.software/share/Vmk58XHw1ZPikqBS0P1G>" %}

#### 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**.

{% @arcade/embed flowId="PElPgnux4CmDc84ScX43" url="<https://app.arcade.software/share/PElPgnux4CmDc84ScX43>" %}

### 5️⃣ Add the Carousel component

Next, let's add the Carousel component right below the Header. This is where we'll showcase your products.

1. Find the Carousel component in the list of components (it's in the "Custom" section).
2. Drag the Carousel component and drop it onto your screen, below the Header.
3. Give it a name, like "carouselProducts". This helps us identify it later in the flow

{% @arcade/embed flowId="p8yYqzMp1hPPTDkkmO7I" url="<https://app.arcade.software/share/p8yYqzMp1hPPTDkkmO7I>" %}

### 6️⃣ Configure the Carousel

#### 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`**

{% hint style="info" %}
You can use the "Query Data Source" option here. It's the simplest way to connect directly to your Salesforce data, and it saves you from having to do that separate "Get Records" step we did earlier.&#x20;
{% endhint %}

{% @arcade/embed flowId="xpwl62gMBnVc7OxK73be" url="<https://app.arcade.software/share/xpwl62gMBnVc7OxK73be>" %}

**Configure Data Mapping**

First, let's select our source collection, the one created [in Step 2](#2.-create-a-get-records-collection) > 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:&#x20;

* **Title** => Product Name
* **Description** => Product Description
* **Image Source** => Display URL
* **Name** => Product ID

{% @arcade/embed flowId="dSkS2gqm585gvvHjxJiW" url="<https://app.arcade.software/share/dSkS2gqm585gvvHjxJiW>" %}

**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

{% @arcade/embed flowId="7twhbcEdW19KDPOmxc1l" url="<https://app.arcade.software/share/7twhbcEdW19KDPOmxc1l>" %}

### 7️⃣ Get the Details of the Clicked Product

We need to create a second "Get Records" action to show the details of the specific product the user clicks on. This ensures they only see the information they're interested in.

1. **Add a 'Get Records' Element:** This will fetch the specific product details.
2. **Give it a Label:** Choose a name that makes sense, like "GetClickedProductDetails"
3. **Choose the 'Product' Object:** Again, we're looking for product data.
4. **Add a Condition:** Select "All conditions are met"
5. **Set the Filter:** The filter should be: "Id equals carousel > Clicked Item Id" (This connects it to the product the user clicked on in the Carousel)
6. **Get Only One Record:** Select "Only the first record" since we only want details for one product at a time.
7. **Click 'Done'**

{% @arcade/embed flowId="HQipTLNGOVddxuzvpmOA" url="<https://app.arcade.software/share/HQipTLNGOVddxuzvpmOA>" %}

### 8️⃣ 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`**"

### 9️⃣ 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`**.

{% @arcade/embed flowId="Lkmrl2EREYXOMFFFKevi" url="<https://app.arcade.software/share/Lkmrl2EREYXOMFFFKevi>" %}

**Add product information description.**

* You can add a **Display text element** or an image to display information about the selected product.&#x20;
* In the **`Insert a resource`** field, select the variable created in [Step 8](#8.-create-a-second-get-records-collection) and add the field information that needs to be displayed.

{% @arcade/embed flowId="zBDoaxQVlmcYtqM23SQW" url="<https://app.arcade.software/share/zBDoaxQVlmcYtqM23SQW>" %}

## 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.&#x20;

{% hint style="info" %}
**Having trouble with this tutorial**? [Contact Avonni support for help](/flow/help/support-and-troubleshooting.md).
{% endhint %}


---

# Agent Instructions: Querying This Documentation

If you need additional information that is not directly available in this page, you can query the documentation dynamically by asking a question.

Perform an HTTP GET request on the current page URL with the `ask` query parameter:

```
GET https://docs.avonnicomponents.com/flow/tutorials/projects/product-showcase.md?ask=<question>
```

The question should be specific, self-contained, and written in natural language.
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.