Adding a Visualforce Page to the Home Page Layout

1:51 AM

Update: Specify the height and width for the iframe in pixels, as % does not work.

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="500px" height="600px"></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..

Share This Story

Tags: ,

13 comments

  1. DavidDecember 30, 2009 at 1:38 AM

    I noticed that you set the iframe height to 100%, yet there are scroll bars on the VF component. Is there any way around this?

    ReplyDelete
  2. BrettJanuary 25, 2011 at 11:51 AM

    I had to use px instead of % to get it to display

    ReplyDelete
  3. ShubhamMarch 30, 2011 at 11:28 PM

    Using iframe our visualforce page will appear either on wide side or on narrow side.
    I want visualforce page to cover 100% of my screen. Please help doing that

    ReplyDelete
  4. EdwinDecember 12, 2011 at 10:25 PM

    A width and height of 100% does not seem to work. You will have to give your width and height in px i believe

    ReplyDelete
  5. AnonymousMarch 13, 2012 at 7:43 AM

    Informative

    ReplyDelete
  6. AnonymousMarch 21, 2012 at 12:23 PM

    nice

    ReplyDelete
  7. AnonymousJune 3, 2014 at 11:48 PM

    I have VF page named "My_Quote_of_the_day" but when i put the url like this

    src="apex/My_Quote_of_the_day"

    it shows like this

    http://picpaste.com/Screenshot-WHZHEFaW.jpg

    ReplyDelete
    Replies
    1. Edwin RaymondJune 5, 2014 at 10:16 PM

      In your page you will need to add this apex:page showheader="false" sidebar="false"

      Delete
  8. Edwin RaymondJune 5, 2014 at 10:14 PM

    This comment has been removed by the author.

    ReplyDelete
  9. AnonymousJune 9, 2014 at 7:05 AM

    How to adjust the ifram height dynamically based on the content.

    ReplyDelete
  10. AnonymousJune 9, 2014 at 7:07 AM

    How to adjust the ifram height dynamically based on the content.

    ReplyDelete
  11. AnonymousJune 16, 2014 at 11:59 PM

    Try this link to set the iFrame height/width dynamically:

    http://stackoverflow.com/questions/819416/adjust-width-height-of-iframe-to-fit-with-content-in-it

    ReplyDelete
  12. UnknownJanuary 16, 2016 at 4:38 AM

    Great blog for newbies!!! Thanks for your effort :)
    Since summer 15, iframes are not supported in Home Page Layouts..
    Please update/remove this content.. as few might confuse.

    ReplyDelete