0

I have a VF page which I'm rendering as PDF.

There is one long text area field that I need to display with proper formatting. To display proper line break, I used below line:

<apex:outputText value="{!SUBSTITUTE(JSENCODE(requiredItem.quoteItemRecord.Product_Description__c), '\r\n', '<br/>')}"  escape="false"/>

Now with this my ' is rendering as \', like Salesforce's is getting displayed as Salesforce's.

I'm not sure how to avoid backslash on my VF page, and I'm not sure if I will face other such incidents which I haven't encountered yet.

Screenshot how my product Description looks: enter image description here

How my VF renders as PDF when I use HTMLENCODE enter image description here

How my VF renders as PDF when I use JSENCODE enter image description here

My VF Page:

<apex:variable var="v" value="" rendered="{!wrapperList.size >0}">
    <div >
    
        <div style="background-color:#696158;padding:10px;font-family: sans-serif;background-color:#BFBFBF;font-size:13.3px;page-break-inside: avoid !important;">
            <b> Proposed System </b>
        </div>
        
        <table style="width: 100%;border-collapse: collapse;border: 1px solid black;font-family:sans-serif;font-size:13.3px;">
            <thead style="font-weight:bold;background-color:#DBE5F1;">
                
                <tr style="text-align:center;">
                    <th style="border: 1px solid black;width:20%;border-left: none;">
                        Product Code
                    </th>
                    <th style="border: 1px solid black;width:55%;">
                        Product Description 
                    </th>
                    <th style="border: 1px solid black;width:15%;">
                        Est. <br/> Lead <br/> Time (Wks.)
                    </th>
                    <th style="border: 1px solid black;width:10%;">
                        Unit <br/> Price <br/> ({!quoteRecord.CurrencyIsoCode})
                    </th>
                    <th style="border: 1px solid black;width:5%;border-right: none;">
                        Qty
                    </th>
                    <th style="border: 1px solid black;width:20%;border-right: none;">
                        Total Price ({!quoteRecord.CurrencyIsoCode})
                    </th>
                </tr>
            </thead>
            <tbody style="font-weight:normal;border-bottom: none;">
                <apex:repeat value="{!requiredHeaderList}"  var="key" id="theRepeatMap">
                    <tr style="display: {!IF(key=='null', 'none', 'table-row')};">
                        <td colspan="6" style="background-color:#696158;padding:10px;font-family: sans-serif;background-color:#BFBFBF;font-size:13.3px;">
                        {!key}
                        </td>
                    </tr>
                    <apex:repeat value="{!wrapperListMap[key]}" var="requiredItem" id="theRepeat">
                   
                   <apex:variable var="cntRequired" value="{!cntRequired+1}"/>
                    <tr style="{!IF((mod(cntRequired,2)) == 0, 'border: 1px solid black;page-break-inside: avoid !important;', 'border: 1px solid black;background-color:#F2F1F4;page-break-inside: avoid !important;')} ">
                        <td style="border: 1px solid black;padding:10px;border-left: none;font-weight:bold;text-align:center;">
                            {!requiredItem.quoteItemRecord.Product2.ProductCode}
                        </td>
                        <td style="border: 1px solid black;padding:10px;" >
                            <b>{!requiredItem.quoteItemRecord.Product_Name__c} </b>
                            <br/>
                            <!-- <apex:outputText value="{!HTMLENCODE(requiredItem.quoteItemRecord.Product_Description__c)}" escape="false" style="white-space: pre"/> -->
                            <apex:outputText value="{!SUBSTITUTE(JSENCODE(requiredItem.quoteItemRecord.Product_Description__c), '\r\n', '<br/>')}"  escape="false"/>
                            
                        </td>
                        <td style="border: 1px solid black;text-align:center;">
                            {!requiredItem.quoteItemRecord.Est_Delivery_Week_Number__c}
                        </td>
                        <td style="border: 1px solid black;text-align: center;">
                            
                            <div style="float: right;position: relative;">
                                <apex:outputText value="{0,number,#,##0}">{!quoteRecord.Currency_Symbol__c}  
                                    <apex:param value="{!requiredItem.unitPrice}"/>
                                </apex:outputText>
                            </div>
                            
                        </td>
                        <td style="border: 1px solid black;text-align:center;">
                            {!requiredItem.qty}
                        </td>
                        <td style="border: 1px solid black;text-align: right;border-right: none;">
                            
                            <apex:outputText value="{0,number,#,##0}">{!quoteRecord.Currency_Symbol__c}    
                                <apex:param value="{!requiredItem.TotalPrice}"/>
                            </apex:outputText>
                        </td>
                    </tr>
                   
                </apex:repeat>
                    
                </apex:repeat>
                
                <tr  style="{!IF(AND(quoteRecord.Discount__c != null && quoteRecord.Discount__c != 0),'border: 1px solid black;border-bottom: none;','display:none')}">
                    <td style="border: 1px solid black;text-align:right;padding:10px;border-left: none;border-bottom: none;" colspan="5">
                        <b>Discount</b>
                    </td>
                    
                    <td style="border: 1px solid black;text-align:center;border-right: none;">
                        
                        <apex:outputText value="{0,number,#,##0}"> {!quoteRecord.Currency_Symbol__c}    
                            <apex:param value="{!discount}"/>
                        </apex:outputText>
                    </td>
                </tr>
                <tr style="border: 1px solid black;border-top: none;border-bottom: none;">
                    <td style="border: 1px solid black;text-align:right;padding:10px;border-left: none;" colspan="5">
                        <b>Total</b>
                    </td>
                    
                    <td style="border: 1px solid black;text-align:center;border-right: none;">
                        <apex:outputText value="{0,number,#,##0}"> {!quoteRecord.Currency_Symbol__c}    
                            <apex:param value="{!totalAfterDiscount}"/>
                        </apex:outputText>
                    </td>
                </tr>
            </tbody>
            
        </table>
    </div>
</apex:variable>

Thanks

1 Answer 1

1

The JSENCODE is what's causing this. You want to use HTMLENCODE instead. You only use JSENCODE if the value is included directly in a script tag.

<script>
    var x = {!JSENCODE(config)};
</script>

For anywhere else, you should use HTMLENCODE instead.

<div>
  <apex:outputText value="{!HTMLENCODE(content)}" escape="false" />
</div>
7
  • when I'm using HTMLENCODE, I'm not getting other indentations like the new line. Sep 25, 2022 at 22:36
  • @salesforceDeveloper Don't convert them to newlines, fix them in css: <div style="white-space: pre"><apex:outputText value="{!HTMLENCODE(content)}" escape="false" /></div>.
    – sfdcfox
    Sep 25, 2022 at 23:10
  • after fixing them in CSS, it's taking other column spaces as well. I guess it's trying to display long text area as it is Sep 26, 2022 at 13:11
  • @salesforceDeveloper If there's not enough space, it does tend to overflow. PDFs are pretty basic, unfortunately.
    – sfdcfox
    Sep 26, 2022 at 14:36
  • Thanks, @sfdcfox! Do I have any other options? Sep 26, 2022 at 17:01

You must log in to answer this question.

Not the answer you're looking for? Browse other questions tagged .