function readOnly(count){ }
Sign Up ›
Starting November 20, the site will be set to read-only. On December 4, 2023,
forum discussions will move to the Trailblazer Community.
Learn More

Browse by Topic
ShowAll Questionssorted byDate Posted
+ Start a Discussion
AndyPandyAndyPandy 

PanelGrid Layout, Formatting and Font Help...

Hi Guys,

 

I have created a VF Page, which is linked to a button called "Generate PDF", which renders a record of a Custom Object as a PDF.

 

I'm using the PanelGrid feature for my page, as this PDF should appear like a nice, clear form - which can then be saved or emailed etc.

 

However, I'm struggling with a couple of issues:

 

1 - I'm specifying the font as Helvetica - but it is still coming through as Times New Roman

 

2 - I would like there to be a space (blank line/carriage return/line break - whatever the correct terminology is) under the section headings (which I've made via a standard outputtext created outside of a PanelGrid) - but nothing I've tried seems to work

 

3 - I would like for the Column widths for each of the PanelGrids to be the same, that is, not each column must be of equal width, but all the first columns should be the same as each other, all of the second columns should be the same, etc - for all four columns, see e.g. below:

 

Panel Grid 1

Col A | Col B | Col C | Col D

 

Panel Grid 2

Col A | Col B | Col C | Col D

 

Panel Grid 3

Col A | Col B | Col C | Col D

 

So what I would want would be for all the Col A's to be the same width, all the Col B's to be the same etc...

 

See entire VF Page code below:

 

(Any help would be greatly appreciated).  Many thanks, Andy.

 

 

<apex:page renderAs="pdf" StandardController="Adverse_Incident__c">

<style>
   .colstyle {width:25%}
</style>

<apex:outputText style="font-style:bold; font-weight:bold; font-size:20px; font-family:Helvetica" value="Incident Information"/>

  <apex:PanelGrid columns="4" border="2" frame="box" width="100%" columnClasses="colstyle" >
<apex:outputlabel style="font-style:regular; font-weight:bold; font-size:10px; font-family:Helvetica" value="Person Reporting Incident"/>
<apex:outputText style="font-style:regular; font-weight:regular; font-size:10px; font-family:Helvetica" value="{!Adverse_Incident__c.Person_Reporting_Incident__c}"/>
<apex:outputlabel style="font-style:regular; font-weight:bold; font-size:10px; font-family:Helvetica" value="Incident ID"/>
<apex:outputText style="font-style:regular; font-weight:regular; font-size:10px; font-family:Helvetica" value="{!Adverse_Incident__c.Name}"/>
  </apex:PanelGrid>
 
<apex:outputLabel style="font-style:bold; font-weight:bold; font-size:20px; font-family:Helvetica" value="Facility Information"/>
   
   <apex:PanelGrid columns="4" border="2" frame="box" width="100%" columnClasses="colstyle">
<apex:outputlabel style="font-style:regular; font-weight:bold; font-size:10px; font-family:Helvetica" value="Hospital Name"/>
<apex:outputText style="font-style:regular; font-weight:regular; font-size:10px; font-family:Helvetica" value="{!Adverse_Incident__c.Hospital_Name__c}"/>
<apex:outputlabel style="font-style:regular; font-weight:bold; font-size:10px; font-family:Helvetica" value="City"/>
<apex:outputText style="font-style:regular; font-weight:regular; font-size:10px; font-family:Helvetica" value="{!Adverse_Incident__c.City__c}"/>
<apex:outputlabel style="font-style:regular; font-weight:bold; font-size:10px; font-family:Helvetica" value="Account Number"/>
<apex:outputText style="font-style:regular; font-weight:regular; font-size:10px; font-family:Helvetica" value="{!Adverse_Incident__c.Account_No__c}"/>
<apex:outputlabel style="font-style:regular; font-weight:bold; font-size:10px; font-family:Helvetica" value="Street Address"/>
<apex:outputText style="font-style:regular; font-weight:regular; font-size:10px; font-family:Helvetica" value="{!Adverse_Incident__c.Street_Address__c}"/>
<apex:outputlabel style="font-style:regular; font-weight:bold; font-size:10px; font-family:Helvetica" value="Phone No"/>
<apex:outputText style="font-style:regular; font-weight:regular; font-size:10px; font-family:Helvetica" value="{!Adverse_Incident__c.Phone_No__c}"/>
<apex:outputlabel style="font-style:regular; font-weight:bold; font-size:10px; font-family:Helvetica" value="Country"/>
<apex:outputText style="font-style:regular; font-weight:regular; font-size:10px; font-family:Helvetica" value="{!Adverse_Incident__c.Country__c}"/>
<apex:outputlabel style="font-style:regular; font-weight:bold; font-size:10px; font-family:Helvetica" value="E Mail Address"/>
<apex:outputText style="font-style:regular; font-weight:regular; font-size:10px; font-family:Helvetica" value="{!Adverse_Incident__c.E_Mail_Address__c}"/>
<apex:outputlabel style="font-style:regular; font-weight:bold; font-size:10px; font-family:Helvetica" value="Post Code"/>
<apex:outputText style="font-style:regular; font-weight:regular; font-size:10px; font-family:Helvetica" value="{!Adverse_Incident__c.Post_Code__c}"/>
   </apex:PanelGrid>

<apex:outputLabel style="font-style:bold; font-weight:bold; font-size:20px; font-family:Helvetica" value="Sales Representative Information"/>
   
   <apex:PanelGrid columns="4" border="2" frame="box" width="100%" columnClasses="colstyle">
<apex:outputlabel style="font-style:regular; font-weight:bold; font-size:10px; font-family:Helvetica" value="S&N Organisation"/>
<apex:outputText style="font-style:regular; font-weight:regular; font-size:10px; font-family:Helvetica" value="{!Adverse_Incident__c.S_N_Organisation__c}"/>
<apex:outputlabel style="font-style:regular; font-weight:bold; font-size:10px; font-family:Helvetica" value="Sales Rep Street Address"/>
<apex:outputText style="font-style:regular; font-weight:regular; font-size:10px; font-family:Helvetica" value="{!Adverse_Incident__c.Sales_Rep_Street_Address__c}"/>
<apex:outputlabel style="font-style:regular; font-weight:bold; font-size:10px; font-family:Helvetica" value="Sales Rep Phone No"/>
<apex:outputText style="font-style:regular; font-weight:regular; font-size:10px; font-family:Helvetica" value="{!Adverse_Incident__c.Sales_Rep_Phone_No__c}"/>
<apex:outputlabel style="font-style:regular; font-weight:bold; font-size:10px; font-family:Helvetica" value="Sales Rep City"/>
<apex:outputText style="font-style:regular; font-weight:regular; font-size:10px; font-family:Helvetica" value="{!Adverse_Incident__c.Sales_Rep_City__c}"/>
<apex:outputlabel style="font-style:regular; font-weight:bold; font-size:10px; font-family:Helvetica" value="Sales Rep E Mail Address"/>
<apex:outputText style="font-style:regular; font-weight:regular; font-size:10px; font-family:Helvetica" value="{!Adverse_Incident__c.Sales_Rep_E_Mail_Address__c}"/>
<apex:outputlabel style="font-style:regular; font-weight:bold; font-size:10px; font-family:Helvetica" value="Sales Rep Country"/>
<apex:outputText style="font-style:regular; font-weight:regular; font-size:10px; font-family:Helvetica" value="{!Adverse_Incident__c.Sales_Rep_Country__c}"/>
<apex:outputlabel style="font-style:regular; font-weight:bold; font-size:10px; font-family:Helvetica" value=""/>
<apex:outputText style="font-style:regular; font-weight:regular; font-size:10px; font-family:Helvetica" value=""/>
<apex:outputlabel style="font-style:regular; font-weight:bold; font-size:10px; font-family:Helvetica" value="Sales Rep Post Code"/>
<apex:outputText style="font-style:regular; font-weight:regular; font-size:10px; font-family:Helvetica" value="{!Adverse_Incident__c.Sales_Rep_Post_Code__c}"/>
   </apex:PanelGrid>

 

bob_buzzardbob_buzzard

I've found that I end up using regular HTML tables rather than Visualforce components, as it allows me to inline style each cell, which is required surprisingly often when rendering pages as PDF.
AndyPandyAndyPandy

Hi Bob,

 

Thank you very much for your reply - I appreciate that.

 

Sadly I'm a complete nube to all coding, including HTML - is there a good resource you could reccommend which would help me to code a nice looking pdf table?

 

Also, would I need to alter any of my existing APEX code from the VF Page, or would it just be HTML styling additions?

 

Thanks,

 

Andy
bob_buzzardbob_buzzard

I've always found w3schools to be a good resource for HTML (and other web technologies):

 

http://www.w3schools.com/html/default.asp

 

You can mix and match HTML and visualforce tags in the same page without issue. Best of luck!

 

 
aka_floaka_flo

I tried throwing in the Html code, but is there a particular place I need to put it? within the <apex:outputpanel> tags, but doesn't seem to do anything.

 

Any additional information would be greatly appreciated.
aka_floaka_flo

I figured it out!  Thanks!
pchatellepchatelle

What did you end up doing? My style keeps getting overriden.
AndyPandyAndyPandy
Hi pchatelle,

I'm afraid my company gave up with Salesforce a while ago, so we cancelled our subscription.

I didn't get much further with this before they decided to pull the plug - sorry I can't be of more help.

Good luck!
aka_floaka_flo

       This is what I did in my code, so that I could control things like Bob mentioned.

 

    <apex:outputpanel layout="block" >
           <table width="800px" align="left">
           <tr>
           <td width="150px"><h2><apex:outputText value="Conference Name"/></h2></td>
                <td width="150px"><apex:outputField value="{!Conference__c.name}">
                <apex:inlineEditSupport showOnEdit="saveButton, cancelButton"  hideOnEdit="editButton" event="ondblclick"  changedStyleClass="myBoldClass" resetFunction="resetInlineEdit"/>
                </apex:outputField></td>
                
                <td width="150px"><h2><apex:outputText value="Association"/></h2></td>
               <td width="150px"> <apex:outputField value="{!Conference__c.Association_1__c}" >
                <apex:inlineEditSupport showOnEdit="saveButton, cancelButton"  hideOnEdit="editButton" event="ondblclick"  changedStyleClass="myBoldClass" resetFunction="resetInlineEdit"/>
                </apex:outputField></td>
                </tr>