Visualforce missing as option on Page Include component

  • 1
  • Question
  • Updated 2 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,664 Points 1k badge 2x thumb

Posted 5 years ago

  • 1
Photo of John Nelson

John Nelson, Product Manager

  • 3,234 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

  • 2,744 Points 2k 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 JD Bell

JD Bell, Senior Product Engineer

  • 2,996 Points 2k 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,006 Points 20k badge 2x thumb
Thanks Dave. 
Photo of Stephen Chilcoat

Stephen Chilcoat

  • 732 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,328 Points 4k badge 2x thumb
Thanks for the "100%" tip!