2

Setup > Lightning App Builder, New --> Record Page, Next ... select Console: Pinned Header and Left Sidebar. Place a custom Lightning Component in the top area.

How can I make my custom header "pin" like the Highlights Panel does?

When the middle panel is scrolled, the standard Highlights Panel will squish and pin to the top of the screen so that it is always visible.

Any custom component I have been able to create (so far) simply scrolls up and away along with the rest of the content in the middle panel. In ither words, it's not pinned at all.

Here's the markup for the custom header component:

<aura:component implements="flexipage:availableForRecordHome,force:hasRecordId" access="global">
    <aura:attribute name="recordId" type="Id" />
    <aura:attribute name="claim" type="Claim__c" />
    <aura:attribute name="errorMessage" type="String" default="Loading..." />

    <force:recordData recordId="{!v.recordId}" targetFields="{!v.claim}" fields="Id, Name, Trip__c, Trip__r.Name, Trip__r.IncidentNumber__c" targetError="{!v.errorMessage}" />

    <div class="slds-page-header" style="height: 77px;">
        <lightning:layout>
            <h1>{!v.errorMessage}</h1>
            <lightning:layoutItem class="slds-media__figure">
                <lightning:icon iconName="standard:partner_fund_claim"/>
            </lightning:layoutItem>
            <lightning:layoutItem class="slds-media__body">
                <h1 class="slds-page-header__title">{!v.claim.Name}</h1>
                <lightning:breadcrumbs >
                    <lightning:breadcrumb class="slds-text-heading_small slds-m-left_small"
                                          label="{!'Trip-'+v.claim.Trip__r.IncidentNumber__c}"
                                          href="{!'/lightning/r/Trip__c/'+v.claim.Trip__c+'/view'}"
                                          title="{!v.claim.Trip__r.Name}"
                                          />
                </lightning:breadcrumbs>
            </lightning:layoutItem>
        </lightning:layout>
    </div>

</aura:component>
  • FWIW, when I was digging around with the Chrome debugger, I could see that the standard Highlights Panel is adorned with the following classes: "slds-page-header s1FixedTop forceHighlightsStencilDesktop" The s1FixedTop is the key to pinning, but it's not sufficient. Something attaches a scroll event handler to dynamically squish the panel. – Mark Moore Mar 7 '18 at 6:30
  • I had good results trying the technique discussed here: salesforce.stackexchange.com/questions/206072/… – Eric Smith Sep 12 '18 at 2:28

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Browse other questions tagged or ask your own question.