How to view a visualforce page (from an installed package) on a Skuid detail page

  • 1
  • Question
  • Updated 2 years ago
  • Answered
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="https://pandadoc.na7.visual.force.com/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"
Photo of Avinash

Avinash

  • 1,726 Points 1k badge 2x thumb

Posted 3 years ago

  • 1
Photo of Skuidward Tentacles (Raymond)

Skuidward Tentacles (Raymond), Champion

  • 17,224 Points 10k badge 2x thumb
I have not personally investigated this, but from what I understand VF pages in inline frames are disabled by Salesforce by default, but you may request that to be changed directly with Salesforce. This thread discusses it:
https://developer.salesforce.com/foru...
Photo of Karen Waldschmitt

Karen Waldschmitt, Official Rep

  • 8,260 Points 5k badge 2x thumb
Avinash~

What information are you trying to display in the iframe? Try referencing the information in a template using global merge syntax to include your data in the iframe code. 

Thanks!
Karen
Photo of Avinash

Avinash

  • 1,726 Points 1k badge 2x thumb
Hi Karen,

I have an installed package called PandaDoc (a document signing s/w) on the opportunity layout. 

so when i open a particular opportunity, i see a section related to PandaDoc and from this section i can login to the Installed Package (PandaDoc) to see all the Documents related to that particular opportunity.

Now we want to replace the native salesforce Opportunity detail page with skuid page and from the skuid page I should have a section for my installed package from where I can see all the related documents of a particular opportunity.

To accomplish this, I went through all the suggestions in the community and found that having an iframe tag within a template component would solve my issue. I followed those steps but it din't worked for me. 

To answer you question: i wanted to display the installed package section within the iframe. But, I am not able to figure out the proper approach to deal with this issue. 

Can you tell me how to Solve this issue?

Thanks.

-Avinash
Photo of Karen Waldschmitt

Karen Waldschmitt, Official Rep

  • 8,260 Points 5k badge 2x thumb
Avinash~

It looks like you are using the local namespace for the VisualForce page in the URL ("https://pandadoc.na7.visual.force.com/apex/c__PandaDoc ...). Try using the namespace prefix for PandaDoc instead. 

Thanks!
Karen
Photo of Avinash

Avinash

  • 1,726 Points 1k badge 2x thumb
Hi Karen,

I realised about it and changed it a week back. But Still getting an error saying that Not Found "ObjectId" parameter

Following is the iframe I'm using now:

<iframe src="/apex/pandadoc__CreateNewPandaDoc?id={{{ID}}}&param=Opportunity_PandaDoc_Documents_Section" width="70%" height="800px" frameborder="false">   </iframe>
(Edited)
Photo of Karen Waldschmitt

Karen Waldschmitt, Official Rep

  • 8,260 Points 5k badge 2x thumb
Avinash~

It looks like you may be having problems with the syntax. Try using Id instead of ID. Then, when you preview the page, inspect the page and look at the element in question to see what is getting passed from the iframe code to the page itself. When you do that, you should see something like this: 

Look at what URL is actually being generated. What data is getting passed to the page? Is it getting the right data? If no ID is actually being merged, the template may not connected to the right model. In that case, you can try using global merge syntax to get the ID from the correct model.

Thanks!

Karen
(Edited)
Photo of Avinash

Avinash

  • 1,726 Points 1k badge 2x thumb
Karen,

I tried different things but no luck. Basically i want a section for PandaDoc Documents on my skuid page.

Generally on a native salesforce page, PandaDoc Related list is shown like this:


So by using the IFrame, I want to display this section on my skuid. but with the iframe code that i am using it is displaying the entire window within the skuid page (Please see below)

I checked the errors by inspecting the page elments and all i found was a 404 ERROR.

So, I am unable to figure out where i am going wrong.

I am adding the visualforce code that we use use on the opportunity layout to display PandaDoc Related list. I guess this gives you a better idea on where i am going wrong.

<apex:page StandardController="Opportunity" extensions="pandadoc.PandaDocController" showHeader="true" sidebar="true" action="{!afterLoad}">
    <script src="https://s3.amazonaws.com/pd-js-sdk/{!PANDADOC_SDK_VERSION}/pandadoc-js-sdk.min.js"></script>
    <script src="https://s3.amazonaws.com/pd-js-sdk/{!PANDADOC_SDK_VERSION}/connectors/salesforce.js"></script>
    <link rel="stylesheet" href="https://s3.amazonaws.com/pd-js-sdk/{!PANDADOC_SDK_VERSION}/pandadoc-js-sdk.css"/>
    <link rel="stylesheet" href="https://s3.amazonaws.com/pd-js-sdk/{!PANDADOC_SDK_VERSION}/connectors/salesforce.css"/>
    <style>
        .pandadoc-doc-list {
            width:100%;
            height:395px;
        }
    </style>
    <apex:form >
        <apex:pageMessages />
        <apex:pageBlock title="PandaDoc Documents" mode="edit">
            <apex:pageBlockButtons >
                <apex:commandButton value="New document" onclick="openCreateNewPage();"/>
            </apex:pageBlockButtons>
            
            <div id="pandadoc_list"></div>
        </apex:pageBlock>
    </apex:form>
    <script type="text/javascript">
      function openCreateNewPage() {
        window.parent.location.href='/apex/pandadoc__CreateNewPandaDoc?ObjectId={!Opportunity.Id}';
      }

      var PANDADOC_DOCUMENT_DATA = {!recordIdMetadata};
      PandaDoc.Config.SDK_APP = '{!PANDADOC_APP_HOST}';
      PandaDoc.Salesforce.setupDocList('#pandadoc_list', PANDADOC_DOCUMENT_DATA);
    </script>
</apex:page>

Also the iframe that i used now is:

<html>
   <iframe src="/apex/pandadoc__CreateNewPandaDoc?id={{{$Model.Opportunity.data.0.Id15}}}&param=PandaDoc Documents"; width="100%" height="800px" frameborder="false">
   </iframe>
</html>

I appreciate you for taking your time on solving this issue. I hope this time you might have a complete idea of where i am making a mistake.

Thanks.
-Avinash
Photo of Pablo Martinez

Pablo Martinez

  • 2,468 Points 2k badge 2x thumb
HI avinash,

One question: if you go to : [Your SF instance]/apex/pandadoc__CreateNewPandaDoc?id=[PICK ONE VALID OPP ID]&param=PandaDoc Documents

directly on your browser, what do you see?
(Edited)
Photo of Skuidward Tentacles (Raymond)

Skuidward Tentacles (Raymond), Champion

  • 17,224 Points 10k badge 2x thumb
Did you try Id instead of Id15? Also, you can put your merge text in a template component for testing purposes. That way you can see what the resulting output of your merge text is.
Photo of Pablo Martinez

Pablo Martinez

  • 2,468 Points 2k badge 2x thumb
Can you inspect the Iframe to see the composed scr of the Iframe? You can try to use Id as raymond says or use $param.id (the Id get param on the url)
Photo of Avinash

Avinash

  • 1,726 Points 1k badge 2x thumb
It worked by using the syntax $Param.id. Thanks Pablo and Raymond.
Photo of Pablo Martinez

Pablo Martinez

  • 2,468 Points 2k badge 2x thumb
Nice to hear is working :D but it's weird if in the model you have data you can use that syntax.

Last check : can you open the javascript console in that page and write: skuid.$.Model('Opportunity').data.lenght to see if there is any record on the model?
Photo of Avinash

Avinash

  • 1,726 Points 1k badge 2x thumb
A blank page with List of SFDC tabs are displayed. no records are shown.