| Category | Type | Tutorial |
|---|---|---|
| π Core | Build | Create a contact master details list |
| πΌοΈ Display | Build | Create a grid list with images |
| βοΈ Sorting | Build | Create a sortable list |
| βΆοΈ Actions | Build | Vertical list with actions |
| π Data | Guide | How to reorder items and update records |
| π Example | Example | Today's accounts to visit |
| π Example | Example | Build a reorderable list |
| Setting | What It Does |
|---|---|
| Strike-Through on Check | Draws a line through completed items β gives users instant visual confirmation |
| Show Check Counter | Displays a live count of checked items β e.g., "3 of 7 completed" |
| Divider | Description | Illustration |
|---|---|---|
| Top | Allows you to place a divider at the top of each item in the list. | |
| Bottom | Adds a divider line at the bottom of each list item. | |
| Around | Places divider lines both above and below each item in the list. | |
| Card | Sets each list item within its own card-like container, separated by dividers. | |
| Attribute | Options |
|---|---|
| Variant | Circle, Square, Empty |
| Icon Size | Small, Large |
| Position | Left, Top-Left, Bottom-Left, Right, Top-Right, Bottom-Right, Left-of-Title |
| Presence Position | Top-Left, Top-Right, Bottom-Left, Bottom-Right (for status indicators) |
| Variant | What It Looks Like |
|---|---|
| Standard | Label sits above the value β clean and readable |
| Label Hidden | No label shown β good when the field's purpose is obvious |
| Label Inline | Label sits to the left of the value β efficient use of horizontal space |
| Label Stacked | Label floats above the value when focused β modern, mobile-friendly |
Header section on a list
| Attribute | Purpose |
|---|---|
| Title | Identifies what the list contains |
| Caption | Short description or context below the title |
| Icon | Visual indicator of the list's purpose |
| Is Joined | Removes bottom border/shadow so the list blends with a component directly below it |
| Buttons | Global action buttons β wired to the "On Header Action" interaction |
How to add filters
How to activate the Sortable option
{% endhint %}
***
## Output Variables
The List exposes several output variables you can reference in your flow after the screen. To use them, select the screen element in Flow Builder, then the List component, and pick the output variable you need.
### Item Selection
When users check items in the List, these variables update automatically.
| Output variable | Type | What it returns |
| ----------------------- | ------------------------------ | ------------------------------------------------------------------------------------------------------------------------------------------- |
| **Selected Items** | Record Collection (SObject\[]) | All currently selected items as a collection of Salesforce records. Use this to loop through selected records in a subsequent flow element. |
| **Selected Item Names** | Text Collection (String\[]) | The names of all selected items, as a list of strings. |
> **Example:** After the List screen, use a **Loop** element to iterate through **Selected Items** and update each record's status β e.g., mark each selected Task as "Completed".
### Item Clicks
When users click on a list item (requires **Items Clickable** to be enabled), these variables tell you which item was clicked.
| Output variable | Type | What it returns |
| --------------------- | ---------------- | -------------------------------------------------------- |
| **Clicked Item** | Record (SObject) | The full Salesforce record of the item the user clicked. |
| **Clicked Item Name** | Text (String) | The name of the clicked item. |
> **Example:** Use **Clicked Item** in the next screen to display the full details of the record the user selected from the list.
### Action Clicks
When users click an item-level action button, these variables identify which action was triggered and on which item.
| Output variable | Type | What it returns |
| --------------------------------- | ---------------- | ---------------------------------------------------------------------------------------------------------------------------------------------------- |
| **Clicked Item Action Item** | Record (SObject) | The full Salesforce record of the item where the user clicked an action. |
| **Clicked Item Action Name** | Text (String) | The name of the action the user clicked (e.g., "Edit", "Delete"). Use in a **Decision** element to route the flow based on which action was pressed. |
| **Clicked Item Action Item Name** | Text (String) | The name of the item where the action was clicked. |
> **Example:** A row action called "Edit" is triggered. Use a **Decision** element to check if **Clicked Item Action Name** equals "Edit", then navigate to a record edit screen using the data from **Clicked Item Action Item**.
### Media Action Clicks
When users click a button within an image or video area of a list item, these variables capture the interaction.
| Output variable | Type | What it returns |
| --------------------------------------- | ---------------- | ----------------------------------------------------------------------------- |
| **Clicked Item Media Action Item** | Record (SObject) | The full Salesforce record of the item where the user clicked a media action. |
| **Clicked Item Media Action Name** | Text (String) | The name of the media action the user clicked. |
| **Clicked Item Media Action Item Name** | Text (String) | The name of the item where the media action was clicked. |
> **Example:** On a Product List with product images, a media action "View Details" lets users click the image to navigate to the product detail screen.
### Header Actions
| Output variable | Type | What it returns |
| ------------------------------ | ------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------ |
| **Clicked Header Action Name** | Text (String) | The name of the header action button the user clicked (e.g., "New", "Export"). Use in a **Decision** element to route the flow based on which header button was pressed. |
### Reordered Items
When users drag items into a new order (requires the **On Reorder** interaction to be configured), these variables capture the new sequence.
| Output variable | Type | What it returns |
| ------------------------ | ------------------------------ | -------------------------------------------------------------------------------------------------------------------------------------------------------------- |
| **Sorted Items SObject** | Record Collection (SObject\[]) | All items in their new order as a collection of Salesforce records. Use this with an **Update Records** element to save the new sort order back to Salesforce. |
| **Items** | Collection (ListItem\[]) | All items in their new order, using the component's internal ListItem format. Use **Sorted Items SObject** instead if you need standard Salesforce records. |
| **Items Serialized** | Text (String) | The reordered items as a JSON string. Useful for passing to an Apex action or subflow that expects serialized input. |
> **Example:** After the user drags items into a new order, pass **Sorted Items SObject** into an **Update Records** element to persist the new sequence in an "Order" field on each record.
### Component Metadata
| Output variable | Type | What it returns |
| ------------------- | ------- | --------------------------------------------------------------------------------------------------------------------------------- |
| **Number of Items** | Integer | The total number of items currently loaded in the list. Useful for displaying a count or making decisions when the list is empty. |