# Accounts list group by industry

## Overview

This tutorial will guide you through creating a visually appealing and user-friendly card header screen flow using the [Dual Listbox component](https://docs.avonnicomponents.com/flow/flow-components/dual-listbox). You will learn how to customize the appearance and functionality of the Header. 

So, let's get started!

## Result

<figure><img src="https://27923732-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F1FUd4apB9YHgCEMUFbVb%2Fuploads%2Ffcb01xKwRpTz0X0BdL0i%2F2023-01-23_21-54-24.jpg?alt=media&#x26;token=2d3250a9-e44f-48a5-9fe1-0f38679ac5ee" alt=""><figcaption></figcaption></figure>

## Steps

### Create the flow

Type Flow in the setup menu

* Click on the "**New Flow**" button to create a new flow
* Select "**Screen Flow**"

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

### Create the Get Records element

We will create the Get Records collection to retrieve contact records.

* Add a "**Get Records**" element
* Enter an API Name
* Select the **Account** object
* Filter Contact Records
  * None - Get All Records
* Display "**All Records**"
* Click on the "**Done**" button

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

### Add the Dual Listbox Component to your screen flow

* Drag the [Dual Listbox Component](https://docs.avonnicomponents.com/flow/flow-components/dual-listbox) from the custom list (or type Avatar Group from the search box)
* Enter an API Name
* **Open the Component Builder** to access all the component's settings
* Set the following settings:
  * **Label**: Select Accounts
  * **Data Source**: Variable
    * Source collection: GetAccounts (preciously created)
  * **Data Mappings**
    * **Label**: Record.Name
    * **Description**: Record.Website
    * **Group By**: Record.Industry
    * **Icon name**: standard:account
    * **Icon Size**: X Small

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