Tuesday, July 19, 2011

Header Footer Image on Visualforce Page

Hi...
We have kind of approach for header and footer on Visualforce page..

1. Using style sheet
Just create the style sheet..

<apex:page controller="Quotations" standardStylesheets="false" sidebar="false" renderAs="pdf" showHeader="false">
<html>
<head>
<style type="text/css">
@page
{
size:8.50in 14.00in;
margin-top: 1.00cm;
margin-bottom: 0.00cm;
@top-right
{
width:160px;
background-image:url({!HeaderImgUrl}
content: "Reference No : {!PrimaryContactEMail} Date:   <apex:outputText value="{0,date,dd-MMMM-yyyy}"><apex:param value="{!NOW()}" /></apex:outputText>";
a:after {content: " (" test ")";}
background-position:right;
vertical-align:bottom;
background-repeat: no-repeat;
}

@bottom-left
{
width:150px;
background-image:url({!FooterImgUrl}
content:"Your Dealing Manager is : {!DealingUserName}, e-mail : {!DealingUseremail}, Mobile : +91 {!DealingUserMobile}";
background-position:right;
vertical-align:top;
background-repeat: no-repeat;
font-size: 10pt; font-family: Calibri,sans-serif;
 }
}

</apexPage>


Class Code :
==========
Attachment[]  Att = [select Id,Name from Attachment where ParentId=:Le.id And (Not Name LIKE'%.pdf%')];
for(Attachment A :Att){
                if(A.Name =='HeaderPI.JPG')
                {
                   HeaderImgUrl   = '/servlet/servlet.FileDownload?file='+A.Id;  
                }
                else if(A.Name =='FooterPI.JPG')
                {
                    FooterImgUrl    = '/servlet/servlet.FileDownload?file='+A.Id;
                }
            }

Secondly We have Visualforce Tag for Header And Footer.

1. First Create a visualforce which define where you want to put the header and body...
<apex:page >
    <apex:image url="{!$Resource.TickMark}"/><br/>
    <apex:insert name="header"/><br/>   
    <apex:insert name="body"/><br/>
    <apex:image url="{!$Resource.TickMark}"/><br/>
</apex:page>
2. Now use this page in next visualforce page.
<apex:page >
    <apex:composition template="Composition">  
        <apex:define name="header">(page) This is the header of mypage</apex:define>
        <apex:define name="body">(page) This is the body of mypage<br/></apex:define>              
    </apex:composition>

</apex:page>
Thanks...

2 comments:

  1. what is parent id over here? I didnt get this stmt ParentId=:Le.id

    ReplyDelete