Visualforce missing as option on Page Include component

  • 1
  • Question
  • Updated 3 years ago
  • Answered
Why is Visualforce missing as an option under the Page Include component on one of my Skuid pages?

Photo of Peter Herzog

Peter Herzog

  • 1,704 Points 1k badge 2x thumb

Posted 6 years ago

  • 1
Photo of John Nelson

John Nelson, Product Manager

  • 3,356 Points 3k badge 2x thumb
Hey Peter.

This feature was rolled back as part of the Spring 14 release. The primary reason is that inserting visualforce pages into skuid pages opens up all sorts of issues where Javscript can conflict and the page actions returned by the VF page's controller can take over the entire page. 

We recommended you use a template component with an iframe to pull in your VF pages, as it allows execution of the page's JS to occur in its own private context. If needed, you can always bubble up JS events/functions via window.parent. 



Sorry for the confusion! 
Photo of Kaede Holland

Kaede Holland

  • 3,016 Points 3k badge 2x thumb
Hey - I am so close but so far. 

What am I doing wrong here? How do i get the little component to show up instead of pulling in an entire page?



Here is the start of the visualforce I am trying to pull in:

<pre><code>

<apex:page sidebar="false" extensions="HubSpot_Inc.HubSpotController" standardController="Lead">
  <apex:stylesheet value="{!$Resource.HubSpot_Inc__hubspotcss}"/>
  <apex:stylesheet value="https://static.hubspot.com/final/css/common/button.css"/>

    <div class="hs-iframe-page">
        <apex:outputPanel rendered="{!hsIntelExists==false}">
          <div class="hsheader">
              <img src="https://static.hubspot.com/final/img/ui_toolkit/asears/hubspot.png" height="20" width="53" />
          </div>
          <h2>No HubSpot Data on file.</h2>
        </apex:outputPanel>
    
        <apex:repeat value="{!hsIntels}" var="hsIntel">
          
          <apex:outputPanel rendered="{!hideIframeIntels[hsIntel.HubSpot_Inc__Portal_ID__c] != 'true'}">
            <apex:iframe height="200px" width="100%" src="{!hsIntel.HubSpot_Inc__HubSpot_Detail__c}embed/" />
          </apex:outputPanel>
          
          <apex:outputPanel rendered="{!hideIframeIntels[hsIntel.HubSpot_Inc__Portal_ID__c] == 'true'}">
	          <div class="hsheader">
	              <img src="https://static.hubspot.com/final/img/ui_toolkit/asears/hubspot.png" height="20" width="53" />
	              <apex:outputPanel >
	                  <div class="hsIntelColumn" style="float:right;">
	                      <div class="hsdmz">
	                          <a class="btn small submit" href="{!hsIntel.hubspot_detail__c}" target="_blank" style="border:0;background-color:#444;">
	                              <span class="corner left"></span>
	                              <span class="nested">
	                              View Lead in HubSpot</span>
	                              <span class="arrow next"></span>
	                              <span class="nested ie7_spacer"></span>
	                              <span class="corner right"></span>
	                          </a>
	                      </div>
	                  </div>
	              </apex:outputPanel>
	          </div>
	          <div class="hsbody">
	              <div class="hsIntelColumn" style="max-height:180px;overflow:auto;">
	                  <h2>Visit Information</h2>
	                  <table>
	                  <tr class="hsitem">
	                      <td class="hslabel"><label>Found Site Via</label></td>
	                      <td class="hsdata"><span>{!foundSiteViaMap[hsIntel.portal_id__c]}</span></td>
	                  </tr>           
	                  <tr class="hsitem">
	                      <td class="hslabel"><label>First Visit</label></td>
	                      <td class="hsdata"><span>{!earliestVisitMap[hsIntel.portal_id__c]}</span></td>
	                  </tr>
	                  <tr class="hsitem">
	                      <td class="hslabel"><label>Recent Visit</label></td>
	                      <td class="hsdata"><span>{!latestVisitMap[hsIntel.portal_id__c]}</span></td>
	                  </tr>
	                  <tr class="hsitem">
	                      <td class="hslabel"><label># of Visits</label></td>
	                      <td class="hsdata"><span>{!totalVisitsMap[hsIntel.portal_id__c]}</span></td> 
                   </tr>
</code></pre>
(Edited)
Photo of John Nelson

John Nelson, Product Manager

  • 3,356 Points 3k badge 2x thumb
Hey Kaede, you need to add the "showHeader" attribute to your VF page like this:
<apex:page sidebar="false" showHeader="false" extensions="HubSpot_Inc.HubSpotController" standardController="Lead">
Photo of Kaede Holland

Kaede Holland

  • 3,016 Points 3k badge 2x thumb
What if it is part of a managed package?
Photo of Jason Hardy

Jason Hardy

  • 240 Points 100 badge 2x thumb
You can copy the managed page and use the new version with the appropriate option.
Photo of Kaede Holland

Kaede Holland

  • 3,016 Points 3k badge 2x thumb
Since it is a managed package, I am unable to access to necessary class. 

I get the following error: Error: The installed managed class HubSpot_Inc.HubSpotController is not visible


Photo of Jason Hardy

Jason Hardy

  • 240 Points 100 badge 2x thumb
It's been a while since I've done this, but I remember you have to do something with the namespace. Try dropping the namespace (HubSpot_Inc.) and seeing if it works for you like that.
Photo of John Nelson

John Nelson, Product Manager

  • 3,356 Points 3k badge 2x thumb
Yeah, Kaede, the fact that it's part of a managed package makes it tougher. Unfortunately you're not going to be able to specify whether or not to show the page's header because of that, and the iframe is going to render the page as it's built. Lame, I know.

We are bouncing around a few alternatives to the vf page include that could possibly be added as part of the next release. 
Photo of Rob Hatch

Rob Hatch, Official Rep

  • 44,828 Points 20k badge 2x thumb
We were able to fix this for a customer today.  Even thought this post is 5 months old,  it seemed appropriate to go back and update this. 

You can still use the mangaged package VF page but tweak the iFrame code that you put in the template component in skuid.  It should look like this: 

<iframe src="/apex/<<VFPageName>>?Id={{{Id}}}&isdtp=vw" width="100%" height="600px" frameborder="0"/>

1.  Of course replace <<VFPageName>> with your namespace__pagename__c combination. 

2  Then tweak the query string by adding this parameter:  &isdtp=vw     Apparently this turns off header and sidebar in the VF page.   

Early results are encouraging. 
Photo of JD Bell

JD Bell, Senior Product Engineer

  • 3,226 Points 3k badge 2x thumb
Be aware, though, that the isdtp feature is not officially supported outside the service console and can cause other problems (for example, "the isdtp parameter will break any and all apex:outputLink elements on a visualforce page with the apex:page showHeader parameter set to false"). It does seem to work most of the time and I know that a lot of developers use this parameter, but it's something you'll want to keep an eye on in case Salesforce drops support for it without warning.
(Edited)
Photo of Dave Zadareky

Dave Zadareky

  • 272 Points 250 badge 2x thumb
If anyone is trying to do this with Person Accounts. This is how we made it work
 <iframe src="/apex/HubSpot_Inc__HubSpotContactIntelligence?Id={{{{PersonContactId}}}}&isdtp=vw" width="100%" height="300px" frameborder="0"/>
Photo of Rob Hatch

Rob Hatch, Official Rep

  • 44,828 Points 20k badge 2x thumb
Thanks Dave. 
Photo of Stephen Chilcoat

Stephen Chilcoat

  • 764 Points 500 badge 2x thumb
I am also trying to include a third party visualforce page in my SKUID lead detail page.  I tried both of the above iFrame code suggestions and can't get either to work.  I get a greyed-out box with the message "Unable to resolve the server's DNS address".  Any ideas?
Photo of Shmuel Kamensky

Shmuel Kamensky, Champion

  • 4,700 Points 4k badge 2x thumb
Thanks for the "100%" tip!