> For the complete documentation index, see [llms.txt](https://docs.avonnicomponents.com/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://docs.avonnicomponents.com/flow/getting-started/quickstart-guide.md). # Quickstart Guide ## Intro Screen Flows are great at logic: decisions, loops, record updates. Their screens are another story. The standard components give you text inputs, picklists and a plain Data Table, and that is where most flows start to look like forms. Avonni Flow Screen Components add more than 70 components to the same Flow Builder palette (tables that read like dashboards, visual pickers, Kanban boards, maps, calendars, charts), configured with clicks, not code. In the next 15 minutes, you will build a **Deal Review** flow for the Account page: the account's open deals in a table people can read at a glance, a visual choice of what happens next, and the choice written back to the deals they picked. {% embed url="" %}
The Lakeshore Cold Chain account page running the Deal Review flow: a Deals to review table with a search box, stage badges, probability bars, amounts and close dates, and a Next button

What you will have at the end: Deal Review running on a real Account page, showing only this account's open deals.

{% hint style="success" %} #### **What you will learn** * How to add an Avonni component to a flow screen and open its Component Builder * How to feed it a record collection from a Get Records element * How to turn raw fields into badges, progress bars and links * How to use what the user picked (selected rows, a chosen option) in the rest of the flow {% endhint %} ## Standard screen vs Avonni screen Same flow, same query, same five deals. Above, Salesforce's standard Data Table. Below, the Avonni Data Table you are about to build.
Two tables of the same five deals: the standard Flow Data Table with plain text and numbers, and the Avonni Data Table with a header, a search box, linked deal names, stage badges and probability bars

The same open deals in the standard Flow Data Table (above) and the Avonni Data Table (below).

| On the Avonni side | What it gives your users | | -------------------------------------------- | ---------------------------------------------------------------- | | A header with an icon, a title and a caption | They know what they are looking at before they read a row | | Stage as a badge, Probability as a bar | The deal that needs attention stands out without reading numbers | | Deal names as links | One click opens the Opportunity | | A search box | They find a deal on a long list without scrolling | And the table is one component among many: search the palette for Avonni and you get Kanban boards, maps, calendars, schedulers, charts, visual pickers and dozens more, in the Flow Builder you already use. {% hint style="info" %} **Before you start.** The [Avonni Flow Screen Components](/flow/getting-started/installation-and-licenses-management.md) package is installed, and you have a license and the permission set. You also need an Account with a few open Opportunities to see anything. {% endhint %} *** ## Build the Deal Review flow {% stepper %} {% step %} #### Create the screen flow and its recordId 1. In **Setup**, search for **Flows** and click **New Flow**. Choose **Screen Flow**. 2. In the **Toolbox**, click **New Resource**: a **Variable** named `recordId`, **Data Type** Text, with **Available for input** checked. When the flow sits on a record page, Salesforce puts the page's record Id in `recordId`. Every step below builds on it. {% endstep %} {% step %} #### Get the account's open deals Add a **Get Records** element named `Get Open Deals`: * **Object**: Opportunity * **Filter**: **AccountId** equals `{!recordId}`, and **IsClosed** equals `False` * **Sort**: Amount, descending. **How Many Records to Store**: All records * **How to Store Record Data**: choose the fields (Name, StageName, Probability, Amount, CloseDate, NextStep) and store them in a new record collection variable, `OpenDeals` This is plain Flow, and it stays that way: the Avonni components read the variables your flow already has. {% endstep %} {% step %} #### Add an Avonni Data Table to a screen 1. Add a **Screen** named `Review Deals`. 2. In the screen's **Components** panel, search for `Avonni`. Every Avonni Flow Screen Component is listed there, next to the standard ones. 3. Drag **Avonni Data Table** onto the screen and set its **API Name** to `DealsTable`. 4. Click **Open Component Builder**.
The Edit Screen window with the Components panel searched for Avonni, listing Custom (75) Avonni components, and an Avonni Data Table named DealsTable on the screen

The screen editor's Components panel, filtered on Avonni.

{% endstep %} {% step %} #### Connect it to OpenDeals The Component Builder is where every Avonni component is configured: properties on the right, a live preview in the middle. 1. In the **Fields** panel on the left, set **Data Collection** to your `OpenDeals` variable. 2. Drag Name, StageName, Probability, Amount and CloseDate from the field list onto the table, then click each header's label to rename it: Deal, Stage, Probability, Amount, Close date. 3. In the **Properties** panel on the right, give the table a **Title** (`Deals to review`), a **Caption** (`Open opportunities on this account`) and an Opportunity icon. The preview shows the table's layout without your records: the data arrives when the flow runs.
The Edit Data Table Component window: Data Collection set to Open Deals in the Fields panel, the table preview with its header, search box and five columns, and the Properties panel

The Avonni Data Table's Component Builder, reading the OpenDeals collection.

{% endstep %} {% step %} #### Make the columns speak Each column header in the preview has a chevron. It opens the column's menu:
The Stage column's menu in the Component Builder: Hide Label, Type Attributes, Select Icon, Allow Sort, Allow Search, Allow Filtering and Remove Column

A column's menu. Type Attributes decides how its values are drawn.

* **Stage**: **Type Attributes**, then set **Type** to **Badge**. * **Probability**: **Type Attributes**, then set **Type** to **Progress Bar**. * **Deal**: **Type Attributes**, turn on **Linkify** so the name opens the Opportunity. Then **Allow Search** from the same menu, which adds the search box above the table.
The Type Attributes popover of the Stage column, with Type set to Badge and its background and text color options below

The Stage column's Type Attributes, set to Badge.

Click **Done**, then **Done** again to close the screen. Here is the screen your users will see:
The Review Deals screen running for one account: header, search box, linked deal names, stage badges, probability bars, amounts and close dates, and a Next button

Review Deals: a header, a search box, badges, progress bars and links, from five fields and no code.

{% endstep %} {% step %} #### Let them pick the next step 1. Add a second **Screen** named `Next Step`. 2. Drag **Avonni Visual Picker** onto it, **API Name** `NextStepPicker`, and open its Component Builder. 3. Add three items, each with a title, a description and an icon: `Schedule a call`, `Send a proposal`, `Flag at risk`. Set the **Label** to `What happens next on the selected deals?` and the **Type** to radio, so exactly one is picked. Three cards beat a picklist: the user sees every option and what it means before choosing.
The Next Step screen: three Visual Picker cards, Schedule a call selected, Send a proposal and Flag at risk, each with an icon and a description

The Next Step screen: an Avonni Visual Picker with three options, the first selected.

{% endstep %} {% step %} #### Write the choice to the selected deals Both Avonni components expose outputs, and the rest of the flow uses them like any other variable. 1. Add a **Loop** over `{!DealsTable.selectedRows}`: the deals the user ticked on the first screen. 2. Inside it, an **Assignment**: set the loop variable's **NextStep** to `{!NextStepPicker.value}`, then **Add** the loop variable to a new collection, `DealsToUpdate`. 3. After the loop, an **Update Records** on `DealsToUpdate`.
The Deal Review flow on the Flow Builder canvas: Start, Get Open Deals, Review Deals, Next Step, a Loop with a Set Next Step assignment, Update Deals, End

The whole Deal Review flow: two Avonni screens between standard Flow elements.

{% endstep %} {% step %} #### Activate it and add it to the Account page 1. Click **Save**, name the flow `Deal Review`, then **Activate**. 2. Open any Account, click the **Setup** gear and choose **Edit Page**. 3. Drag the standard **Flow** component onto the page and choose **Deal Review**. 4. Check **Pass record ID into this variable** next to `recordId`. This is what scopes the table to the account. 5. Click **Save**, then **Activation** if the page is not assigned yet. {% endstep %} {% endstepper %} *** ## Try it Open the Account, tick two deals and click **Next**. The table counts what you picked, and those rows are exactly what the Loop receives.
Review Deals with two rows ticked, Milwaukee route expansion and driver app licenses, and 2 items selected shown above the table

Two deals selected on Review Deals.

Pick **Send a proposal** and click **Next**. The two deals you ticked now carry *Send a proposal* in their Next Step, and the three others are untouched. We ran this exact flow on the account above to check it. ## What you just used | Idea | Here | Reuse it for | | ------------------------------------ | ---------------------------------- | -------------------------------------------------------------------- | | **Flow data in, Avonni display out** | Get Records feeding the Data Table | Any collection your flow already has | | **Column types** | Badge, Progress Bar, Linkify | Avatars, images, ratings, and many more types | | **Outputs back into the flow** | `selectedRows`, `value` | Loops, decisions, updates, subflows | | **More than tables** | Visual Picker | Kanban, Map, Calendar, Scheduler, Chart, and the rest of the palette | ## If something looks wrong | What you see | Likely cause | Fix | | -------------------------------------------------- | ------------------------------------------------------------- | ------------------------------------------------------------------------------------------- | | The preview in the Component Builder shows no rows | The builder previews the layout, not your records | Normal. Run the flow, or open it on a record page | | The table is empty on the page | `recordId` is not passed in, or the Account has no open deals | In Lightning App Builder, check **Pass record ID into this variable** on the Flow component | | The Component Builder takes a while to open | First load, or an expired session cache | Give it a few seconds; see the [Performance Guide](/flow/help/performance-guide.md) | | Nothing is updated after the last screen | The user selected no row, or the Loop reads the wrong output | Loop over `{!DealsTable.selectedRows}`, and require a selection if needed | Still stuck? [Support and troubleshooting](/flow/help/support-and-troubleshooting.md) has more. ## Keep going
Cover image

Explore every component

Tables, boards, maps, calendars, pickers: the whole Avonni palette, one page each.https://27923732-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F1FUd4apB9YHgCEMUFbVb%2Fuploads%2F0HSaxfrnvFiQTYX9P29b%2Fflow-quickstart-cover-palette.png?alt=mediaExplore All Flow Screen Components

Go further with the Data Table

Inline editing, grouping, filters, row actions and every column type.https://27923732-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F1FUd4apB9YHgCEMUFbVb%2Fuploads%2FpHAxyFjdVWMrbBr4TKfv%2Fflow-quickstart-cover-table.png?alt=mediaData Table

Make choices visual

Visual Picker cards for single or multiple choices, from static items, picklists or records.https://27923732-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F1FUd4apB9YHgCEMUFbVb%2Fuploads%2FuRkiEJBi4GzG8cX3pVri%2Fflow-quickstart-cover-picker.png?alt=mediaVisual Picker

Master the Component Builder

Properties, data sources, interactions and styles, the same way in every component.https://27923732-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F1FUd4apB9YHgCEMUFbVb%2Fuploads%2Fnf08u6HIsHPdYNatpacW%2Fflow-quickstart-cover-builder.png?alt=mediaOverview

Build it with AI

Describe the screen in a sentence and let your assistant build the flow.https://27923732-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F1FUd4apB9YHgCEMUFbVb%2Fuploads%2FCKhIsR7kHES04l2WsyE9%2Fflow-quickstart-cover-ai.png?alt=mediaPrompt Library

Follow a full project

Step-by-step flows solving real business problems, figures included.https://2532358799-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FODPvvv7Cx9Z9RECLn3oV%2Fuploads%2FGaRaxDuCAv0lSAEcL5Up%2Fprojects-boards-and-pipelines.png?alt=mediahttps://docs.avonnicomponents.com/projects/flow-components/home
--- # Agent Instructions This documentation is published with GitBook. GitBook is the documentation platform designed so that both humans and AI agents can read, navigate, and reason over technical content effectively. Learn more at gitbook.com. ## Querying This Documentation If you need additional information that is not directly available in this page, you can query the documentation by asking a question. Perform an HTTP GET request on the following URL with the `ask` and `goal` query parameters: ``` GET https://docs.avonnicomponents.com/flow/getting-started/quickstart-guide.md?ask=&goal= ``` `ask` is the immediate question: it should be specific, self-contained, and written in natural language. `goal` is what the user is ultimately trying to achieve, the reason they need the answer. Sharing it helps GitBook give you a better, more relevant answer. A goal is most helpful when it describes the outcome the user wants rather than restating the question. For example, with `ask=how do I create an API token`, a goal like `automate deployments from our CI pipeline` lets GitBook tailor the answer to that use case. 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.