Flow Screen Components

Flow Screen Components for Salesforce

Take your Screen Flows to the next level. 70+ drag-and-drop components that extend the standard Flow screen library. Configure visually, ship without code.

Start freeRequest a Demo
70+
Components
0
Lines of code
10
Free production licenses
25
No-code interactions

Filmed in a Salesforce org. The Avonni Data Table dropped on a flow screen and set to Opportunity in one click, then two deals picked and handed to the next screen.Try the interactive demo →

In a real org

See it run inside real screen flows

Each clip is an Avonni component on a flow screen, working on real Salesforce records. What the user does comes back to the flow.

Edit in place. A date and a stage change inline, then save for real.

Drop a deal. The next screen already knows which one moved.

Pick a site. The next screen opens on the marker you chose.

Pick a slot. The flow moves to the next step with the time.

Sign on the screen. The signature is saved as a file on the work order.

Outline the roof. The survey saves the drawing as a real Salesforce file.

Versus the standard screen

Where the standard components stop

Same org, same records, same gesture. Switch between the standard component and Avonni.

Standard component
The standard Data Table in a screen flow, plain text columns
The Avonni Data Table in the same screen flow, with badges, progress bars and totals

The library

Every component, one screen away

Data table

The data table Flow Builder never gave you.

25+ column types with inline editing, filtering, sorting and row actions. Users select and edit records in place, and the flow gets the results back.

See the Data Table on every surface →
Salesforce screen flow showing an Avonni data table with an amount being edited inline across two selected opportunity rows
Map

Put your records on the map.

Plot any set of records with custom markers and live geolocation. Users pick a place on the map and the flow gets the answer.

See the Map on every surface →
Salesforce screen flow showing an Avonni map with service location markers and an open popup for a Chicago service centre
Calendar

A real calendar, inside the flow.

Day, week and month views bound to your records. Users browse availability and pick a slot without leaving the screen.

See the Calendar on every surface →
Salesforce screen flow showing an Avonni calendar in week view with team events and an open slot ready to book
Combobox

Find the right record in two keystrokes.

Search any object with filters and a preview of each result. Cleaner than a lookup, faster than scrolling a table.

Salesforce screen flow showing an Avonni combobox searching contacts, with avatars and job titles in the results
Visual inputs

Beyond text boxes.

Visual pickers, color pickers, icon pickers, sliders and ratings. Capture structured answers with a tap instead of a free-text field.

Salesforce screen flow showing Avonni visual picker, colour picker, icon picker, slider and rating inputs on a shipping preferences screen
CSV parser

Mass intake, no data loader.

Users drop a CSV onto the screen and the parser turns it into records the flow can loop over. Bulk work becomes a screen, not an admin ticket.

Salesforce screen flow showing the Avonni CSV parser mapping spreadsheet columns to Salesforce contact fields with a preview table
On mobile

Screens that use the device

Components that turn the phone into an input, right on the flow screen.

  • Barcode ScannerScan one or many codes.
  • NFC Tag ScannerRead or write a tag.
  • Document ScannerCapture a page with the camera.
  • BiometricsConfirm with a fingerprint or a face.
  • MicrophoneRecord audio, saved as a file.
  • User LocationCapture where the user is.
  • Pen InputSign or sketch, saved as a file.
The Component Builder

Configure everything. Code nothing.

Every component opens in the built-in Component Builder: map your Salesforce data, tweak every property, and preview the result live before it ever reaches a user.

Flow Builder screen editor with the component palette, where Avonni components sit next to the standard ones
The Component Builder open on an Avonni Progress Indicator, with its properties panel
Explore Data SourcesExplore Custom BrandingExplore Interactions
Watch an admin update a Data Table in the builder →
Your first screen flow tutorial
▶
Play here
7:07
Watch it built

Your first screen flow, start to finish, in 7 minutes

A Deal Review flow on the account page: a Data Table of open deals, cards for the next step, and one Update Records. No code.

▶ 0:15
What we'll build
▶ 3:15
Connect your data
▶ 5:17
Update the selected deals
Watch the tutorialAll Screen Flow tutorials →
Agent Skills

Describe the screen. Your AI assistant builds the flow.

Tell Claude, Cursor or Copilot what the screen should do. With the Avonni skill and MCP server, it picks real Flow Screen Components, writes the flow file with documented properties only, and validates it before you deploy.

Shown in Claude Code

One prompt. One screen flow.

The avonni-flow-components skill plans the screen, checks each component against the Avonni MCP server and validates the flow file. You review, then deploy.

Salesforce logo

Works with Claude, Cursor, Copilot, Gemini and Agentforce

claude — ~/salesforce/avonni-org
✻ Welcome to Claude Code!cwd: ~/salesforce/avonni-org
Build a screen flow to review open Cases and close the selected ones.
⏺ I'll check the real Flow Screen Components catalog before building.
⏺ avonni - list_components (MCP)(toolset: "flow")
75 components ✓
⏺ avonni - get_component_docs (MCP)(name: "datatable")
Properties and outputs loaded ✓
⏺ Skill(avonni-flow-components)
⏺ Bash(node scripts/create-flow.mjs)
force-app/main/default/flows/Review_Open_Cases.flow-meta.xml ✓
⏺ Bash(node scripts/validate-flow.mjs)
Flow valid: 1 screen, Data Table + Button ✓
⏺ Done. Reps pick the Cases in the table, then close them in one click. Nothing is deployed until you say so.
Try "deploy it to the sandbox"
? for shortcuts
Explore Agent Skills
Pick the right tool

Where Flow Screen Components fits in the Avonni lineup

The same components underneath. What changes is where you build, and who does the building.

Quick page additions

App Builder Components

One component, dropped straight onto a Lightning page.

Custom experiences

Dynamic Components

Several components assembled into one custom layout.

External sites

Experience Cloud Components

Portals and community sites, in your brand.

Guided processes

Flow Screen Components

Wizards and intake forms inside Flow Builder.

Your own code

LWC Components

The same components, as tags in your own code.

Most teams pair Flow Screen Components with Dynamic Components: pages for what users see, Flows for what they do.

Compare with standard Salesforce components →
New to Screen Flow components? Read the complete guide →
Use cases

Six screen flows you can rebuild today

Each one comes with its configuration. Three were filmed in a real org, three were built by an AI assistant from a single sentence.

A work order handover screen flow in the SolarOps app, with the customer signature drawn in the Avonni Pen Input
Pen Input

Customer sign-off inside a flow

The customer signs the handover on the last screen of a flow, and the signature lands on the work order as a file. Nothing to print, nothing to scan.

See the configuration →
Step 2 of a site survey screen flow, with a roof outlined on the Avonni Map
Map

Site survey inside a flow

A technician traces the roof on a live map, in step 2 of a screen flow, and the shape is saved as a file on the work order.

See the configuration →
Step 2 of an appointment screen flow, a week of time slots in the Avonni Date/Time Picker
Date/Time Picker

Book the next appointment

A dental clinic books the next visit from a screen flow: one week of slots, lunch and taken slots greyed out, one tap to pick. No calendar app, no back and forth.

See the configuration →
A Project Budget screen with the Avonni Slider set between 0 and 500,000 dollars
SliderBuilt with AI

Budget slider, built from one sentence

A screen flow where the user sets a project budget with a slider, then sees the amount as a large figure on a summary screen. Built by an AI assistant from the Avonni catalog.

See the configuration →
A Service Rating screen with the Avonni Rating, four of five stars selected
RatingBuilt with AI

Star rating, built from one sentence

A screen flow where the customer rates the service from 1 to 5 stars, then sees a thank you screen that plays the rating back. Built by an AI assistant from the Avonni catalog.

See the configuration →
An Appointment Booking screen with a month calendar, the 29th selected
CalendarBuilt with AI

Appointment date, built from one sentence

A screen flow where the user picks an appointment date on a calendar, then checks it on a summary screen. Built by an AI assistant from the Avonni catalog.

See the configuration →
All use cases
FAQ

Common questions

Do I need to write code to use Avonni components?

No. Every component is configured visually in the built-in Component Builder, with a live preview. If you can build a screen flow, you can use Avonni.

Is the package security reviewed?

Yes. Avonni Flow Screen Components is distributed on the AppExchange and has passed the Salesforce security review. It installs as a managed package in minutes.

How does licensing work?

You get 10 free production licenses and unlimited sandbox use. Paid plans scale by users when you are ready to roll out to a larger team.

Does it work with my existing flows?

Yes. Avonni components are standard flow screen components: drop them into any existing screen flow next to the elements you already use.

How is this different from the base Flow screen library?

Avonni extends the base Lightning library with 70+ components: data tables with inline editing, Kanban boards, maps, calendars, signature capture and more, each with built-in interactions.

Ship your next Screen Flow with Avonni

Install from the AppExchange and build your first screen in minutes. 10 production licenses on us.

Start freeRequest a Demo
Available on the AppExchange