LWC

Account map in one tag

The account tree under the highlights panel: subsidiaries, their contacts, their open deals, one click to drill. One tag in your LWC, one nested query.

Relationship Graph
avonni-dd-relationship-graph
center
The scenario

Open Northwind Distribution and the map sits under the highlights panel. Three subsidiaries in the first column. Select Northwind Nordics and its two contacts and its open deal unfold to the right, the deal highlighted. New contact and New opportunity hang off the root, Add on every group.

The configuration
  • query on Account with filter: ParentId = <account> and two children (Contact and Opportunity on AccountId): the whole tree is one nested query.
  • mapping per object: Account shows BillingCity and Industry, Contact shows Title, Opportunity shows Amount and StageName.
  • variant: horizontal, hideItemsCount: false: groups unfold to the right, with counts.
  • actions on the root, groupActions Add, itemActions Open: three levels of actions, three events (actionclick, groupactionclick, itemactionclick) for your code.
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
Dynamic 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