Products

Avonni Components for App Builder: Lightning Pages That Actually Work the Way You Need Them To

Here's a situation every Salesforce admin knows too well: You're staring at a Lightning page

Here's a situation every Salesforce admin knows too well: You're staring at a Lightning page, and it's... fine. It shows the data. It's functional. However, your users continue to request more. "Can we see opportunities in a visual pipeline?" "Can we filter these related lists better?" "Can we make this page actually useful?"

And the answer has always been the same: custom development, weeks of waiting, or settling for basic functionality.

Not anymore.

What Are Avonni Components for App Builder?

Avonni Components for App Builder is a collection of 17+ premium, lightweight components specifically designed to drop right into Lightning App Builder. Think of them as the Lightning components you wish Salesforce had included from the start—data tables that actually let you search and filter, kanban boards for visual workflow management, interactive maps, timelines, and much more.

Article content

The difference? These work exactly like standard Salesforce components. You drag them onto your page, configure them through familiar property panels, and you're done. No special training required. No developer requests needed.

What's Actually Included?

The components fall into categories based on what you're trying to accomplish:

Data Display Components

  • Data Table: Transform boring related lists into powerful, searchable tables with sorting, filtering, and inline editing
  • Kanban: Visualize workflows with drag-and-drop boards for opportunities, cases, or any process
  • List: Display records in elegant card layouts perfect for browsing contacts, products, or projects
  • Timeline: Show chronological data like case histories, account activities, or project milestones
  • Pivot Table: Analyze data with cross-tabulation for sales summaries or case distribution

Visual & Location Components

  • Map: Show accounts, contacts, or assets on interactive maps based on addresses or coordinates
  • Gallery: Create image and video carousels for products, events, or marketing content
  • Calendar: Display events and tasks in familiar calendar, agenda, or timeline views

Smart Display Components

  • Progress Indicator: Guide users through sales stages, case statuses, or project phases
  • Metric: Show KPIs with aggregation functions for executive dashboards
  • Alert: Communicate important messages with contextual styling
  • Tags: Present related records as visual, filterable tags

Every component is optimized for App Builder—lightweight, fast-loading, and mobile-responsive right out of the box.

How Does Setup Actually Work?

Here's the best part: if you can use standard Lightning components, you already know how to use these.

Installation takes minutes

  1. Install the package from AppExchange
  2. Open any Lightning page in App Builder
  3. Find Avonni components in the Custom Components section (they all start with "AX -")
  4. Drag them onto your page

Configuration is straightforward

Instead of selecting from dropdowns (which doesn't work in App Builder's limited property panels), you enter standard Salesforce API names and patterns that any admin already knows:

  • Object API Name: Opportunity or Case
  • Filter: AccountId = '{{Record.Id}}' (just like SOQL WHERE clauses)
  • Fields: Name,Amount,CloseDate (comma-separated, just like you'd expect)
  • Icons: standard:opportunity (standard Salesforce icon names)

The configuration follows Salesforce conventions you already understand. If you've worked with formulas or reports, this will feel familiar.

Where Do These Components Fit Best?

Let's look at real scenarios where Avonni App Builder Components make an immediate impact

Scenario 1: Enhanced Account Pages

The Problem: Your sales team complains that account pages display basic related lists with no quick way to find what they need.

The Solution: Add an Avonni Data Table that displays opportunities with built-in search and filtering capabilities. Sales reps can now instantly find deals by stage, amount, or close date without leaving the page.

Setup Time: 3 minutes

Object: Opportunity
Filter: AccountId = '{{Record.Id}}'
Fields: Name,StageName,Amount,CloseDate
Searchable: Yes
Filterable: Yes
Header Title: All Opportunities
Header Caption: Related to {{Record.Name}}

Article content

Scenario 2: Personal Sales Dashboards

The Problem: Each sales rep needs to see their own pipeline, but you don't want to build 50 different pages.

The Solution: Add an Avonni Kanban to a home page filtered by the current user. Every rep sees only their opportunities, automatically organized by stage.

Setup Time: 2 minutes

Object: Opportunity
Filter: OwnerId = '{{User.Id}}' AND IsClosed = false
Group By: StageName
Title Field Name: Name
Variant: path
Header Title: All Opportunities for {{Record.Name}}
Header Icon Name: standard:opportunity

Article content

Scenario 3: Service Case Management

The Problem: Support managers need to see how cases are distributed across their team by status and priority.

The Solution: Create an app page with an Avonni Pivot Table showing case counts grouped by owner and status. Managers get instant visibility into workload distribution.

Setup Time: 3 minutes

Object: Case
Filter: IsClosed = false
Group Row Fields: Status
Group Column Fields: Owner.Name
Aggreagation Field: COUNT(Id)
Show Grand Total: On
Header Title: Team Case Load
Header Caption: Distribution by status and owner
Header Icon Name: standard:case

Article content

Scenario 4: Executive Pipeline View

The Problem: Executives want to see the entire team's pipeline with key metrics and top opportunities at a glance.

The Solution: Add an Avonni Data Table to an app page showing all open opportunities with built-in metric aggregations. Display total pipeline value and deal count right in the table header using aggregation fields like SUM(Amount), COUNT(Id). Executives get both the numbers and the details in one component.

Setup Time: 4 minutes

Object: Opportunity
Filter: IsClosed = false
Fields: Name,Account.Name,Owner.Name,StageName,Amount,CloseDate
Metric Aggregation Fields: SUM(Amount),COUNT(Id)
Order By: Amount DESC
Header Title: All Opportunities
Header Caption: Related to {{Record.Name}}

Article content

What Makes These Different from Standard Components?

  • Advanced Functionality Standard-related lists show data. Avonni components let users search, filter, sort, and interact with data without leaving the page.
  • Dynamic Context Components automatically adapt to the current record or user. The same configuration shows different data based on who's viewing or which record they're on.
  • Professional Polish Every component follows Lightning Design System guidelines and looks native to Salesforce—no "third-party widget" feel.
  • Performance Optimized Built specifically for App Builder with a lightweight architecture that doesn't slow down your pages.

When to Use App Builder Components vs. Dynamic Components

A common question: "When should I use App Builder Components versus the Dynamic Components App?"

Use Avonni App Builder Components when

  • You're enhancing existing Lightning pages quickly
  • You need lightweight, performant components
  • Standard configuration meets your needs
  • You want an admin-friendly, straightforward setup

Upgrade to Dynamic Components when

  • You need complete custom styling control
  • You want to nest components within components
  • You need advanced conditional logic
  • You're building complex, highly customized layouts

Think of it this way: App Builder Components are perfect for "better Lightning pages." Dynamic Components are for "completely custom experiences." Both are no-code. Both are powerful. They serve different needs.

Many organizations start with App Builder Components for quick wins, then graduate to Dynamic Components for their most ambitious projects. Together, they cover the full spectrum.

Getting Started Today

Ready to see what's possible? Here's your action plan:

  1. Install the package from AppExchange
  2. Pick one page that users complain about most
  3. Add one component that solves their biggest pain point
  4. Watch adoption improve as users realize pages can actually be helpful

The first component you add will take 10 minutes and immediately show users that Salesforce pages can be better. The second will take 5 minutes. By your third, you'll be thinking about all the other pages you can transform.

The Bottom Line

Avonni Components for App Builder isn't about adding complexity to Salesforce. It's about removing friction. It's about making Lightning pages work the way users expect them to work—searchable, filterable, visual, and actually useful.

You don't need to become a developer. You don't need to wait for IT. You just need components that work the way your brain works, configured through patterns you already understand.

Start with one page. Add one component. See the difference it makes. Then imagine what becomes possible when every Lightning page in your org works this well.

Avonni Components for App Builder is available now as part of the Avonni Experience Components package on the Salesforce AppExchange. Installation includes components for Lightning App Builder, Dynamic Components for advanced customization, and Experience Sites components—all in one package.

Ready to transform your Lightning pages? Get started with the Avonni App Builder Experience Components →

Want to learn more? Check out our complete documentation

>> Explore the
Documentation

Build Salesforce Solutions Faster

Save time, reduce costs, and see your Salesforce projects come to life faster.