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
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.
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 |
public with sharing class HighlightPanelController { @AuraEnabled public static ReturnWP fetchFields(String recordId, String objectName, String fieldSetName) { ReturnWP res = new ReturnWP(); try { // Querying Name Field if(String.isBlank(recordId)) { res.message = 'Invalid Id'; return res; } List<sObject> objectList = Database.query('SELECT id, Name FROM ' + objectName + ' WHERE Id =: recordId'); res.nameField = String.valueof(objectList[0].get('Name')); // Fetching Highlight Panel Field Set if(String.isBlank(fieldSetName)) { res.message = 'Please provide a Field Set Name'; return res; } Schema.FieldSet fieldSet = Schema.getGlobalDescribe().get(objectName).getDescribe().fieldSets.getMap().get(fieldSetName); if(fieldSet == null) { res.message = 'Field Set provided is not Valid'; return res; } res.fieldsAPI = new List<String>(); for(Schema.FieldSetMember fieldSetMem:fieldSet.getFields()){ res.fieldsAPI.add(fieldSetMem.getFieldPath()); } return res; } catch(Exception ex) { throw new AuraHandledException(ex.getMessage()); } } public class ReturnWP { @AuraEnabled public String message; @AuraEnabled public String nameField; @AuraEnabled public List<String> fieldsAPI; } } |
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.
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 |
<template> <div class="slds-page-header slds-page-header_record-home"> <div class="slds-page-header__row"> <div class="slds-page-header__col-title"> <div class="slds-media"> <div class="slds-media__figure"> <lightning-icon icon-name="standard:contact" size="medium" alternative-text="Contact"></lightning-icon> </div> <div class="slds-media__body" style="line-height: 13px;"> <span>{objectApiName}</span> <span class="slds-page-header__title slds-truncate" title={nameField}>{nameField}</span> </div> </div> </div> <div class="slds-page-header__col-actions"> <div class="slds-page-header__controls"> <div class="slds-page-header__control"> <lightning-button-group> <lightning-button label="Edit"></lightning-button> <lightning-button label="Save" icon-name="utility:save"></lightning-button> <lightning-button-menu alternative-text="Show menu" variant="border-filled" menu-alignment="right"> <lightning-menu-item label="Menu Item One" value="item1"></lightning-menu-item> <lightning-menu-item label="Menu Item Two" value="item2"></lightning-menu-item> <lightning-menu-item label="Menu Item Three" value="item3"></lightning-menu-item> </lightning-button-menu> </lightning-button-group> </div> </div> </div> </div> <div class="slds-page-header__row slds-page-header__row_gutters"> <div class="slds-page-header__col-details"> <lightning-record-view-form record-id={recordId} object-api-name={objectApiName}> <ul class="slds-page-header__detail-row" style="padding-left: 12px;"> <template for:each={fieldList} for:item="field" for:index="index"> <li key={field} class="slds-page-header__detail-block"> <lightning-output-field field-name={field} style="padding:0;"></lightning-output-field> </li> </template> </ul> </lightning-record-view-form> </div> </div> </div> </template> |
Now open the JS file customHighlightPanel.js and paste the below code.
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 |
import { LightningElement, api } from 'lwc'; import { ShowToastEvent } from 'lightning/platformShowToastEvent'; import fetchFields from '@salesforce/apex/HighlightPanelController.fetchFields'; export default class CustomHighlightPanel extends LightningElement { @api recordId; @api objectApiName; @api fieldSet; nameField = ''; fieldList = []; connectedCallback() { fetchFields({ recordId : this.recordId, objectName : this.objectApiName, fieldSetName : this.fieldSet }).then(result => { if(result) { console.log(result); if(result.message != undefined) { this.showToast('Error', 'error', result.message); return; } this.nameField = result.nameField; this.fieldList = result.fieldsAPI; } }).catch(error => { if(error && error.body && error.body.message) { this.showToast('Error', 'error', error.body.message); } }); } showToast(title, variant, message) { const event = new ShowToastEvent({ title: title, variant: variant, message: message, }); this.dispatchEvent(event); } } |
Now open the meta file customHighlightPanel.js-meta.xml and paste the below code.
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 |
<?xml version="1.0" encoding="UTF-8"?> <LightningComponentBundle xmlns="http://soap.sforce.com/2006/04/metadata"> <apiVersion>52.0</apiVersion> <isExposed>true</isExposed> <targets> <target>lightning__RecordPage</target> </targets> <targetConfigs> <targetConfig targets="lightning__RecordPage"> <property name="fieldSet" type="String" /> </targetConfig> </targetConfigs> </LightningComponentBundle> |
Step-3: Now we will add the component on the record Lightning Page.
- Go to the object’s record page where you want to put this component.
- Click on Setting Icon on top and click on Edit Page.
- Now on the Lightning Builder drop the customHighlightPanel component from the left pane onto the screen.
- 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.
- Save the page and Activate for Org Default and click on the back button.
- Your component is visible now on the screen.
Also Check:
For any queries or suggestions/queries, comment below.
Cheers … Happy Coding … 🙂
