function readOnly(count){ }
Starting November 20, the site will be set to read-only. On December 4, 2023,
forum discussions will move to the Trailblazer Community.
+ Start a Discussion
Lokesh Rayapati4Lokesh Rayapati4 

Styling the output pdf using Html

Hi,
 I want to style my pdf. I want to get the record fields in a box and with good appearence.please help me in this.

User-added image

Below is my code...

========
ShowContactDetail.vfp

<apex:page controller="UpdateContactDetail">
 <style type="text/css">
  #title {
  font-size: 150%;
  margin-left: 30%;
  }
 </style>
  
  <h2 id="title">Contact</h2><br/><br/>
    <apex:form >
     <apex:pageBlock >
        <apex:pageBlockTable value="{!con}" var="b">
             <apex:column headervalue="Title">
                <apex:OutputText value="{!b.Title}" /> 
            </apex:column>   
            <apex:column headervalue="First Name">
                <apex:OutputText value="{!b.FirstName}" /> 
            </apex:column>            
            <apex:column headervalue="Last Name">
                <apex:OutputText value="{!b.LastName}" />
            </apex:column>
            <apex:column headervalue="Email">
                <apex:inputText value="{!b.Email}" />
            </apex:column>
            <apex:column headervalue="Phone">
                <apex:inputText value="{!b.Phone}" />
            </apex:column>
            
            <apex:column >
                <apex:commandLink action="{!updateRecord}" value="Update"/>                            
            </apex:column>                                                                                   
    </apex:pageBlockTable>
    </apex:pageBlock>
    </apex:form> 
         
</apex:page>

===============
UpdateContactDetail.apxc

public class UpdateContactDetail {

  public Contact con {get;set;}
  public Id recId;

    public UpdateContactDetail ()
    {
      recId = ApexPages.CurrentPage().getparameters().get('recordId');
        getRecord();
    }
   public void getRecord() {
   
      con = [select Id, Name,FirstName, LastName, Title, Email, Phone from contact where id =:recId];   

   }    
    
    public PageReference updateRecord(){      
        try{ 
            update con;
            
        }
        catch(DmlException ex){
            ApexPages.addMessages(ex);
        }
        return null;
    }
}

=============
GeneratePDFOfContactTrigger


trigger GeneratePDFOfContactTrigger on Contact (after update) {
    
    GeneratePDFController.generateContactPDF(Trigger.new);
    
}

==============
GeneratePDFController.apxc


public class GeneratePDFController{ 
    public static final String FORM_HTML_START = '<HTML><BODY>';
    public static final String FORM_HTML_END = '</BODY></HTML>';
    
    public static void generateContactPDF(list<contact> contactList){
        String pdfContent = '' + FORM_HTML_START;
        for(contact con : contactList){
            try
            {
                pdfContent = '' + FORM_HTML_START;
                pdfContent = pdfContent + '<H2>Contact Information</H2>';
                
                //Dynamically grab all the fields to store in the PDF
                Map<String, Schema.SObjectType> sobjectSchemaMap = Schema.getGlobalDescribe();
                Schema.DescribeSObjectResult objDescribe = sobjectSchemaMap.get('Contact').getDescribe();
                Map<String, Schema.SObjectField> fieldMap = objDescribe.fields.getMap();
                
                //Append each Field to the PDF
                
                for(Schema.SObjectField fieldDef : fieldMap.values()){
                    Schema.Describefieldresult fieldDescResult = fieldDef.getDescribe();
                    String name = fieldDescResult.getName();
                    if(name == 'Title' || name == 'FirstName' || name == 'LastName' || name == 'Email' || name == 'Phone'){
                        pdfContent = pdfContent + '<P>' + name + ': ' + con.get(name) + '</P>';
                    }
                }
                pdfContent = pdfContent + FORM_HTML_END;
            }catch(Exception e){
                pdfContent = '' + FORM_HTML_START;
                pdfContent = pdfContent + '<P>THERE WAS AN ERROR GENERATING PDF: ' + e.getMessage() + '</P>';
                pdfContent = pdfContent + FORM_HTML_END;
            }
            attachPDF(con,pdfContent);
        }
    }
    
    public static void attachPDF(Contact con, String pdfContent){
        try{
            Attachment attachmentPDF = new Attachment();
            attachmentPDF.parentId = con.Id;
            attachmentPDF.Name = con.FirstName+' '+con.LastName+ '.pdf';
            attachmentPDF.body = Blob.toPDF(pdfContent); //This creates the PDF content
            insert attachmentPDF;
        }catch(Exception e){
            con.addError(e.getMessage());
        }
    }
    
}

Thank you in advance 
Dushyant SonwarDushyant Sonwar
Lokesh,

Change this part
<apex:form >
     <apex:pageBlock >
        <apex:pageBlockTable value="{!con}" var="b">
             <apex:column headervalue="Title">
                <apex:OutputText value="{!b.Title}" /> 
            </apex:column>   
            <apex:column headervalue="First Name">
                <apex:OutputText value="{!b.FirstName}" /> 
            </apex:column>            
            <apex:column headervalue="Last Name">
                <apex:OutputText value="{!b.LastName}" />
            </apex:column>
            <apex:column headervalue="Email">
                <apex:inputText value="{!b.Email}" />
            </apex:column>
            <apex:column headervalue="Phone">
                <apex:inputText value="{!b.Phone}" />
            </apex:column>
            
            <apex:column >
                <apex:commandLink action="{!updateRecord}" value="Update"/>                            
            </apex:column>                                                                                   
    </apex:pageBlockTable>
    </apex:pageBlock>
    </apex:form>

to
this
<table border="1" cellpadding="0" cellspacing="0" width="200px"  style="width:100%;border-collapse:collapse;">
	  <tr>
		<th>Title</th>
		<th>First Name</th>
		<th>Last Name</th>
		<th>Email</th>
		<th>Phone</th>
	  </tr>
	<apex:repeat value="{!con}" var="b" >
	  <tr>
		<td>{!b.title}</td>
		<td>{!b.FirstName}</td>
		<td>{!b.LastName}</td>
		<td>{!b.Email}</td>
		<td>{!b.Phone}</td>
	  </tr>
	</apex:repeat>
</table>

And add this Css
table, th, td {
  border:1px solid black;
}

Your final code outpiut will be something like below
<apex:page controller="UpdateContactDetail">
 <style type="text/css">
  #title {
  font-size: 150%;
  margin-left: 30%;
  }
  table, th, td {
	border:1px solid black;
  }
 </style>
  
  <h2 id="title">Contact</h2><br/><br/>
    <table border="1" cellpadding="0" cellspacing="0" width="200px"  style="width:100%;border-collapse:collapse;">
	  <tr>
		<th>Title</th>
		<th>First Name</th>
		<th>Last Name</th>
		<th>Email</th>
		<th>Phone</th>
	  </tr>
	<apex:repeat value="{!con}" var="b" >
	  <tr>
		<td>{!b.title}</td>
		<td>{!b.FirstName}</td>
		<td>{!b.LastName}</td>
		<td>{!b.Email}</td>
		<td>{!b.Phone}</td>
	  </tr>
	</apex:repeat>
</table>
         
</apex:page>

​​​​​​​Hope this helps!
Lokesh Rayapati4Lokesh Rayapati4
Hii @Dushyant Sonwar

Sorry if my question above stated is not clear. I want to change my PDF appearence not Visualforce preview appearence. As I attached above is the Pdf that saves to particular record. The requirement given is that In preview of Visualforce page we can be able to put Id in url starts with recordId=-------- like that. so, after that we can change fields and it should save in salesforce. and updated record fields will be saved as pdf into that notes and attachments of that particular records. So upto this I have completed . The only thing left is that I want to change the look of PDF into like box so every fields in pdf will appear in that box of that pdf.

Please help me in solving this styling of the pdf.
Thanks!. 
 
Dushyant SonwarDushyant Sonwar
Didn't understand what you just said , don't you want a thin border?
User-added image



 
Lokesh Rayapati4Lokesh Rayapati4
I want that in pdf too not only in preview output