+ Start a Discussion

Calling VF page from an inline page

Hey all,
I have a VF page that I have included in the page layout of my opportunity. In this page I have a command button which I want to use to bring the user to another VF page. However, when I click this button it automatically adds "inline=1" to the url of the second VF page! This has the outcome of displaying this second page without the tabs or sidebar.
Is there a way of stopping this addition of the inline property?
Can you post your page and controller? There are a number of ways to solve this (redirect in your action method, don't even use an action method at all, etc) and I need to see a bit more about your specific case to be able to suggest the best one.

For brevitys sake I'll just post the code pieces that I'm talking about:

Link in the VF "inline" page:
<apex:commandLink value="Edit IO" action="{!goToEdit}"/>
Method in class:
public PageReference goToEdit(){
  PageReference pageRef = Page.IOManagement;
  return pageRef;

 By using this the page that is returned is without tabs or side bar. Again this seems to be due to the fact that it automatically appends "&inline=1" to the end of the url.

My workaround is this:

<input type="submit" class="btn" value="Edit IO" onclick="top.location.href = '/apex/IOManagement?id={!baseOpp.Id}';"/>

 which is fine, but will allow me to delete the IOManagement page, whereas the first code would prevent this.


We can simplify this and maintain the metadata integegrity checks you mentioned. Do you want to have a link or a button in your UI? Working from your original example with the link I would:

- switch from apex:commandLink to apex:outputLink, using an action method (requires a server round trip) to simple handle navigation is overkill
- leverage a new feature in Summer '08 $Page in your markup - this works like the Page collection in apex code but can be used directly inside a page formula expression.

<apex:outputLink value="{!urlFor($Page.IOManagement, null, [id = baseOp.id])}">Edit IO</apex:outputLink>

this will generate a simple link that will be both the most effecient approach and also correct the specific issue you're trying to solve.


That code actually gives me an interesting error. Because my page is inline I've declared the standard controller with the extensions set to my custom controller like so:

<apex:page standardController="Opportunity" extensions="IOInlineController" >

when I use this line there is no problem access the baseOpp variable:

<input type="submit" class="btn" value="Edit IO" onclick="top.location.href = '/apex/IOManagement—id={!baseOpp.Id}';"/>

However using your line of code I get the following error in Eclipse:

Save error: Unknown property 'OpportunityStandardController.baseOp'

It seems not to look in my extension controller anymore for the variable. Do I need to put something in front of the baseOpp.Id to indicate it should specifically look in the custom controller class?


You should not need to do anything special to reference a property from an extension but I can't see the context so its hard to tell what is going on - can you post the entire page/controller?

Apologies Doug, was just the spelling of baseOpp that was the issue there, variable visibility wasn't an issue.

So I got your code to work, however it displays the edit VF page within the frame that the button was diplayed in (which is just a section within the opportunity page layout).

The premise is to try to get an inline VF page to correctly call a "stand alone" VF page, with tabs and side bar.

My workaround involves using top.location.href because I need the entire page to be replaced with my edit VF page.

No worries - with a minor tweak to what I posted you can also correct the unframing side of things - no javascript required - just by using the <apex:outputLink target> attribute:

<apex:outputLink value="{!urlFor($Page.IOManagement, null, [id = baseOp.id])}" 
target="_top">Edit IO</apex:outputLink>

Its not really a workaround but a requirement unrelated to visualforce - this is the way links work inside of an iframe which is the container that we have to put inline pages into to insure that they do not produce DOM id collisions or otherwise interact in a negative way with the containing page/layout.

I am having a similar issue but I'm using a commandButton.  I have a visual force page embeded in my opportunity layout with command buttons across the top of it like a normal related list.  When i click the buttons in my IE7 and Firefox 3 the entire browser window loads the pages for the buttons clicked.  Other people are telling me though that the pages are only loading in the visual force iframe so they can't see everything.  Is there anything I can do for the command buttons to make sure the full window loads the page the $Action relates to?

Also, is there anything I can do so the buttons load the button action correctly when in Console mode where sidebars and headers aren't wanted.

<apex:page standardController="Opportunity" tabStyle="Opportunity" showHeader="false" sidebar="false" extensions="OpportunityProductsWithPackagesCon">
    <apex:form >
        <apex:pageBlock id="pbOLI" title="Products">
            <apex:pageBlockButtons location="top" >
                <apex:commandButton action="{!URLFOR($Action.OpportunityLineItem.AddProduct, Id)}" value="Add Product" />
                <apex:commandButton action="{!URLFOR($Action.OpportunityLineItem.EditAllProduct, Id)}" value="Edit All" />
                <apex:commandButton action="{!URLFOR($Action.OpportunityLineItem.ChoosePriceBook, Id)}" value="Choose Price Book" />
                <apex:commandButton action="{!URLFOR($Action.OpportunityLineItem.Sort, Id)}" value="Sort" />
                <apex:commandButton action="{!URLFOR($Action.OpportunityLineItem.Add_Design_Prod, Id)}" value="Add Design Prod" />
                <apex:commandButton action="{!URLFOR($Action.OpportunityLineItem.Add_Res_Prod, Id)}" value="Add Res Pod" />
                <apex:commandButton action="{!URLFOR($Action.OpportunityLineItem.Add_Mktg_Prod, Id)}" value="Add Mktg Prod" />
                <apex:commandButton action="{!URLFOR($Action.OpportunityLineItem.Add_Host_Prod, Id)}" value="Add Host Prod" />
            <apex:pageBlocktable id="pbtOLI" value="{!olis}" var="oli">
                <apex:column headerValue="Action">
                  <b><apex:outputLink value="{!URLFOR($Action.OpportunityLineItem.Edit, oli.Id)}">Edit</apex:outputLink></b>
                  <b><apex:outputLink value="{!URLFOR($Action.OpportunityLineItem.Delete, oli.Id)}">Del</apex:outputLink></b>
                <apex:column headerValue="Product">
                    {!IF(oli.Parent_Product__c != null, '- ', '')}<apex:outputLink value="{!URLFOR( $Action.Product2.View , oli.PricebookEntry.Product2Id)}">{!oli.PricebookEntry.Name}</apex:outputLink>
                <apex:column headerValue="Product Code">
                    <apex:outputLink value="{!URLFOR( $Action.Product2.View , oli.PricebookEntry.Product2Id)}">{!oli.PricebookEntry.ProductCode}</apex:outputLink>
                <apex:column headerValue="Quantity"  value="{!oli.Quantity}"/>
                <apex:column headerValue="Discount Amt."  value="{!oli.Discount_Amt__c}"/>
                <apex:column headerValue="Discount %"  value="{!oli.Discount__c}"/>
                <apex:column headerValue="Monthly"  value="{!oli.Total_Monthly__c}"/>
                <apex:column headerValue="One Time"  value="{!oli.OneTime__c}"/>
                <!--<apex:column headerValue="Schedule"  value="{!oli.HasRevenueSchedule}"/>-->
                <apex:column headerValue="Billed"  value="{!oli.Billed__c}"/>
                <apex:column headerValue="Billed Date"  value="{!oli.Billed_Date__c}"/>         
    <script type="text/javascript">
        function resizeIframe() {
        var me = window.name;
        if (me) {
        var iframes = parent.document.getElementsByName(me);
        if (iframes && iframes.length == 1) {
        var height = document.body.scrollHeight;
        iframes[0].style.height = height +  "px";



If you want to show a button instead of a link in similar inline VF scenario, is the best practice to use outputLink tag as well? something like this:


<apex:outputLink value="{!urlFor($Page.IOManagement, null, [id = baseOp.id])}" target="_top" styleClass="btn">Edit IO</apex:outputLink>

 The text in button is undelined, amyway to get rid of it?