Custom Dynamic Highlight Panel in Salesforce Lightning
Bypassing Salesforce Governor Limits Using Generic LWC and Field Set
A new Highlights Panel in Salesforce Lightning makes it simple to display critical information at the top of the page. Each page’s highlights panel can be modified to add up to six fields. These fields will contain information that will enable the user to quickly find or “know” the details.
You can create a formula field to combine multiple (for example, Height + Weight+ Age) to provide extra information to the panel. Standard and custom fields can be presented here.
The fields your users view in the highlights panel at the top of a record are controlled by compact layouts. The Compact layout is used to render the fields in the Highlight panel.
Every primary tab in a console in Salesforce Classic has a highlights panel at the top that can be customized and has a table with up to four columns. It enables console users to quickly and easily see important data. Edit any page layout to set up a highlights panel.
The highlights panel of an object record in Lightning Experience displays the first seven fields in a compact style. (The highlights section shows fewer fields on smaller screens.) A highlights panel for that field shows the top five fields from the compact layout when a user hovers over a lookup relationship field on the object record page. The top field from the compact configuration is highlighted in the highlights panels’ first field.
Compact layouts support all field types except:
- Text area
- Long text area
- Rich text area
- Multi-select picklist
In the Account Record Page, we can see the fields Type to Industry (6 fields). The first field Account Name will be in the header part.
Using formula fields, you can combine two or more fields into one for a display to add more information to the Highlights Panel. First, decide on what fields you want to show in the panel. then decide which to combine. The length of the fields you are concatenating should be considered. The display might be interrupted if the field is too long.
Let’s see how to bring the Billing Address and Shipping Address together at the Highlight Panel.
- Go to Set Up, Object Manager, and select the object to edit. Here, it is Account.
- Go to Fields & Relationships and create a text formula field.
- Next, go to Compact Layouts and select the layout to edit. If there are none to choose from, create a new one.
- Click the Edit.
- Remove fields to display from the list on the right and add fields to display from the list on the left. This is where you will add your new summary field.
In this case, the Compact layout System Default is already there. But it can’t be edited. So we can clone it and add the newly created formula field.
Change the Compact Layout Assignment.
Refresh the page.
Since we have governor limits on this, we can’t keep more data here. In that case, we need a better solution for this. We can utilize LWC for this purpose and let’s see how.
Let’s begin with defining the Field Set for the Account Object.
Drag and add fields as you wish
And save it.
Create the controller for our Lightning Web Component (LWC).
Create a Lightning Web Component (LWC).
customHighlightPanel.html
customHighlightPanel.js
customHighlightPanel.js-meta.xml
Add this LWC to the Account Record Page.
Added the API of the Field Set created.
Save it and activate it (if needed).
Now check the account record page.
Try adding one more field in the Field Set and check the UI.
The added field will display in the LWC.
You can use this same LWC in another object also. But remember, you’ve created a Field Set on that object and you’ve to assign that Field Set API to the LWC when you add the LWC on a record page in that object.
Try to edit the HTML code blocks and bring more good looks to the LWC. Try adding more fields in the Field Set as well.
Hope this helps. Share your thoughts too.
