Oh my god. It's full of code!

Automatic Resize of Embedded/Inline Visualforce pages

I’m pretty sure at one time or another, most of us developers have made a sweet inline visualforce page that lives on the object detail page. Problem is since it’s all dynamic and cool we don’t know how ‘tall’ the content might end up being. We are basically stuck with having to guess at a decent height for the VF page and enable scrollbars, which kind of blows. Well not anymore (some exceptions apply)! Expanding on my previous post about using HTML5 postmessaging to move data between embedded visualforce pages and the standard salesforce domain I’ve come up with a first release of a ‘framework’ of sorts (term used very liberally). First an example. Lets check out what I’m talking about using my wordcloud app to demonstrate.

BEFORE

Scrollbars are Sad

 

AFTER
Woot woot no scrolling :D

So how did I accomplish this? The trick, as you may be able to guess by now is the HTML5 PostMessaging feature that I wrote about. By enabling communication between the frame (the visualforce page) and the parent (the detail page) it’s fairly simple to have the frame report it’s size to the parent, and have the parent adjust the height of the frame accordingly. Of course that isn’t everything my framework can do, oh no. It allows for passing of arbitrary commands/data between the two, so you can extend the functionality to pass any kind of commands/dom manipulations you might want between them. Of course the caveat is that this only works on newer browsers since postMessaging is fairly new. Also you’ll need to enable the sidebar on all pages, since that is where the proxy component lives. If you want to play with this install my alpha package from

https://login.salesforce.com/packaging/installPackage.apexp?p0=04ti0000000TY0J

Then include the home page component in the narrow/sidebar and enable the sidebar for all pages (setup->user interface->Show Custom Sidebar Components on All Pages). After that you just include these two components on any page you want to resize itself when embedded. The first component is the core piece that talks to the home page component. The second one is just some code that utilizes that framework to cause the iframe to resize. I’d put them at the bottom of your visualforce page.

<c:vfProxy />

<c:vfProxy_autoHeight />

I’m planning on possibly adding more ‘plugins’ for my framework to do other common handy things so if you have any ideas for potential plugins let me know.

12 responses

  1. Chirag Mehta

    Always been looking for this and tried few things but none worked 100%. Thanks for this plugin. Ps: Install link is hardly visible due to site color and link color being same,

    April 26, 2014 at 1:59 pm

    • Glad to hear it worked for ya! Let me know if you have questions or suggestions 🙂

      May 4, 2014 at 7:50 pm

      • n8

        Hi kenji,
        First, let me say, you’re a rock star! This is very nearly perfect for my needs. The only think I would like to have control of is the max height of the inline vf page. In my inline vf, I’m showing a collection of related records, each record containing content from a rich-text field. In most of these records, the rich-text field contains screen captures, so the inline vf will almost always end up getting pretty long.

        Can I set a max height in the component, or, better yet, tell the component to obey the specified height set in the page layout section where the inline vf resides? I want my max height to be 400px.

        Thanks for your help!

        November 6, 2014 at 1:46 pm

  2. Hi there to every one, for the reason that I
    am actually keen of reading this website’s post to be updated daily.
    It contains pleasant information.

    October 16, 2014 at 6:15 pm

  3. pranay

    Hi , I have installed and apply setting as ask for in blog but its not working with my visual force page in salesforce1 app. can any one give example of visualpage code ?

    December 20, 2014 at 6:33 pm

    • Alas, this trick no longer works. Salesforce broke it by removing the ability to run custom javascript in the root domain in the sidebar.

      December 20, 2014 at 9:29 pm

  4. pranay

    so it will not work anymore..?? and is there any other suggestion to achieve this ??

    December 21, 2014 at 6:00 am

  5. Vishant

    This works for me 🙂 , even after spring 15 release. It does not work on the Case layout though as there is no side bar.. any ideas on this?

    February 26, 2015 at 9:42 am

  6. C Lance

    If you try to edit your home page component it should warn you that it will stop working come Summer 15.

    March 4, 2015 at 7:58 pm

    • This is true. Alas, the solution is dead. It was fun while it lasted.

      April 21, 2015 at 9:57 pm

  7. Really. It was a nice solution but now it is not working. Seems like after winter 16 release cross site scripting not working.

    November 5, 2015 at 6:21 am

  8. Anonymous

    That’s awesome…

    Pasting the link here, which got mixed in the above article

    https://login.salesforce.com/packaging/installPackage.apexp?p0=04ti0000000TY0J

    January 18, 2016 at 2:09 pm

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s