Custom Highlight Panel LWC with Field Set and Buttons

Salesforce Highlight Panel is good but doesn’t provide the functionality to load fields from the Field Set. Sometimes we want to load highlight panel fields from fields set and want to put custom button on it but this is not feasible till date in standard highlight panel. This component helps you in fetching fields from Field Set .

Component Features:

  • Fetch fields from Field Set
  • Hyperlink to Mobile, Email, Lookup Fields
  • Supports multiple fields
  • Ability to put Custom LWC Buttons

 

custom-highlight-panel-lwc

 

Step-1: Create an Apex controller

Our apex controller will fetch the list of fields from the fieldset and send it to the LWC controller. Here we are using a wrapper class that will return fields list and error message if any along with Name field.

Create HighlightPanelController.cls Apex class.

 

Step-2: Now we will create the customHighlightPanel Lightning Web Component.

For creating a new LWC component, you need to use the VS Code IDE.

Open the HTML file customHighlightPanel.html and paste the below code.

 

Now open the JS file customHighlightPanel.js and paste the below code.

 

Now open the meta file customHighlightPanel.js-meta.xml and paste the below code.

 

Step-3: Now we will add the component on the record Lightning Page.

  1. Go to the object’s record page where you want to put this component.
  2. Click on Setting Icon on top and click on Edit Page.
  3. Now on the Lightning Builder drop the customHighlightPanel component from the left pane onto the screen.
  4. After dropping the component, select the component and in the Right Sidebar, fieldset input will be visible. Write the developer name of your field set there.
  5. Save the page and Activate for Org Default and click on the back button.
  6. Your component is visible now on the screen.

 

highlight-panel-app-builder-cafeforce

 

Also Check:

For any queries or suggestions/queries, comment below.

Cheers … Happy Coding … 🙂

Subscribe
Notify of
guest
0 Comments
Inline Feedbacks
View all comments