Blend a table within the environment using VisualForce

Scenario:
Within a PDF create a table that would blend into the environment off the data QuoteLineItem. The borders and colors should be the same style as the Quote Tab.

What is needed for this assignment:

1. Developer Account if you do not already have one.
2. Apex Controller write a simple one that gets all account or just one account.
   
3. Login into your org, go to Setup | Develop | Pages
4. Click New, Enter in Label and Name. Note** the Name column may not have a space in between and will not prefill after the label column. You will get an error such as:

Error: The page name can only contain alphanumeric characters, must begin with a letter,
and must be unique.

Understand Tags and Build out:

TabStyle
Using this tag will get you the colors of the Quote Tab. Plus it
will open up the VisualForce Page in the Quote Tab.
Now if the tabstyle was set to Account then it will inherit the
colors and open up under the Account tab.

Facts about TabStyle:
1. "the tabStyle attribute of an tag allows you to mimic
the look and feel of the associated Salesforce page"..
From Force.com Online tutorial guide

2. The tabstyle is always equal to the object API Name.

3. It is a String within the <apex:page> tag.


We will add to the first tag, the tabstyle reference.

Within the <apex:Page> tag place in tabStyle="ObjectName"

**Note: Object Name can be a Standard Object or a Custom Object
Make sure if a Custom Object to use the API Object Name
"XXXX__c".

<apex:page tabStyle="SFDC_520_Quote__c">
and click save.
To view this page go to the URL and at the of the last
slash after your
instance URL. type in /apex/tabtest




RenderAs="PDF"
Since the Scenario asked for PDF Page. Then within the
<apex:Page tag place in renderAs="PDF"

This would convert the page as a PDF.
So tag should look like so:

<apex:page tabStyle="SFDC_520_Quote__c" renderAs="PDF">

Remeber to always close your Tags
So to close the <apex:page> tag, at the end of the code place in
</apex:page>

PageBlock and PageBlockSection
These two tags go hand in hand. The main tag(PageBlock)
is the one that encompasses many tags within it. The
PageBlock tag gives it that border with the same color
as your tabstyle. Now PageBlockSection gives it the
header shaded in the same color as the style.

So lets do it:
the second line should read as follows:

Use pageBlock Tag Line #2
<apex:pageblock></apex:pageblock>

This will get you the upper border, right side border
and bottom border.

As you can see the green borders
are created from the pageblock tag.
Now to add the PageBlockSection. This would give as our
Header or Title.Underneath the pageBlock line and within
the closing pageblock tag place in the following:

<apex:pageBlockSection title="Congrats">

</apex:pageblockSection>
See Below:

As you can see the header now in green.

Your code should look like this now:

<apex:page tabStyle="SFDC_520_Quote__c">

<apex:pageBlock>
<apex:pageBlockSection title="Congrats Header"
collapsible="false" columns="1">

</apex:pageBlockSection>

</apex:pageBlock>

</apex:page>

Notice:
***collapsible within the tag is used to open or close the
header information below it. I set it to false because
I would like the user to see the information at all
times and never have to hide it.

Create The Table:

We will utilize pageblockTable ... This blends into
the environment.
Let me post the code up and then explain the tags:

<apex:page
tabStyle="SFDC_520_Quote__c">

<apex:pageBlock>

<apex:pageBlockSection
title="Congrats Header"
collapsible="false"
columns="1">

<apex:pageBlockTable
value="{!SFDC_520_Quote__c.quote_lines__r}"
var="item" border="1"
cellspacing="0"
cellpadding="0">

<apex:column headerValue="Item #">
{!item.name}
</apex:column>

<apex:column headerValue="SKU">
{!item.Product2__r.ProductCode}
</apex:column>

<apex:column headerValue="Description">
{!item.Product2__r.Name}
</apex:column>

<apex:column headerValue="Qty">
<apex:outputField value="{!item.Qty_Ordered__c}"/>
</apex:column>

</apex:pageBlockTable>

</apex:pageBlockSection>

</apex:pageBlock>

</apex:page>
Alright, now for an explanation:

• We using the child object QuoteLineItems related to Quotes.

• Utilizing the child object for information on line items.

• We set the variable to be item.

• We gave the table a border = 1, higher you go the
  thicker the border.

• We now need an Apex Controller to place in the items we need.

Good Reference Materials:

• VisualForce Material from Force.com
• The Developer Forum Board for VisualForce
• Force.com Other Blogs
•  
• Thanks
  Check out my Other Salesforce.com Blogs
  Salesforce Made Easy
  
  Salesforce Data Migration Made Easy
  eTechCareers.com Coming Soon