Tuesday, December 15, 2009

Adding a Visualforce Page to the Home Page Layout

Step 1:

Create a Visualforce Page. We create a simple static table with some styles to give an appealing look..

Name the Page as "homelogo"
<apex:page showheader="false" >
<style>
table.fancy {
margin: 1em 1em 1em 0;
background: whitesmoke;
border-collapse: collapse;
}
table.fancy tr:hover {
background: lightsteelblue !important;
}
table.fancy th, table.fancy td {
border: 1px silver solid;
padding: 0.2em;
}
table.fancy th {
background: gainsboro;
text-align: left;
}
table.fancy caption {
margin-left: inherit;
margin-right: inherit;
}
</style>
<table class="fancy">
<tr>
<th>Key</th><th>Value</th>
</tr>
<tr>
<td>ACT</td><td>Australian Capital Territory</td>
</tr>
<tr>
<td>NSW</td><td>New South Wales</td>
</tr>
<tr>
<td>NT</td><td>Northern Territory</td>
</tr>
<tr>
<td>QLD</td><td>Queensland</td>
</tr>
<tr>
<td>SA</td><td>South Australia</td>
</tr>
<tr>
<td>TAS</td><td>Tasmania</td>
</tr>
<tr>
<td>VIC</td><td>Victoria</td>
</tr>
<tr>
<td>WA</td><td>Western Australia</td>
</tr>
</table>

</apex:page>


Step 2:

Create a new HomePage component.



Step 3:

Give a name for your component and select"HTML Area" option.



Step 4:

Check the "Show HTML" option in the rightmost corner.



Step 5:

Type the following code in the editor window

<br><iframe src="/apex/homelogo?core.apexpages.devmode.url=1" width="50%" height="100%"></iframe></br>




Step 6:

Add the component you just now created to your Home Page Layout. And Done!!!

Here's a snapshot of the HomePage..