8

I have a few reports embedded in visualforce page using iFrame. Due to this new release of Spring '14, iFrame has stopped working and now these visualforce pages show blank screens. Can anyone help me with a work around?

  • Could it be the clickjacking protection that they force enabled recently (salesforce.com and visual.force.com being different domains)? What exactly does not work, have you checked the browser's console? – eyescream Apr 17 '14 at 19:39
  • its not clickjacking. ALthough it wasn't recommended, i still disabled clickjack protection and tried to run it. It didn't work even then. – Sam Apr 18 '14 at 6:35
5

I just figured out a way to do this without an iFrame using jQuery.

First you need to include jQuery at the top of your VF page:

<apex:page standardController="Contact" sidebar="false" showHeader="false">
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>

Then include a target element in your page that will be the container for the report. For example:

<apex:pageBlockSection title="My Report" id="MyReport" columns="1" />

Now at the bottom of the page, use the jQuery load method to grab the HTML source of the report page, pull out just the report table, and inject it into the container:

<script language="JavaScript">
    $('[id$="MyReport"] > .pbSubsection > .detailList').load('/00Oi000000wxyz?pv0={!Contact.id}&isdtp=nv table.reportTable.matrixReportTable');
</script>

Unfortunately the styling is lost, so I had to create a simple style sheet on the page to make it more readable:

<style type="text/css">
    [id$="MyReport"] > .pbSubsection {
        margin-top:10px;
    }
    [id$="MyReport"] >.pbSubsection tr:first-of-type td, [id$="MyReport"] >.pbSubsection tr:first-of-type th {
        border-top:1px solid rgb(212, 218, 220)!important;
    }
    [id$="MyReport"] > .pbSubsection th, [id$="MyReport"] > .pbSubsection td {
        font-size: 12px;
        padding:3px 6px 3px 5px;
        background-color:#fff;            
        border-color:rgb(212, 218, 220)!important;
        border-bottom:1px solid rgb(212, 218, 220)!important;
    }   
    [id$="MyReport"] > .pbSubsection th {
        background-color:#eee;
    }
    [id$="MyReport"] > .pbSubsection .grandTotal {
        background-color:rgb(212, 218, 220);
    }
    [id$="MyReport"] > .pbSubsection .drilldown {
        display:none;
    }
</style>
  • Wow! that must have took some serious effort but good job Dave! Thanks for the response :) – Sam Aug 12 '15 at 6:25
  • Hi Dave, I tried this but I guess Salesforce has now introduced a security layer in between - XMLHttpRequest cannot load na14.salesforce.com/00Od000000XXXXX?isdtp=nv. No 'Access-Control-Allow-Origin' header is present on the requested resource. Origin 'c.na14.visual.force.com' is therefore not allowed access. Any thoughts? – Amit Bangad Aug 14 '16 at 8:57
  • I just checked and my VF page is still pulling in the report. When we updated to the latest version of NPSP (3.X) I had to update the URLs to the report, but other than that everything else is still working. Debugging javascript can be a real hassle. Make use the console and you might want to break it down into smaller steps first, like just using the jQuery load into a simple HTML page first before trying to shoehorn it into VF. – Dave C Aug 15 '16 at 22:28
8

With Spring '14, Salesforce has really picked up the pace when it comes to their Analytics.

The Analytics API is now available in Apex.

Salesforce has also added a new tag, <analytics:reportChart> for embedding report data into Visualforce pages. As of right now, there is only one Visualforce component available in the analytics namespace, but my guess would be that more will be coming.

If you are trying to add this report to a page layout section, Salesforce has also recently added the ability to embed report charts in page layouts directly. This completely eliminates the Visualforce requirement!

Anyway, I would highly suggest looking into the Analytics API more. This should work a bit better than an iFrame for you. Peter Knolle has written some exceptional articles on the topic as well:

He also did a session at my local user group meetup that he recorded and put up on Youtube.

  • That is some very helpful information Jesse. But i tried <analytics:reportCharts> component. My reports do not have charts. And this component shows only tyhe chart part of the report. So this didn't work for me. Thanks for your response though :) – Sam Apr 17 '14 at 13:27
  • 1
    I was afraid of that. As you noted, unfortunately this doesn't pull in the entire report, only the chart. – Jesse Altman Apr 17 '14 at 13:35
  • Yeah! Actually I'm accessing these visual force pages through a custom link. Click on the link, and voila! a report 'used to' open. but nothing now :( – Sam Apr 17 '14 at 13:54

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.