0

I am trying to generate a quote document using custom visualforce page for steelbrick CPQ. I need to display a checkbox in a column (it does not have to be associated with any field). I tried using , HTML tags, img tags, tried saving image as a static resource and referencing it, tried using UTF codes for checkbox but nothing worked. I found this page: Visualforce page for CPQ which states that "The VisualForce component needs to be compatible with XML (specifically XSL-FO) to be compatible with CPQ document output." I am not familiar with this standard, therefore, any suggestion would be highly appreciated.

<apex:page rendered="{!rendered}" language="{!language}" showHeader="false" 
sidebar="false" cache="false"  controller="PS_M3_OptionalSectionController" 
contentType="application/xml">

<block margin="8pt"/>

<block>
    <table table-layout="fixed" width="100%" border-color="#000000" border- 
     width="1px" border-style="solid" font-size="8px">
        <table-column column-width="5%"/>
        <table-column column-width="5%"/>
        <table-column column-width="{!descriptionColumnWidth}%"/>
        <table-column column-width="{!dailyRateColumnWidth}%"/>
        <table-column column-width="{!weeklyRateColumnWidth}%"/>
        <table-column column-width="{!monthlyRateColumnWidth}%"/>
        <table-column column-width="{!totalPriceColumnWidth}%"/> 

        <table-header>
            <table-row line-height="14px" font-weight="bold" text- 
             align="left" color="#000000" background-color="#FED5B3">
                <table-cell border="1px solid black" margin="3pt"><block> 
                 {!$Label.Quantity}</block></table-cell>
                <table-cell border="1px solid black" margin="3pt"><block> 
                 {!$Label.Quantity}</block></table-cell>
                <table-cell border="1px solid black" margin="3pt"><block> 
                  {!$Label.PFH_Description}</block></table-cell>
                <table-cell border="1px solid black" margin="3pt" text- 
                 align="right">
                    <block><apex:outputText rendered="{!displayDailyRate}" 
                        value="{!$Label.Daily_rate_1}"></apex:outputText> 
                      </block>
                </table-cell>
                <table-cell border="1px solid black" margin="3pt" text- 
                   align="right">
                    <block><apex:outputText rendered="{!displayWeeklyRate}" 
                          value="{!$Label.Weekly_Rate}"></apex:outputText> 
                       </block>
                </table-cell>
                <table-cell border="1px solid black" margin="3pt" text- 
          align="right">
                    <block><apex:outputText rendered="{!displayMonthlyRate}" 
     value="{!$Label.Monthly_Rate}"></apex:outputText></block>
                </table-cell>
                <table-cell border="1px solid black" margin="3pt" text- 
align="right">
                    <block><apex:outputText rendered="{!displayTotalPrice}" value="{!$Label.Total_Price}"></apex:outputText></block>
                </table-cell>
            </table-row>
        </table-header>

        <table-body>
            <apex:repeat var="line" value="{!optionalCharges_String}">
                <table-row line-height="9px">
                    <table-cell border="1px solid black" background-color="#FFFFFF">
                        <!--<img src="{!$Resource.Checkbox}" alt ="" border="3"/>-->

                       <block margin="3pt">
                       <!--- CHECKBOX REQUIRED-->
                        <!--<img src='/img/func_icons/util/lock12.gif'/>-->

                        <!--<image>

                        <!--</image>-->
                        <!--<image>
                        <img src= "/resource/1561113417000/Checkbox"/>
                        </image>-->
                        <!--{!$Resource.Checkbox}-->
                        <!--<apex:image url="{!$Resource.Checkbox}"/>-->
                        <!--<c:logo></c:logo>-->
                        <!--<input type= "checkbox" value ="checked"/>-->
                       <!-- <block></block>
                        <!--<apex:outputText value="{!if(line.optional,true,false)}">-->
                        <!--<img src="/resource/1561113417000/Checkbox "/>-->
                        <!--<apex:image url="{!$Resource.Checkbox}"/>-->
                        <!--<apex:outputText>U+2610;
                       </apex:outputText>-->
                        <!--<img src="/img/oocss/box_faq_folded_corner.png"/>-->
                       <!--<apex:outputText value="{!HTMLENCODE('&#x25a2')}"/>

                       <!--GIF89 <img src = "/img/checkbox_unchecked.gif"/>-->
                       <!--<block>{!$Resource.Checkbox}</block>-->
                      </block>
                    </table-cell>
                    <table-cell border="1px solid black" background-color="#FFFFFF">
                        <block margin="3pt">
                            <block><apex:outputText value="{!line.quantity}"/></block>
                        </block>
                    </table-cell>
                    <table-cell border="1px solid black" background-color="#FFFFFF">
                        <block margin="3pt">
                            <apex:repeat var="desc" value="{!line.description}">
                                <block>{!HTMLENCODE(desc)}</block>
                            </apex:repeat>
                        </block>
                    </table-cell>
                    <table-cell border="1px solid black" background-color="#FFFFFF" text-align="right">
                        <block margin="3pt">
                            <block><apex:outputText rendered="{!displayDailyRate}" value="{!line.dailyRate}"/></block>
                        </block>
                    </table-cell>
                    <table-cell border="1px solid black" background-color="#FFFFFF" text-align="right">
                        <block margin="3pt">
                            <block><apex:outputText rendered="{!displayWeeklyRate}" value="{!line.weeklyRate}"/></block>
                        </block>
                    </table-cell>
                    <table-cell border="1px solid black" background-color="#FFFFFF" text-align="right">
                        <block margin="3pt">
                            <block><apex:outputText rendered="{!displayMonthlyRate}" value="{!line.monthlyRate}"/></block>
                        </block>
                    </table-cell>
                    <table-cell border="1px solid black" background-color="#FFFFFF" text-align="right">
                        <block margin="3pt">
                            <block><apex:outputText rendered="{!displayTotalPrice}" value="{!line.totalPrice}"/></block>
                        </block>
                    </table-cell>
                </table-row>
            </apex:repeat>
            <table-row line-height="9px">
                <table-cell border="1px solid black" background-color="#FFFFFF">
                    <block margin="3pt">
                    </block>
                </table-cell>
                <table-cell border="1px solid black" font-weight="bold" background-color="#FFFFFF">
                    <block margin="3pt">
                        <block>{!$Label.TOTAL}</block>

                    </block>
                </table-cell>
                <table-cell border="1px solid black" font-weight="bold" background-color="#FFFFFF" text-align="right">
                    <block margin="3pt">
                        <block><apex:outputText rendered="{!displayDailyRate}" value="{!totalDailyRate_String}"/></block>
                    </block>
                </table-cell>
                <table-cell border="1px solid black" font-weight="bold" background-color="#FFFFFF" text-align="right">
                    <block margin="3pt">
                        <block><apex:outputText rendered="{!displayWeeklyRate}" value="{!totalWeeklyRate_String}"/></block>
                    </block>
                </table-cell>
                <table-cell border="1px solid black" font-weight="bold" background-color="#FFFFFF" text-align="right">
                    <block margin="3pt">
                        <block><apex:outputText rendered="{!displayMonthlyRate}" value="{!totalMonthlyRate_String}"/></block>
                    </block>
                </table-cell>
                <table-cell border="1px solid black" font-weight="bold" background-color="#FFFFFF" text-align="right">
                    <block margin="3pt">
                        <block><apex:outputText rendered="{!displayTotalPrice}" value="{!totalPrice_String}"/></block>
                    </block>
                </table-cell>
            </table-row>
        </table-body>
    </table>
</block>

<block margin="8pt"/>

1

You are asking how to display a checkbox in a custom visualforce page for a Salesforce CPQ quote template section - and you say you tried HTML and img tags.

You got the right idea, only that in <xls-fo> the syntax to include an image is different:

The syntax to include an image (of your checked-box) is:

<external-graphic src="https://www.google.com/images/branding/googlelogo/2x/googlelogo_color_272x92dp.png"  content-height="scale-to-fit" height="1.5in"  content-width="2.00in" scaling="non-uniform"/>

or rather with an actual checkbox:

<external-graphic src="https://user-images.githubusercontent.com/11351528/51387695-f564d000-1b4c-11e9-817d-5e6280f997d0.png" width="13px" height="13px"/>

Hope that helps - please replace the checkbox URL with your own.

| improve this answer | |

Your Answer

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

Not the answer you're looking for? Browse other questions tagged or ask your own question.