Lightning Pages

Opportunity table, built from one sentence

The account's opportunities in a sortable table on the Account page: name, stage, amount and close date. Built by an AI assistant from the Avonni catalog.

✦ Built with AI

Data Table
dcDatatable

{"steps":[{"user":"Show this account's opportunities on the Account page in a table with the stage, amount and close date."},{"ai":"I'll start by exploring the project to understand what we're working with."},{"more":2},{"tool":{"src":"Skill","k":"avonni-dynamic-components"}},{"more":3},{"tool":{"src":"Avonni MCP","k":"list_components","arg":"dynamic"}},{"tool":{"src":"Avonni MCP","k":"get_component_docs","arg":"dcDatatable"}},{"more":1},{"tool":{"src":"Salesforce CLI","k":"sf sobject list","arg":"","n":2}},{"tool":{"src":"Salesforce CLI","k":"sf sobject describe","arg":"Opportunity"}},{"more":1},{"ai":"Plan: Account Opportunities table. Does this look right, or would you like changes before I build it?","files":[]},{"user":"Looks good, go ahead."},{"ai":"Plan approved."},{"more":2},{"tool":{"src":"Skill script","k":"query-versions"}},{"tool":{"src":"Skill script","k":"create-component"}},{"more":1},{"tool":{"src":"Skill script","k":"create-component"}},{"ai":"Done: Account Opportunities table.","files":["avdynamic__AvonniDynamicComponent.Account_Opportunities_1.md-meta.xml"]}],"result":{"label":"Salesforce · Lakeshore Cold Chain","video":"https://cdn.prod.website-files.com/655e59288ce041f5fc52373b/6ab5600557a7d8a9dfb712f6_uc-ai-opportunity-table-clip.mp4"}}

top
The scenario

Open Lakeshore Cold Chain and the deals sit under the highlights panel: six opportunities, the count in the header, the latest close date on top. Each name opens the opportunity. Click Amount and the biggest deal comes first, click again and it flips. An account with no deals says so instead of showing an empty grid.

How it was built

The prompt

Show this account's opportunities on the Account page in a table with the stage, amount and close date.

1. Claude Code with the Avonni Agent Skills and the Avonni MCP server, in an empty folder set up with the public guide. It chose the Dynamic Components skill on its own.

2. It looked up dcDatatable in the Avonni catalog, read the Opportunity fields in the org, then showed its plan and waited:

Looks good, go ahead.

3. It wrote the component with the skill's save script and deployed nothing.

4. We deployed the file unchanged, activated it in the Component Builder and dropped it on the Account page. The six opportunities are sample data we added to the account.

Set up the Agent Skills
The configuration
  • query on Opportunity with filter: AccountId = :accountId bound to {!$Component.RecordId}, orderBy: CloseDate DESC: only this account's deals, latest first.
  • Four columns, Name as a lookup with linkify: true, StageName, Amount as currency aligned right, CloseDate as date-local, all sortable: a click on any header re-sorts.
  • readOnly: true, hideCheckboxColumn: true: a table to read, nothing to tick by mistake.
  • caption bound to the query count, showPagination at 10 per page, noResultsMessage: the size of the pipeline at a glance and an honest empty state.
Step by step

The settings above are the ones that matter. The tutorial has the whole build: the objects and sample data behind the screen, every step in order, and what to check once it runs.

Open the tutorial
Runs on
Flow Screen ComponentsDynamic ComponentsExperience Site ComponentsLWC Components

Build it in your org.

85+ components, four Salesforce surfaces, 10 free production licenses. Start with the one you just saw.

Start freeAll use cases