How to view a visualforce page on a Skuid detail page

  • 3
  • Question
  • Updated 3 years ago
  • Answered
  • (Edited)
I have created my Skuid detail page for opportunities and I am needing to include a third party app called Cirrus Files. It comes as a visualforce page but for the life of me I cannot figure out how to include it on the skuid detail page. I have pasted the visualforce page info for the app below. Any help would be much appreciated!

<apex:page standardController="Opportunity" tabStyle="Opportunity" cache="false">
    <c:GDrive recordType="Opportunity" recordId="{!opportunity.Id}"/>
</apex:page>
Photo of Nic Austin

Nic Austin

  • 120 Points 100 badge 2x thumb

Posted 4 years ago

  • 3
Photo of mB Pat Vachon

mB Pat Vachon, Champion

  • 42,714 Points 20k badge 2x thumb
I think....

Add a template field where you'd like the Cirrus Files page. Set the template to allow HTML. Put the URL for this page in an iframe element.

Not sure how to tweak the apex page to accept a URL parameter though. You'll have to tweak the apex page to take the ID this way.

Never tried this but I hope it's easy to do.
Photo of mB Pat Vachon

mB Pat Vachon, Champion

  • 42,714 Points 20k badge 2x thumb
Found this.
{!$CurrentPage.parameters.Paramtervalue}
(Edited)
Photo of Nic Austin

Nic Austin

  • 120 Points 100 badge 2x thumb
So Im guessing the visualforce mark ups would then look like this instead?

<apex:page standardController="Opportunity" tabStyle="Opportunity" cache="false">
    <c:GDrive recordType="Opportunity" recordId="{!$CurrentPage.parameters.Paramtervalue}"/>
</apex:page>
Photo of mB Pat Vachon

mB Pat Vachon, Champion

  • 42,714 Points 20k badge 2x thumb
Where parameter value is whatever you've in the URL. Ie. OppID
Photo of mB Pat Vachon

mB Pat Vachon, Champion

  • 42,714 Points 20k badge 2x thumb
Hehehe. . Dunno really. Google searches mostly. Lemeno though. I'll have to do the same as I've also got Cirrus Files.
Photo of Nic Austin

Nic Austin

  • 120 Points 100 badge 2x thumb
Yeah I dont think route is going to work. You cannot edit the cirrus component visualforce page. I'll have to think of another route. Ill let you know what I find.
Photo of Moshe Karmel

Moshe Karmel, Champion

  • 8,646 Points 5k badge 2x thumb
Preview the VF page and see what the URL looks like, then take the part that starts with "/apex" until the end of the URL, for example "/apex/SpringCM_Opportunity". Then add an ID parameter to the URL like "?id=". Then drag a template field into your skuid page that is on the Opportunity model, and enter the following...
<iframe src="/apex/YOURURL?id={{{Id}}}&isdtp=mn" width="70%" height="800px" frameborder="false"></iframe>
Photo of mB Pat Vachon

mB Pat Vachon, Champion

  • 42,704 Points 20k badge 2x thumb
Does that work? The opp id is needed in the apex page.
Photo of Moshe Karmel

Moshe Karmel, Champion

  • 8,646 Points 5k badge 2x thumb
I believe the apex class gets the Id from the URL so this should work.
Photo of Nic Austin

Nic Austin

  • 120 Points 100 badge 2x thumb
Dang, it almost works perfectly but when I use the {{Id}} it is giving me a message in the iframe that the "Id value is not valid for the Opportunity standard controller" but when I take out the {{Id}} and just place the actual Id of the opportunity I am looking at, then it works. I know I must be getting close. 
Photo of Moshe Karmel

Moshe Karmel, Champion

  • 8,646 Points 5k badge 2x thumb
Try using three curly braces {{{Id}}} instead of two {{Id}}. Also see if it helps to add on the beginning of the URL. Or try "&id=" instead of "?id=". Or try unchecking  "Do not run template on each row". I was debugging this today :) .
Photo of Rob Hatch

Rob Hatch, Official Rep

  • 44,006 Points 20k badge 2x thumb
Nick - that error message most likely means you have the template component tied to a model that doesn't have opportunities in it.   A nice hack for your troubleshooting is to put the merge fields you are trying to pass as URL parameters outslde the HTML code in your template.  In this case it might be: 
ID = {{{Id}}}
<iframe src="/apex/YOURURL?id={{{Id}}}&isdtp=mn" width="70%" height="800px" frameborder="false"></iframe>

This way you can make sure your data merges are good before you go on to make sure your VF code is good. 
Photo of mB Pat Vachon

mB Pat Vachon, Champion

  • 42,714 Points 20k badge 2x thumb
If that doesn't work, make your own page using the Cirrus page as a template.
Photo of mB Pat Vachon

mB Pat Vachon, Champion

  • 42,714 Points 20k badge 2x thumb
K. Well. Learned a thing or two about putting cirrus into a template.

I think that you must the entire URL as there is a namespace prefix for the visualforce page. Basically means that the default site URL would not work as it is missing the namespace prefix. ie. IGD.na17.visual.force.com


The second thing is that header and footer shows up in the template. Anyway to force the page not to do this?

Photo of Moshe Karmel

Moshe Karmel, Champion

  • 8,646 Points 5k badge 2x thumb
Check this out : http://www.ca-peterson.com/2011/11/magic-isdtp-param.html. There is a (officially unsupported) parameter you can add to the end of your URL: "&isdtp=mn" which will make the header and sidebar disappear!
Photo of mB Pat Vachon

mB Pat Vachon, Champion

  • 42,714 Points 20k badge 2x thumb
Woot woot!

BUT! Use &isdtp=nv

<iframe src="https://igd.na17.visual.force.com/apex/Opportunities_Component?id={{{Id}}}&isdtp=nv"; width="100%" height="600px"></iframe>
(Edited)
Photo of Bridget Dubas

Bridget Dubas

  • 212 Points 100 badge 2x thumb
Disclaimer: Total newbie here.  I am also trying to include a 3rd party app in my Skuid page (Account Detail page and 3rd party app is FirstRain).  We currently have this in our standard page layout as a VF section.  I tried adding this in my Skuid page with a template component but am getting the same error that Nic was getting: Id value is not valid for the Account standard controller.  When I swap out the {{Id}} or {{{Id}}} for the Id of an Account the page preview works, but it always shows the same Account FirstRain VF section no matter what Account I am previewing.  Here is the HTML code I tried:

<iframe src="https://arris--uat3--firstrain.cs15.visual.force.com/apex/FirstRain_Account_Snapshot?Id=0013000000Xtl4SAAR&isdtp=vw" width="100%" height="600px" frameborder="0"/>

Code versions mentioned above (starting with<iframe src="/apex...) did not work for me.  I got a URL no longer exists error.
Any suggestions?  Is there any other info I can provide to help trouble shoot?  Any advice is greatly appreciated.  Thank you!
Photo of Rob Hatch

Rob Hatch, Official Rep

  • 44,006 Points 20k badge 2x thumb
One more suggestion.  If you uncheck the "Allow Html" box in the template properties,  it won't try to render the iframe code in the builder.  You willl just see the HTML code,  but at least you won't see the error message.


 
Photo of Jarrod Hinson

Jarrod Hinson

  • 2,310 Points 2k badge 2x thumb
How can we make this iframe solution work with "/apex/pagename"? I can't get it to work for any page due to the name space being skuid , I have to include the full url https and everything and this is bad because sandbox vs production this is going to break.
Photo of Rob Hatch

Rob Hatch, Official Rep

  • 44,006 Points 20k badge 2x thumb
You can use the syntax "/apex/c__pagename"  and salesforce will automatically append the right namespace in front of your VF page.  For more details see this Stackexchange post 
Photo of Jarrod Hinson

Jarrod Hinson

  • 2,310 Points 2k badge 2x thumb
WOW Thats awesome and it worked! thanks Rob
Photo of Sayali Dehedkar

Sayali Dehedkar

  • 180 Points 100 badge 2x thumb
In my case it can be unmanaged package or managed package in production or sandbox. I wanted to use URLFOR in skuid. Is there any way to do that? I want to get instance url dynamically in skuid. Or is there any way i can pass parameters to skuid page from VF page in which it is included. 
Photo of jdbuerger

jdbuerger

  • 502 Points 500 badge 2x thumb
I just wanted to chime in that this thread was great. The end code worked perfectly. I also use Cirrus Files and wanted to add it to my Skuid pages.

My only regret was that it took me an hour of searching to find this thread. You should think about building some basic tutorials for this kind of thing and for managing custom buttons. Most of us use third party applications (like Cirrus Files, DocuSign and LOOP) in our Salesforce instances, but your documentation has very little on how to add the buttons and VF pages that those third party apps incorporate.
Photo of Rob Hatch

Rob Hatch, Official Rep

  • 44,006 Points 20k badge 2x thumb
Yes John,  totally get you there.  We are working to improve our documentation.  Just a wee bit behind... 
Photo of Skuidward Tentacles (Raymond)

Skuidward Tentacles (Raymond), Champion

  • 17,224 Points 10k badge 2x thumb
I used this for Box.com installed package. Replace "Contact" with your object name.

<html><iframe src="/apex/box__BOXSection?id={{{$Model.Contact.data.0.Id15}}}&param=Contact_Box_Section" width="70%" height="800px" frameborder="false">
</iframe>
</html>

Worked like a charm.
Photo of Avinash

Avinash

  • 1,726 Points 1k badge 2x thumb
Hi,
I am completely new to skuid. But, I want to use  PandaDoc an installed package on opportunity object. So my skuid page should have a PandaDoc section.

The iframe i used is 
<iframe src="/apex/c__PandaDoc?id={{{Id}}}&isdtp=nv"; width="70%" height="800px" frameborder="false"></iframe>

But i am getting an error saying "page PandaDoc does not exist"

Can anyone help me out with this issue?

Thanks.
(Edited)