I have a custom requirement like-----

In the record detail page of any Account, when clicking a button, a modal popup will be lanuched. The popup will have a lwc tree grid listing all the Contacts associated with that particular account. One should be able to select between different Contact rows in the tree grid. A side bar section should be rendered within the modal window, showing Contact record details. When the user clicks another Contact record in the tree grid, the side section should be updated to show Contact details of the current selection.

I managed to launch the popup with the Contacts listing tree grid, but don't know how to deal with the rest part, like rendering the side section with Contact details selected.

  • are you able to edit and share what you managed to do even though it doesn't work fully? Commented Feb 16, 2022 at 14:41

1 Answer 1


You can begin your research here..

  <lightning-layout-item size=6>
     ...your tree goes here onclick={passContactId}
  <lightning-layout-item size=6>
     <lightning-record-form object-api-name="Contact" record-id="{contactId}" layout-type="compact">

On the page of Lightning docs, there is an example of a Tree component with an onselect handler that can show you how to pass the Id of the contact to the contactId variable and this should render your form.

These docs will help:
lightning-record-form: https://developer.salesforce.com/docs/component-library/bundle/lightning-record-form/documentation
Communicate selected id:

  • Thanks, this approach helped. Is there any way to set a default selection for the "lightning-tree" component. I want to set default selection for the first branch of the tree I am rendering. Couldn't find anything useful in documentation Commented Feb 18, 2022 at 4:22
  • Do you mean that you want the first branch to be expanded by default, and the first record in that branch to show up in your preview to the right? TBH I've never worked wth trees but looking at the docs I would think that you need to manually go into the first element of your lightning-tree "items" array and 1) set expanded: true, 2) retreive its name parameter and assign it to the variable of your record-id of the form as default. Commented Feb 18, 2022 at 8:33

You must log in to answer this question.

Not the answer you're looking for? Browse other questions tagged .