+ Start a Discussion
Karleen MendozaKarleen Mendoza 

Iframe link not displaying in visualforce page?

I am trying to display a record detail page in a visualforce page so it can show in a homepage component. I used the following code:
 
<apex:page >
<apex:iframe src="https://cs91.salesforce.com/a382F0000001HRW" scrolling="true" id="theIframe"/>
</apex:page>

The page doesn't render... I understand that this could be done via using <apex:detail> but I have no idea where to begin with that. I'm not too familiar yet with Apex. 

My goal here is to view the specific record details of one record on a home page component
Best Answer chosen by Karleen Mendoza
Alain CabonAlain Cabon
Hello,

The following Visualforce page works on the Home Page but as you mentioned you need to disable the Clickjack security because it is the complete detail page without the related lists.

Disable Clickjack Protection​
https://help.salesforce.com/articleView?id=000240096&type=1

The following code works as a Visualforce page used on the Home Page (tested) and it is the shortes but the  Clickjack security has been disabled.
  1. Replace MyObject__c by your object name
  2. Only one Id is selected always the same here (myid) It is not the best solution and you should use a custom setting instead.
<apex:page standardController="MyObject__c" showHeader="false" readOnly="true">
   <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
    <apex:variable  var="myid" value="a0N58000000FaC6"/>
    <apex:detail subject="{!myid}" relatedList="false" title="false"  inlineEdit="false" />
    <script>
    j$ = jQuery.noConflict();
    j$(document).ready(function() {
        j$('a').bind("click.myDisable", function() { return false; });
        j$('.btn').each(function(){
            if(j$(this).attr('title')=='Clone' || j$(this).attr('title')=='Edit' || j$(this).attr('title')=='Delete')
                j$(this).remove();
        });
    });
    </script>
</apex:page>

The jQuery short code removes the buttons "Clone" "Edit" and "Delete" and disable all the links  ('a') existing on the page so the detail page is "almost" perfectly read only.

Tell me if that doesn't work.

Alain

All Answers

Aman MalikAman Malik
Hi Karleen,

Below is the snippet, how you can make use of apex:detail in your scenerio. Suppose your object API name is 'MyObject__c', Your page code would look like below:
<apex:page standardController="MyObject__c">
   <apex:detail subject="{!MyObject__c.id}" relatedList="false" title="false"/>
</apex:page>

Then click the preview button to preview your page and pass record id in page URL.
For example, if 001D000000IRt53 is your record id, the resulting URL should be:
https://Salesforce_instance/apex/myPage?id=001D000000IRt53

Hope this will help. Kindly let me know in case any query.

Please like the answer and mark it as best if this helps.

Thanks,
Aman
Karleen MendozaKarleen Mendoza

Hi Aman, 
 

Thanks for the tip. I'd like to have this record detail viewable on the Home Page so when my users open SFDC, they see the record right away without having to click a button. But I have no idea how to pass the record ID so it can be viewable on the home page. Is it possible to to do this without creating a link?

Aman MalikAman Malik
Ok, In that case you will need to follow the iframe approach which you were using before. Hopefully you created the homepage component for that. If not, follow below steps:
Setup --> Customize --> Home --> Home Page Component -- > click new under Custom Components --> Select HTML area --> paste your code line .
for an example, line code should be
<iframe src="https://cs91.salesforce.com/a382F0000001HRW" style="border:none; margin:0; padding:0" ="" id="homepage_ifrm" height="208px" scrolling="no" width="100%"></iframe>
Hope this helps,

Thanks,
Aman
 
Karleen MendozaKarleen Mendoza
Ok, I get this error though?
User-added image
Aman MalikAman Malik
Oh, got the problem. There is some attribute problem there. Try the updated one
<iframe src="https://cs91.salesforce.com/a382F0000001HRW" style="border:none; margin:0; padding:0" id="homepage_ifrm" height="208px" scrolling="no" width="100%"></iframe>
Thanks,
Aman
 
Karleen MendozaKarleen Mendoza
Ok, tried that. The preview page and the component on the home page comes up blank. I read around about this and I think it has something to do with Clickjack security. Is there anyway around it?
Alain CabonAlain Cabon
Hello,

The following Visualforce page works on the Home Page but as you mentioned you need to disable the Clickjack security because it is the complete detail page without the related lists.

Disable Clickjack Protection​
https://help.salesforce.com/articleView?id=000240096&type=1

The following code works as a Visualforce page used on the Home Page (tested) and it is the shortes but the  Clickjack security has been disabled.
  1. Replace MyObject__c by your object name
  2. Only one Id is selected always the same here (myid) It is not the best solution and you should use a custom setting instead.
<apex:page standardController="MyObject__c" showHeader="false" readOnly="true">
   <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
    <apex:variable  var="myid" value="a0N58000000FaC6"/>
    <apex:detail subject="{!myid}" relatedList="false" title="false"  inlineEdit="false" />
    <script>
    j$ = jQuery.noConflict();
    j$(document).ready(function() {
        j$('a').bind("click.myDisable", function() { return false; });
        j$('.btn').each(function(){
            if(j$(this).attr('title')=='Clone' || j$(this).attr('title')=='Edit' || j$(this).attr('title')=='Delete')
                j$(this).remove();
        });
    });
    </script>
</apex:page>

The jQuery short code removes the buttons "Clone" "Edit" and "Delete" and disable all the links  ('a') existing on the page so the detail page is "almost" perfectly read only.

Tell me if that doesn't work.

Alain
This was selected as the best answer
Karleen MendozaKarleen Mendoza
It worked!!!!! Thank you so much Alain! You're the best!