OVERRIDE SALESFORCE CPQ QUOTE DOCUMENT VIEW BUTTON WITH CUSTOM LWC

Salesforce CPQ Quote Document View Button Override Custom LWC

Recently we got feedback from adaption manager where sales rep spending lot of time to find the quote after they click “View” button from Salesforce CPQ quote document.

Current Issue: CPQ Quote Document object where the default ‘View’ button replaces the existing page and it doesn’t have option to close or get back to Quote Document detail page. User have to use the Quote Tab to go back to quote/quote document record.

Solution: This component is to view the PDF, Word and …. file that is uploaded into Documents, Notes and Attachments or files by passing the id as parameter. The Component shown here was created in CPQ Quote Document object where the default ‘View’ button replaces the existing page and it doesn’t have option to close or get back to Quote Document detail page. So a custom Quick Action button ‘View’ was created to call this aura component to view the pdf file generated through Generate Document process. Refer below sample code

Result: This solution will giving option to user/business to view the PDF in lightning popup and close the window to go back to Quote Document.

Sample Code:

1. Create an aura Component ViewPDF.

ViewPDF.cmp

<aura:component implements="flexipage:availableForAllPageTypes,force:hasRecordId,lightning:isUrlAddressable,force:lightningQuickAction" access="GLOBAL" >
    <aura:html tag="style">
        .slds-modal__content{
              overflow-y:hidden !important;
              overflow:initial !important;
              height:unset !important;
              max-height:unset !important;
        }
    </aura:html>
     
    <ltng:require styles="{!$Resource.ModalWidthCSS}"/>
     
    <aura:attribute name="spinner" type="boolean" default="FALSE"/>
    <aura:attribute name="recordId" type="Id" />
    <aura:attribute name="documentid" type="String"/>
     
 
    <aura:handler event="aura:doneWaiting" action="{!c.hideSpinner}"/>
    <aura:attribute name="quoteDocRecord" type="Object"/>
     
    <force:recordData aura:id="recordLoader"
                      layoutType="FULL"
                      recordId="{!v.recordId}"
                      fields="Id,SBQQ__DocumentId__c"
                      targetFields="{!v.quoteDocRecord}"
                      recordUpdated="{!c.doInit}"
                      /> 
 
     
    <iframe aura:id="pdfFrame" src="{!'/servlet/servlet.FileDownload?file='+v.documentid}"  style = "width : 100% ; height : 550px; max-height:550px !important" ></iframe>
     
</aura:component>

ViewPDFController.js

({
     
    doInit : function(component, event, helper) {
        var documentId = component.get('v.quoteDocRecord.SBQQ__DocumentId__c');
        component.set('v.documentid',documentId );      
    }
         
})

2. Create a js file named ModalWidthCSS and add it as a static resource.

.slds-modal__container{
    width: 90% !important;
    max-width: 90% !important;
}