Sign Up ›
  • Constance HUA
  • NEWBIE
  • 10 Points
  • Member since 2017
  • Chatter
    Feed
  • 0
    Best Answers
  • 0
    Likes Received
  • 1
    Likes Given
  • 1
    Questions
  • 3
    Replies
SOLVED
4 replies

Word to Visual force to pdf

Hi guys,
I'm trying here to get a PDF from SF page. Therefore, I am creating the page on visualforce. 
I am not a coder so I made the document on Word, saved as HTML and copied the code to my visualforce. 

However, it seems that the writing is not the same as I had to add quotes and end tags like <\meta>. I did all that and in the end, I got the error : element <o:p> not known.

So I tried with Google Sheets to download as HTML and same : I have to close all elements again.

Help! :p

Here is the error : line 6, column 3: The element type "meta" must be terminated by the matching end-tag "</meta>"
Error: The element type "meta" must be terminated by the matching end-tag "</meta>".

Here is my current code : 
<apex:page standardController="Account" renderAs="pdf" applyBodyTag="false">
  <head>
<meta content="text/html; charset=UTF-8" http-equiv="content-type">
<style type="text/css">
@import url('https://themes.googleusercontent.com/fonts/css?kit=fpjTOVmNbO4Lz34iLyptLVumN3ATOVc2BoeDKcwJhFTljiSzuFEcjsip7pjNdcnF');ol{margin:0;padding:0}table td,table th{padding:0}.c13{border-right-style:solid;padding:0pt 5.8pt 0pt 5.8pt;border-bottom-color:#000000;border-top-width:0pt;border-right-width:0pt;border-left-color:#000000;vertical-align:top;border-right-color:#000000;border-left-width:0pt;border-top-style:solid;border-left-style:solid;border-bottom-width:0pt;width:261.4pt;border-top-color:#000000;border-bottom-style:solid}.c12{color:#000000;font-weight:700;text-decoration:none;vertical-align:baseline;font-size:12pt;font-family:"Adobe Fan Heiti Std B";font-style:normal}.c2{color:#000000;font-weight:400;text-decoration:none;vertical-align:baseline;font-size:9pt;font-family:"Calibri";font-style:normal}.c6{color:#000000;font-weight:400;text-decoration:none;vertical-align:baseline;font-size:11pt;font-family:"Calibri";font-style:normal}.c10{color:#000000;font-weight:400;text-decoration:none;vertical-align:baseline;font-size:12pt;font-family:"Calibri";font-style:normal}.c4{padding-top:0pt;padding-bottom:0pt;line-height:1.0;text-align:right;margin-right:-5.5pt}.c9{padding-top:0pt;padding-bottom:0pt;line-height:1.0;text-align:left}.c0{padding-top:0pt;padding-bottom:0pt;line-height:1.0;text-align:justify}.c5{margin-left:-5.8pt;border-spacing:0;border-collapse:collapse;margin-right:auto}.c8{font-size:9pt;color:#1155cc;text-decoration:underline}.c3{background-color:#ffffff;max-width:529pt;padding:28.4pt 40.5pt 70.8pt 42.5pt}.c7{color:inherit;text-decoration:inherit}.c1{height:11pt}.c11{height:134pt}.title{padding-top:24pt;color:#000000;font-weight:700;font-size:36pt;padding-bottom:6pt;font-family:"Calibri";line-height:1.0;page-break-after:avoid;text-align:left}.subtitle{padding-top:18pt;color:#666666;font-size:24pt;padding-bottom:4pt;font-family:"Georgia";line-height:1.0;page-break-after:avoid;font-style:italic;text-align:left}li{color:#000000;font-size:11pt;font-family:"Calibri"}p{margin:0;color:#000000;font-size:11pt;font-family:"Calibri"}h1{padding-top:12pt;color:#2f5496;font-weight:700;font-size:18pt;padding-bottom:0pt;font-family:"Cambria";line-height:1.0;page-break-after:avoid;text-align:left}h2{padding-top:2pt;color:#2f5496;font-weight:700;font-size:13pt;padding-bottom:0pt;font-family:"Calibri";line-height:1.0;page-break-after:avoid;text-align:left}h3{padding-top:14pt;color:#000000;font-weight:700;font-size:14pt;padding-bottom:4pt;font-family:"Calibri";line-height:1.0;page-break-after:avoid;text-align:left}h4{padding-top:12pt;color:#000000;font-weight:700;font-size:12pt;padding-bottom:2pt;font-family:"Calibri";line-height:1.0;page-break-after:avoid;text-align:left}h5{padding-top:11pt;color:#000000;font-weight:700;font-size:11pt;padding-bottom:2pt;font-family:"Calibri";line-height:1.0;page-break-after:avoid;text-align:left}h6{padding-top:10pt;color:#000000;font-weight:700;font-size:10pt;padding-bottom:2pt;font-family:"Calibri";line-height:1.0;page-break-after:avoid;text-align:left}</style>
</head>
<body class="c3">
<p class="c9 c1" id="h.gjdgxs">
<span class="c6">
</span>
</p>
<a id="t.43237f724b83829791a3600f5d7a15de7edeb72b">
</a>
<a id="t.0">
</a>
<table class="c5">
<tbody>
<tr class="c11">
<td class="c13" colspan="1" rowspan="1">
<p class="c0">
<span style="overflow: hidden; display: inline-block; margin: 0.00px 0.00px; border: 0.00px solid #000000; transform: rotate(0.00rad) translateZ(0px); -webkit-transform: rotate(0.00rad) translateZ(0px); width: 211.94px; height: 100.48px;">
<img src="https://c.eu4.visual.force.com/resource/1494428198000/Logo_2017" style="width: 211.94px; height: 100.48px; margin-left: -0.00px; margin-top: -0.00px; transform: rotate(0.00rad) translateZ(0px); -webkit-transform: rotate(0.00rad) translateZ(0px);" title="">
</span>
</p>
<p class="c0">
<span class="c2">
Pleyad Pôle Business - Immeuble Pleyad 2</span>
</p>
<p class="c0">
<span class="c2">47 boulevard Ornano</span>
</p>
<p class="c0">
<span class="c2">93521 Saint Denis – France</span>
</p>
<p class="c0">
<span class="c2">Tel&nbsp;: +33 1 48 20 20 30</span>
</p>
<p class="c0">
<span class="c8">
<a class="c7" href="https://www.google.com/url?q=http://www.neofi-solutions.com&amp;sa=D&amp;ust=1494580227154000&amp;usg=AFQjCNG-79zmNmJ099Yk2AO5_V_zrntviA">www.neofi-solutions.com</a>
</span>
</p>
<p class="c0 c1">
<span class="c2">
</span>
</p>
</td>
<td class="c13" colspan="1" rowspan="1">
<p class="c4 c1">
<span class="c12">
</span>
</p>
<p class="c4 c1">
<span class="c12">
</span>
</p>
<p class="c4">
<span class="c12">FACTURE N°&nbsp;{!order.OrderNumber}</span>
</p>
<p class="c4">
<span class="c10">Date d’émission : {!Now()}</span>
</p>
</td>
</tr>
</tbody>
</table>
<p class="c9">
<span style="overflow: hidden; display: inline-block; margin: 0.00px 0.00px; border: 0.00px solid #000000; transform: rotate(0.00rad) translateZ(0px); -webkit-transform: rotate(0.00rad) translateZ(0px); width: 340.23px; height: 148.85px;">
<img src="https://c.eu4.visual.force.com/resource/1494436004000/Encadre_facture" style="width: 340.23px; height: 148.85px; margin-left: 0.00px; margin-top: 0.00px; transform: rotate(0.00rad) translateZ(0px); -webkit-transform: rotate(0.00rad) translateZ(0px);" title="">
</span>
<span style="overflow: hidden; display: inline-block; margin: 0.00px 0.00px; border: 0.00px solid #000000; transform: rotate(0.00rad) translateZ(0px); -webkit-transform: rotate(0.00rad) translateZ(0px); width: 340.23px; height: 148.85px;">
<img src="https://c.eu4.visual.force.com/resource/1494436004000/Encadre_facture" style="width: 340.23px; height: 148.85px; margin-left: 0.00px; margin-top: 0.00px; transform: rotate(0.00rad) translateZ(0px); -webkit-transform: rotate(0.00rad) translateZ(0px);" title="">
</span>
</p>
<p class="c1 c9">
<span class="c6">
</span>
</p>
<p class="c0 c1">
<span class="c2">
</span>
</p>
</body>
  </apex:page>
Thank you so much in advance !
 
SOLVED
4 replies

Word to Visual force to pdf

Hi guys,
I'm trying here to get a PDF from SF page. Therefore, I am creating the page on visualforce. 
I am not a coder so I made the document on Word, saved as HTML and copied the code to my visualforce. 

However, it seems that the writing is not the same as I had to add quotes and end tags like <\meta>. I did all that and in the end, I got the error : element <o:p> not known.

So I tried with Google Sheets to download as HTML and same : I have to close all elements again.

Help! :p

Here is the error : line 6, column 3: The element type "meta" must be terminated by the matching end-tag "</meta>"
Error: The element type "meta" must be terminated by the matching end-tag "</meta>".

Here is my current code : 
<apex:page standardController="Account" renderAs="pdf" applyBodyTag="false">
  <head>
<meta content="text/html; charset=UTF-8" http-equiv="content-type">
<style type="text/css">
@import url('https://themes.googleusercontent.com/fonts/css?kit=fpjTOVmNbO4Lz34iLyptLVumN3ATOVc2BoeDKcwJhFTljiSzuFEcjsip7pjNdcnF');ol{margin:0;padding:0}table td,table th{padding:0}.c13{border-right-style:solid;padding:0pt 5.8pt 0pt 5.8pt;border-bottom-color:#000000;border-top-width:0pt;border-right-width:0pt;border-left-color:#000000;vertical-align:top;border-right-color:#000000;border-left-width:0pt;border-top-style:solid;border-left-style:solid;border-bottom-width:0pt;width:261.4pt;border-top-color:#000000;border-bottom-style:solid}.c12{color:#000000;font-weight:700;text-decoration:none;vertical-align:baseline;font-size:12pt;font-family:"Adobe Fan Heiti Std B";font-style:normal}.c2{color:#000000;font-weight:400;text-decoration:none;vertical-align:baseline;font-size:9pt;font-family:"Calibri";font-style:normal}.c6{color:#000000;font-weight:400;text-decoration:none;vertical-align:baseline;font-size:11pt;font-family:"Calibri";font-style:normal}.c10{color:#000000;font-weight:400;text-decoration:none;vertical-align:baseline;font-size:12pt;font-family:"Calibri";font-style:normal}.c4{padding-top:0pt;padding-bottom:0pt;line-height:1.0;text-align:right;margin-right:-5.5pt}.c9{padding-top:0pt;padding-bottom:0pt;line-height:1.0;text-align:left}.c0{padding-top:0pt;padding-bottom:0pt;line-height:1.0;text-align:justify}.c5{margin-left:-5.8pt;border-spacing:0;border-collapse:collapse;margin-right:auto}.c8{font-size:9pt;color:#1155cc;text-decoration:underline}.c3{background-color:#ffffff;max-width:529pt;padding:28.4pt 40.5pt 70.8pt 42.5pt}.c7{color:inherit;text-decoration:inherit}.c1{height:11pt}.c11{height:134pt}.title{padding-top:24pt;color:#000000;font-weight:700;font-size:36pt;padding-bottom:6pt;font-family:"Calibri";line-height:1.0;page-break-after:avoid;text-align:left}.subtitle{padding-top:18pt;color:#666666;font-size:24pt;padding-bottom:4pt;font-family:"Georgia";line-height:1.0;page-break-after:avoid;font-style:italic;text-align:left}li{color:#000000;font-size:11pt;font-family:"Calibri"}p{margin:0;color:#000000;font-size:11pt;font-family:"Calibri"}h1{padding-top:12pt;color:#2f5496;font-weight:700;font-size:18pt;padding-bottom:0pt;font-family:"Cambria";line-height:1.0;page-break-after:avoid;text-align:left}h2{padding-top:2pt;color:#2f5496;font-weight:700;font-size:13pt;padding-bottom:0pt;font-family:"Calibri";line-height:1.0;page-break-after:avoid;text-align:left}h3{padding-top:14pt;color:#000000;font-weight:700;font-size:14pt;padding-bottom:4pt;font-family:"Calibri";line-height:1.0;page-break-after:avoid;text-align:left}h4{padding-top:12pt;color:#000000;font-weight:700;font-size:12pt;padding-bottom:2pt;font-family:"Calibri";line-height:1.0;page-break-after:avoid;text-align:left}h5{padding-top:11pt;color:#000000;font-weight:700;font-size:11pt;padding-bottom:2pt;font-family:"Calibri";line-height:1.0;page-break-after:avoid;text-align:left}h6{padding-top:10pt;color:#000000;font-weight:700;font-size:10pt;padding-bottom:2pt;font-family:"Calibri";line-height:1.0;page-break-after:avoid;text-align:left}</style>
</head>
<body class="c3">
<p class="c9 c1" id="h.gjdgxs">
<span class="c6">
</span>
</p>
<a id="t.43237f724b83829791a3600f5d7a15de7edeb72b">
</a>
<a id="t.0">
</a>
<table class="c5">
<tbody>
<tr class="c11">
<td class="c13" colspan="1" rowspan="1">
<p class="c0">
<span style="overflow: hidden; display: inline-block; margin: 0.00px 0.00px; border: 0.00px solid #000000; transform: rotate(0.00rad) translateZ(0px); -webkit-transform: rotate(0.00rad) translateZ(0px); width: 211.94px; height: 100.48px;">
<img src="https://c.eu4.visual.force.com/resource/1494428198000/Logo_2017" style="width: 211.94px; height: 100.48px; margin-left: -0.00px; margin-top: -0.00px; transform: rotate(0.00rad) translateZ(0px); -webkit-transform: rotate(0.00rad) translateZ(0px);" title="">
</span>
</p>
<p class="c0">
<span class="c2">
Pleyad Pôle Business - Immeuble Pleyad 2</span>
</p>
<p class="c0">
<span class="c2">47 boulevard Ornano</span>
</p>
<p class="c0">
<span class="c2">93521 Saint Denis – France</span>
</p>
<p class="c0">
<span class="c2">Tel&nbsp;: +33 1 48 20 20 30</span>
</p>
<p class="c0">
<span class="c8">
<a class="c7" href="https://www.google.com/url?q=http://www.neofi-solutions.com&amp;sa=D&amp;ust=1494580227154000&amp;usg=AFQjCNG-79zmNmJ099Yk2AO5_V_zrntviA">www.neofi-solutions.com</a>
</span>
</p>
<p class="c0 c1">
<span class="c2">
</span>
</p>
</td>
<td class="c13" colspan="1" rowspan="1">
<p class="c4 c1">
<span class="c12">
</span>
</p>
<p class="c4 c1">
<span class="c12">
</span>
</p>
<p class="c4">
<span class="c12">FACTURE N°&nbsp;{!order.OrderNumber}</span>
</p>
<p class="c4">
<span class="c10">Date d’émission : {!Now()}</span>
</p>
</td>
</tr>
</tbody>
</table>
<p class="c9">
<span style="overflow: hidden; display: inline-block; margin: 0.00px 0.00px; border: 0.00px solid #000000; transform: rotate(0.00rad) translateZ(0px); -webkit-transform: rotate(0.00rad) translateZ(0px); width: 340.23px; height: 148.85px;">
<img src="https://c.eu4.visual.force.com/resource/1494436004000/Encadre_facture" style="width: 340.23px; height: 148.85px; margin-left: 0.00px; margin-top: 0.00px; transform: rotate(0.00rad) translateZ(0px); -webkit-transform: rotate(0.00rad) translateZ(0px);" title="">
</span>
<span style="overflow: hidden; display: inline-block; margin: 0.00px 0.00px; border: 0.00px solid #000000; transform: rotate(0.00rad) translateZ(0px); -webkit-transform: rotate(0.00rad) translateZ(0px); width: 340.23px; height: 148.85px;">
<img src="https://c.eu4.visual.force.com/resource/1494436004000/Encadre_facture" style="width: 340.23px; height: 148.85px; margin-left: 0.00px; margin-top: 0.00px; transform: rotate(0.00rad) translateZ(0px); -webkit-transform: rotate(0.00rad) translateZ(0px);" title="">
</span>
</p>
<p class="c1 c9">
<span class="c6">
</span>
</p>
<p class="c0 c1">
<span class="c2">
</span>
</p>
</body>
  </apex:page>
Thank you so much in advance !
 
SOLVED
48 replies

History related List using Visualforce

When developing a Visualforce page for overiding view page for any object, one problem that creeps up is to display the History details of a record. The standard related list Component doesn't works for History.

 

With the help of some code from Community ( I now can't find the link to it :( ), I wrote my own code  then to display the history of an object. It mimics the standard list as far as possible.  

 

Heres the code. It is for the Case object but it can be used for any other object.

 1.Component Code

 

<apex:component controller="CaseHistoriesComponentController">
	<!-- Attribute Definition -->
	<apex:attribute name="CaseId" description="Salesforce Id of the Case whose Case History needs to be rendered" type="Id" required="true" assignTo="{!caseId}" />
	
	<!-- Case History Related List -->
	<apex:pageBlock title="Case History">
		<apex:pageBlockTable value="{!histories}" var="History" >
			<apex:column headerValue="Date"  value="{!History.thedate}"/>
	        <apex:column headerValue="User"> <apex:outputLink value="/{!History.userId}"> {!History.who} </apex:outputLink></apex:column>
    	    <apex:column headerValue="Action"><apex:outputText escape="false" value="{!History.action}"/></apex:column>
		</apex:pageBlockTable>
	</apex:pageBlock>
</apex:component>
 
 
 
 
2. Apex Code
 
public class CaseHistoriesComponentController {
	
	public Id caseId {get; set;}
	public cHistories[] histories; 
	
	// Variables
	public Static final Map<String, Schema.SObjectField> CaseFieldmap = Schema.SObjectType.Case.fields.getMap();
	public Static final List<Schema.PicklistEntry> fieldPicklistValues = CaseHistory.Field.getDescribe().getPicklistValues();
	
	public List<cHistories> getHistories()
	{
		list<cHistories> histories = new list<cHistories>();
		String prevDate = '';
		for(CaseHistory cHistory : [Select CreatedDate, CreatedBy.Name, CreatedBy.Id, Field, NewValue, OldValue from CaseHistory where CaseId = :caseId order by CreatedDate desc])
		{
			if((cHistory.newValue == null && cHistory.oldValue == null) 
					|| (cHistory.newValue != null && !(string.valueOf(cHistory.newValue).startsWith('005') || string.valueOf(cHistory.newValue).startsWith('00G')))
					|| (cHistory.oldValue != null && !(string.valueOf(cHistory.oldValue).startsWith('005') || string.valueOf(cHistory.oldValue).startsWith('00G'))))
			{
				cHistories tempHistory = new cHistories();
				// Set the Date and who performed the action
				if(String.valueOf(cHistory.CreatedDate) != prevDate)
				{
					tempHistory.theDate = String.valueOf(cHistory.CreatedDate);
					tempHistory.who = cHistory.CreatedBy.Name;
					tempHistory.userId = cHistory.CreatedBy.Id;
				}
				else
				{
					tempHistory.theDate = '';
					tempHistory.who = '';
					tempHistory.userId = cHistory.CreatedBy.Id;
				}
				prevDate = String.valueOf(cHistory.CreatedDate);
				
				// Get the field label
				String fieldLabel = CaseHistoriesComponentController.returnFieldLabel(String.valueOf(cHistory.Field));
				
				// Set the Action value
	       		if (String.valueOf(cHistory.Field) == 'created') {    // on Creation
	       			tempHistory.action = 'Created.';
	      		}
	      		else if(cHistory.OldValue != null && cHistory.NewValue == null){ // when deleting a value from a field
	      			// Format the Date and if there's an error, catch it and re
	      			try {
	         			tempHistory.action = 'Deleted ' + Date.valueOf(cHistory.OldValue).format() + ' in <b>' + fieldLabel + '</b>.';
	        		} catch (Exception e){
	         			tempHistory.action = 'Deleted ' + String.valueOf(cHistory.OldValue) + ' in <b>' + fieldLabel + '</b>.';
	        		}
	      		}
	      		else{  // all other scenarios
	      			String fromText = '';
	        		if (cHistory.OldValue != null) {
		         		try {
		          			fromText = ' from ' + Date.valueOf(cHistory.OldValue).format();
		         		} catch (Exception e) {
		          			fromText = ' from ' + String.valueOf(cHistory.OldValue);
		         		}
	        		}
	        		
	        		String toText = '';
	        		if (cHistory.OldValue != null) {
		        		try {
				         	toText = Date.valueOf(cHistory.NewValue).format();
				        } catch (Exception e) {
				         	toText = String.valueOf(cHistory.NewValue);
				        }
	        		}
	        		if(toText != '')
	        			tempHistory.action = 'Changed <b>' + fieldLabel + '</b>' + fromText + ' to <b>' + toText + '</b>.';
	        		else
	        			tempHistory.action = 'Changed <b>' + fieldLabel;
	       		}
	       		
	       		// Add to the list
	       		histories.add(tempHistory);
			}
	 	}
	 	
	 	return histories;
	}	
	
	// Function to return Field Label of a Case field given a Field API name
	public Static String returnFieldLabel(String fieldName)
	{
		if(CaseHistoriesComponentController.CaseFieldmap.containsKey(fieldName))
			return CaseHistoriesComponentController.CaseFieldmap.get(fieldName).getDescribe().getLabel();
		else
		{
			for(Schema.PicklistEntry pickList : fieldPicklistValues)
			{
				if(pickList.getValue() == fieldName)
				{
					if(pickList.getLabel() != null)
						return pickList.getLabel();
					else
						return pickList.getValue();
				}
			}
		}
		return '';
	}
	// Inner Class to store the detail of the case histories	
	public class cHistories {

		public String theDate {get; set;}
	    public String who {get; set;}
	    public Id userId {get; set;} 
	    public String action {get; set;}
	}
}
  Let me know your views on the code or if you have any questions
 

                                                                        

                                                                    

                                                                

                                                                
                                                            

                                                        

                                                    

                                                

                                            

                                    

                                

                                

                                    

                                            

                                                

                                                    

                                                        

                                                            

                                                                

                                                                    

                                                                            
                                                                                
SOLVED

                                                                            
                                                                        
                                                                            
33 replies

                                                                        
                                                                    

                                                                    

                                                                        PDF Repeating Header and Footer Support
                                                                    

                                                                    

                                                                        
After a lot of persistence I finally was able to get repeating header and footers when rendering a Visualforce page as a PDF. The key to this is the page2PDF support of CSS3. 
 
Here is the css I came up with:
 
<style type="text/css">
	@page {
		@top-center {
			content: element(header);
		}
	}
	div.header {
		padding: 10px;
		position: running(header);
	}
</style>
 
In the visualforce page I have the header setup as a div with the class name "header" the position running command pulls the content in my div and repeats it at the top of every page. The key for some reason is to put your header and footer divs at the top before you put your content on the page. 
 
Here is my page
 
<apex:page renderAs="pdf">    
	<head>        
		<style type="text/css" media="print">			
			@page { 				
				@top-center {					
					content: element(header);				
				}
				@bottom-left {
 					content: element(footer);
				}			
			}						
 
			div.header {			    
				padding: 10px;			    
				position: running(header);			 
			}			
			div.footer {				
				display: block;				
				padding: 5px;				
				position: running(footer);			
			}						
 
			.pagenumber:before {				
				content: counter(page); 			
			}						
			.pagecount:before {				
				content: counter(pages);  			
			}			        
		</style>            
	</head>    	
 
	<div class="header">		
		<div>My Header Text</div>	
	</div>	
 
	<div class="footer">  		
		<div>Page <span class="pagenumber"/> of <span class="pagecount"/></div>	
	</div>	
 
	<div class="content">		
		<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum nec nulla turpis. Suspendisse eget risus sit amet lectus ornare varius. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Aenean nec urna purus, adipiscing accumsan massa. Nullam in justo nulla, sed placerat mauris. In ut nunc eget libero posuere luctus. Donec vulputate sollicitudin ultrices. Nulla facilisi. Mauris in sapien arcu. Phasellus sit amet quam non mi ornare tincidunt ac quis lectus.</p>
	</div>
</apex:page>
 
I cut the content text short for the purpose of this post. I am sure it will just take some more playing around.
 
Hope this helps someone avoid some late nights like I spent trying to figure this out. :smileyhappy:
 
 
Message Edited by JohnDS on  03-10-2010 07:34 PM