Custom Template Salesforce CPQ. Visualforce CPQ custom Quote Template

Custom Template Salesforce CPQ: Visualforce CPQ custom Quote Template

In Salesforce while defining quote Template Admin can choose following type of template content:

HTML

Line Items

Quote Terms

Custom

Template Bottom

Template Top

In this Blog, we will learn and see how this custom Quote Template content will help in order to generate custom table, graphics in the same quote pdf doc file.

Definition from Salesforce CPQ( see Salesforce guide Book. Taken Reference from https://help.salesforce.com/articleView?id=cpq_template_content.htm&type=5)

 Custom

Select this option to use a Visualforce component in the Custom Source field that you want to show in this section of your quote template. Enter the full URL for the Visualforce page that generates this content, using the following format (page name must end with the “c__” prefix): https://c.<instance>.force.com/apex/c__OptivTemplateSectionComponent. The Visualforce component must be compatible with XML (specifically XSL-FO) to work with Salesforce QTC document output.

XSL-FO is just like HTML encoded language and we need undersatand how this language will help us in desining and defining custom tamplate. For more XSL-FO you can dig into following URL:

1. https://www.webucator.com/tutorial/learn-xsl-fo/tables.cfm
2. http://w3schools.sinsixx.com/xslfo/obj_table-header.asp.htm
3. https://www.antennahouse.com/support/v2qa/QA-fo.html#QA2003082203

In this CPQ Custom template Blog page i would take one example and will see how this XSL-FO Santax we can use in Visualforce Page to generate pdf document: This pdf will show custom table as well as image while generating Quote pdf.

Sample VF Page:

This will display one Image on Top Right with Two Table

<apex:page showHeader="false" sidebar="false" cache="false"  contentType="text/xml" controller="CustomQuoteLineCtrl"  action="{!init}">

<block-container>

<block text-align="right">
<external-graphic src="https://cpqsep-dev-ed--c.ap4.content.force.com/servlet/servlet.ImageServer?id=0156F00000G41n0&oid=00D6F000002W0zo&lastMod=1541150013000"  content-height="scale-to-fit" height="1.5in"  content-width="2.00in" scaling="non-uniform"/>
</block>
<table border-bottom-style="solid" table-layout="fixed" width="100%" margin-top="10pt">
<table-header text-align="center" background-color="silver">
<table-cell display-align="center" padding="5" border="1pt solid  #800000"  number-columns-spanned="2">
<block font-weight="bold" text-align="left"><inline color="#FFFFFF">ANNUAL SERVICES</inline></block>
</table-cell>

</table-header>
<table-body>

<table-row border="1pt solid #800000">
<table-cell display-align="center" padding="5" border="1pt solid  #800000" background-color="#800000" >
<block font-weight="bold" text-align="left"><inline color="#FFFFFF">TierName Column Heading </inline></block>
</table-cell>
<table-cell display-align="center" padding="5" border="1pt solid  #800000" background-color="#800000">
<block font-weight="bold" text-align="left"><inline color="#FFFFFF">TierPrice Column Heading </inline></block>
</table-cell>
</table-row>
<table-row border="1pt solid #800000">
<table-cell display-align="center" padding="5" border="1pt solid  #800000">
<block text-align="left">TierName Column Heading </block>
</table-cell>
<table-cell display-align="center" padding="5" border="1pt solid  #800000">
<block  text-align="left">TierPrice Column Heading </block>
</table-cell>
</table-row>
<table-row border="1pt solid #800000">
<table-cell display-align="center" padding="5" border="1pt solid  #800000">
<block text-align="left">TierName Column Heading </block>
</table-cell>
<table-cell display-align="center" padding="5" border="1pt solid  #800000">
<block  text-align="left">TierPrice Column Heading </block>
</table-cell>
</table-row>
<table-row border="1pt solid #800000" >
<table-cell display-align="center" padding="5" border="1pt solid  #800000" number-columns-spanned="2"> 
<block  text-align="left">TierName Column Heading </block>
</table-cell>

</table-row>
</table-body>
</table>
</block-container>
<block-container  margin-top="40pt"> 
<table border-bottom-style="solid" table-layout="fixed" width="100%" >
<table-header text-align="center" background-color="silver">
<table-cell display-align="center" padding="5" border="1pt solid  #800000"  number-columns-spanned="2">
<block font-weight="bold" text-align="left"><inline color="#FFFFFF">PROFESSIONAL SERVICES</inline></block>
</table-cell>

</table-header>
<table-body>
<table-row border="1pt solid #800000">
<table-cell display-align="center" padding="5" border="1pt solid  #800000" background-color="#800000" >
<block font-weight="bold" text-align="left"><inline color="#FFFFFF">TierName Column Heading </inline></block>
</table-cell>
<table-cell display-align="center" padding="5" border="1pt solid  #800000" background-color="#800000">
<block font-weight="bold" text-align="left"><inline color="#FFFFFF">TierPrice Column Heading </inline></block>
</table-cell>
</table-row>
<table-row border="1pt solid #800000">
<table-cell display-align="center" padding="5" border="1pt solid  #800000">
<block text-align="left">TierName Column Heading </block>
</table-cell>
<table-cell display-align="center" padding="5" border="1pt solid  #800000">
<block  text-align="left">TierPrice Column Heading </block>
</table-cell>
</table-row>
<table-row border="1pt solid #800000">
<table-cell display-align="center" padding="5" border="1pt solid  #800000">
<block text-align="left">TierName Column Heading </block>
</table-cell>
<table-cell display-align="center" padding="5" border="1pt solid  #800000">
<block  text-align="left">TierPrice Column Heading </block>
</table-cell>
</table-row>
<table-row border="1pt solid #800000" >
<table-cell display-align="center" padding="5" border="1pt solid  #800000" number-columns-spanned="2"> 
<block  text-align="left">TierName Column Heading </block>
</table-cell>

</table-row>
</table-body>
</table>
</block-container>

</apex:page>
                 

Note: Plase save your images in document, and then copy the address of document Image and replace it with source Image Address. src.

<external-graphic src="https://cpqsep-dev-ed--c.ap4.content.force.com/servlet/servlet.ImageServer?id=0156F00000G41n0&oid=00D6F000002W0zo&lastMod=1541150013000"  content-height="scale-to-fit" height="1.5in"  content-width="2.00in" scaling="non-uniform"/>

Here is the Sample output:

For more help click here and subscribe my Youtube channel:

Salesforce CPQ AMUL BARANWAL