Column background color in pdf

Question

Please someone let me know how to get a colored background of a column in pageblocktable in an apex visualforce page with renderAs pdf.

I have tried with this. It works in pages but fails for pdf.

<apex:page standardController="Incident__c" extensions="IncidentDetailExtnController" renderAs="pdf"  applyBodyTag="false">
<html>
<style type="text/css" media="print">
  .TableTitle {
    background-color: red!important; 
    font-size:100% !important; 
  }

</style>
</html>
   <apex:pageBlock title="Incident Detail">
        <apex:pageBlockSection columns="2">
            <apex:outputField value="{!Incident__c.Name}"/>
            <apex:outputField value="{!Incident__c.Rep_Lookup_id__c}"/>
            <apex:outputField value="{!Incident__c.Report_Publish_date__c}"/>
            <apex:outputField value="{!Incident__c.Status_abv__c}"/>
            <apex:outputField value="{!Incident__c.No_Of_Transactions_abv__c}"/>                                                
        </apex:pageBlockSection>
    </apex:pageBlock>    
    <apex:pageBlock title="Incident Transactions">
        <!--<apex:tabPanel switchType="client">-->

            <!--<apex:tab label="HCP Calls">
            <a href="http://www.tutorialspoint.com" target="_blank">Tutorials Point</a>
            <!--<a href="http://www.tutorialspoint.com" target="_blank">Tutorials Point</a>
            <a href="http://www.tutorialspoint.com" target="_self">Tutorials Point</a>--!-->


           <!-- <apex:tab label="Samples">
            <a href="http://www.tutorialspoint.com" target="_self">Tutorials Point</a>
            </apex:tab>
            <apex:tab label="Speaker Program Attendees">

            </apex:tab>
            <apex:tab label="Synch Rate">

            </apex:tab>                               
        </apex:tabPanel>-->


        <apex:pageBlockSection title="HCP Calls"  collapsible="true">
        <apex:pageBlockTable columns="9" value="{!oIncTranListHCPDetail}" border="true" var="itr" cellPadding="4" >
        <apex:column headerValue="Professional Name" styleClass="TableTitle" value="{!itr.Prof_First_Name_abv__c} {!itr.Prof_Middle_Name_abv__c} {!itr.Prof_Last_Name_abv__c}" />

         <!-- Need to put Profname string here from the map -->
        <apex:column headerValue=" ABS on Call" styleClass="TableTitle"/> 
        <apex:column value="{!itr.Account_Abs_abv__c}" /> 
        <apex:column headerValue=" Professional Address" />
        <apex:column value="{!itr.Prof_Address_Line1_abv__c}" /> 
        <apex:column headerValue=" Associated Prescriber" value="{!itr.Associated_Prescriber_ID_abv__c}" />
        <apex:column headerValue=" Product" value="{!itr.Account_Abs_abv__c}" />
        <apex:column headerValue=" Activity Date" value="{!itr.Account_Abs_abv__c}" /> 
        <apex:column headerValue=" Outcome - LOV" value="{!itr.Outcome_abv__c}" />



        </apex:pageBlockTable>
        </apex:pageBlockSection>

        <apex:pageBlockSection title="Samples" columns="4">
        <apex:pageBlockTable columns="10" value="{!oIncTranListHCPDetail}" border="true" var="itr" cellPadding="4" >
        <apex:column headerValue="Sample Type" value="{!itr.Prof_First_Name_abv__c}" />
        <apex:column headerValue="Professional Name" value="{!itr.Prof_First_Name_abv__c} {!itr.Prof_Middle_Name_abv__c}  {!itr.Prof_Last_Name_abv__c}" />
        <apex:column headerValue="ABS on Call" value="{!itr.Account_Abs_abv__c}" />
        <apex:column headerValue="Professional Address" value="{!itr.Prof_Address_Line1_abv__c}" />
        <apex:column headerValue="Product" value="{!itr.Prof_First_Name_abv__c}" />
        <apex:column headerValue="Activity Date" value="{!itr.Prof_First_Name_abv__c}" />
        <apex:column headerValue="Quantity (for hand samples, ESR, and DTP/BRC tied to rep)" value="{!itr.Prof_First_Name_abv__c}" />
        <apex:column headerValue="Outcome - LOV" value="{!itr.Outcome_abv__c}" />

        </apex:pageBlockTable>
        </apex:pageBlockSection>
        <apex:pageBlockSection title="Speaker Program Attendees" columns="4">

         <apex:pageBlockTable columns="9" value="{!oIncTranListHCPDetail}" border="true" var="itr" cellPadding="4" >
        <apex:column headerValue="Professional Name" value="{!itr.Prof_First_Name_abv__c} {!itr.Prof_Middle_Name_abv__c}  {!itr.Prof_Last_Name_abv__c}" />
        <apex:column headerValue="ABS on Call" value="{!itr.Account_Abs_abv__c}" />
        <apex:column headerValue="Professional Address" value="{!itr.Prof_Address_Line1_abv__c}" />
        <apex:column headerValue="Product" value="{!itr.Prof_First_Name_abv__c}" />
        <apex:column headerValue="Activity Date" value="{!itr.Prof_First_Name_abv__c}" />
        <apex:column headerValue="Program Name, Date and Location" value="{!itr.Prof_First_Name_abv__c}" />
        <apex:column headerValue="Outcome - LOV" value="{!itr.Outcome_abv__c}" />

        </apex:pageBlockTable>
        </apex:pageBlockSection>

        <apex:pageBlockSection title="Synch report" columns="4">

         <apex:pageBlockTable columns="6" value="{!oIncTranListHCPDetail}" border="true" var="itr" cellPadding="4" >
        <apex:column headerValue="Date of Previous Synchronization" value="{!itr.Date_of_Prev_Sync_abv__c}" />
        <apex:column headerValue="Date of Last Synchronization" value="{!itr.Date_of_Last_Sync_abv__c}" />
        <apex:column headerValue="Days between Synchronization" value="{!itr.Days_bwn_Sync_abv__c}" />
        <apex:column headerValue="Outcome - LOV" value="{!itr.Outcome_abv__c}" />

        </apex:pageBlockTable>
        </apex:pageBlockSection>


        <apex:pageBlockSection title="HCI/HCO Calls" columns="6">

         <apex:pageBlockTable columns="10" value="{!oIncTranListHCPDetail}" border="true" var="itr" cellPadding="4" >
        <apex:column headerValue="Account Name" value="{!itr.Account_Name_abv__c}" />
        <apex:column headerValue="ABS on Call" value="{!itr.Account_Abs_abv__c}" />
        <apex:column headerValue="Account Address" value="{!itr.Account_Location_abv__c}" />
        <apex:column headerValue="Attendee Name" value="{!itr.Prof_First_Name_abv__c}" />
        <apex:column headerValue="Attendee Role" value="{!itr.Attendee_Role_abv__c}" />
        <apex:column headerValue="Detail" value="{!itr.Prof_First_Name_abv__c}" />
        <apex:column headerValue="Activity Date" value="{!itr.Prof_First_Name_abv__c}" />
        <apex:column headerValue="Outcome - LOV" value="{!itr.Outcome_abv__c}" />

        </apex:pageBlockTable>
        </apex:pageBlockSection>

         <apex:pageBlock title="">

         </apex:pageBlock> 
        <apex:pageBlockSection title="Pharmacy Calls" columns="4">

         <apex:pageBlockTable columns="10" value="{!oIncTranListHCPDetail}" border="true" var="itr" cellPadding="4" >
        <apex:column headerValue="Account Name" value="{!itr.Account_Name_abv__c}" />
        <apex:column headerValue="ABS on Call" value="{!itr.Account_Abs_abv__c}" />
        <apex:column headerValue="Account Address" value="{!itr.Account_Location_abv__c}" />
        <apex:column headerValue="Attendee Name" value="{!itr.Prof_First_Name_abv__c}" />
        <apex:column headerValue="Attendee Role" value="{!itr.Attendee_Role_abv__c}" />
        <apex:column headerValue="Detail" value="{!itr.Prof_First_Name_abv__c}" />
        <apex:column headerValue="Activity Date" value="{!itr.Prof_First_Name_abv__c}" />
        <apex:column headerValue="Outcome - LOV" value="{!itr.Outcome_abv__c}" />

        </apex:pageBlockTable>
        </apex:pageBlockSection>

    </apex:pageBlock>      
</apex:page>

</style>

You need to add style class for the page block table and @media tag for the css — Sunny, Commented Aug 20, 2015 at 7:33
I think that Pdf generator that is in salesforce, is very old and it does not support css fully — Vladyslav K, Commented Aug 2, 2016 at 11:55

user9959user9959 · Accepted Answer · 2014-11-20 16:11:39Z

1

In you want to render your page as PDF , you should use HTML tag insted of VisualForce. So, try to use <table> tag for creating your table.

Then, use this sintax to get your first column colored :

<colgroup>
    <col span="1" style="background-color:red">       
</colgroup>

The <colgroup> tag must be child of <table>

EXAMPLE GIVEN:

<table>
  <colgroup>
    <col span="1" style="background-color:red">    
  </colgroup>
  <tr>
    <th>ISBN</th>
    <th>Title</th>
    <th>Price</th>
  </tr>
  <tr>
    <td>3476896</td>
    <td>My first HTML</td>
    <td>$53</td>
  </tr>
  <tr>
    <td>5869207</td>
    <td>My first CSS</td>
    <td>$49</td>
  </tr>
</table>

answered Nov 20, 2014 at 16:11

user9959

Of course, your <apex:page> should contain renderAs="pdf" attribute as well.
– user9959
Commented Nov 20, 2014 at 16:18
I am not being able to use tr td tags here. Can you please do this for me in my page? Atleast just for one section , say for this section. <apex:pageBlockSection title="HCP Calls" collapsible="true">
– Testing_SFDC
Commented Nov 20, 2014 at 16:48

Add a comment |

Sagar Pareek · Accepted Answer · 2015-01-30 07:20:42Z

0

It is recommended to use HTML Tags in PDF instead of using VF Tags.

For your column use

<td style="background-color:#FF0000">Your content</td>

answered Jan 30, 2015 at 7:20

Sagar Pareek

1,2158 silver badges17 bronze badges

Add a comment |

Stack Exchange Network

Column background color in pdf

2 Answers 2

You must log in to answer this question.

Not the answer you're looking for? Browse other questions tagged
apex
css
visualforce
color-picker
.

Hot Network Questions

Column background color in pdf

2 Answers 2

You must log in to answer this question.

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

Related

Hot Network Questions

Not the answer you're looking for? Browse other questions tagged
apex
css
visualforce
color-picker
.