CPQ · Salesforce

OVERRIDE SALESFORCE CPQ QUOTE DOCUMENT VIEW BUTTON WITH 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;
}

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out /  Change )

Google photo

You are commenting using your Google account. Log Out /  Change )

Twitter picture

You are commenting using your Twitter account. Log Out /  Change )

Facebook photo

You are commenting using your Facebook account. Log Out /  Change )

Connecting to %s