When you hover over an Account name link on standard views, a popup with the Compact Layout shows the details of that record.
Is it possible to do this using Lightning Web Components?
Perhaps using the output from getRecordUi
? I cannot find any examples online of how to use the results from getRecordUi – how can that be converted to a page layout to display to the user?
Some related links that I found, but did not have answers:
https://rajvakati.com/2019/01/28/getrecordui-wire-adapter/
I have lightning component and want to show lightning card when mouse over on the link,
Best Answer
You can build a custom lwc in which you embed some sort of 'popover' overlay component. So yes, this is possible.
If your Layout is, for example, a Table, as follows:
you can "Build" a LWC that will act as a popover (a card for example, with an embeded lightning-record-view-form.
this is a sample lwc that I added at the bottom of my table:
<c-box-popover topmargin={top} leftmarginn={left} myranger={ranger}></c-box-popover>
it basically receives coordinates of where my cursor is located (you can do this as well in the child lwc).
my table component in return has uses
onmouseover
andonmouseout
events for rendering/unrendering the card based on theid
that is being passed to it.Example:
My popover in returns, simply passes the id attribute aka,
myranger
to the record-view-form component:and as you can see, I dynamically assign a "style" attribute which I construct using Template literals
I did not put much effort in calculating screensize to properly place the popover, but it should give you the general idea.
You can find a sample Gist here
The data i used ot work with can be found on the build-apps-with-lwc Trailhead repository