Versions Compared

Key

  • This line was added.
  • This line was removed.
  • Formatting was changed.

flex.bi reports and dashboards can be embedded in other HTML pages as <iframe>element.

...

An alternative solution for embedding flex.bi reports is embedded iframes with access tokens or flex.bi gadgets in Atlassian Jira and Confluence.

Embedded iframes with access tokens are available in flex.bi Cloud Business plan and flex.bi Enterprise plan.On this page:

Table of Contents

Embed report as iframe

When you have opened report in Analyze tab then there is the ... button in the toolbar. Press the button to see the dropdown list of options, choose the  </> Embed report. When you are in Dashboard tab then each report has </> icon in report header. When pressing this icon you will see similar dialog to this:

...

If you would like to publish a report which cannot be modified (disable all report modification popups) then add ?disable_actions to iframe element src URL. Please see below the same report with all report actions disabled:

Code Block
<iframe width="900" height="482" src="https://flex.bi/bi/accounts/47/embed/report/799?disable_actions" frameborder="0"></iframe>

In similar way you can add the enable_export parameter to URL to enable results export.

...

At first you need to create additional static HTML file resize_iframe.html on the same web server which will serve main HTML page which will include <iframe> with flex.bi dashboard:

Code Block
<html>
<!--
This page is on the same domain as the parent, so can
communicate with it to order the iframe window resizing
to fit the content
-->
  <body onload="parentIframeResize()">
    <script>
      // Tell the parent iframe what height the iframe needs to be
      function parentIframeResize() {
        var height = getParam('height');
        // This works as our parent's parent is on our domain.
        var iframe = parent.parent.document.getElementById("flexbi_dashboard");
        if (iframe && iframe.tagName === 'IFRAME') {
          iframe.height = parseInt(height);
        }
      }
      // Helper function, parse param from request string
      function getParam(name) {
        name = name.replace(/[\[]/,"\\\[").replace(/[\]]/,"\\\]");
        var regexS = "[\\?&]"+name+"=([^&#]*)";
        var regex = new RegExp(regexS);
        var results = regex.exec(window.location.href);
        if (results == null)
          return "";
        else
          return results[1];
      }
    </script>
  </body>
</html>

Now modify <iframe> element and include additional id="flexbi_dashboard" attribute (the same as used in getElementById above) as well as add resize_iframe parameter to flex.bi URL in src attribute and as parameter value specify URL encoded resize_iframe.html full URL on your web server. See example code that is used in this page:

Code Block
<iframe id="flexbi_dashboard" width="100%" height="798" src="https://flex.bi/bi/accounts/47/embed/dashboard/1506?resize_iframe=https%3A%2F%2Fdocs.flex.bi%2Fplugins%2Fresize_iframe.html" frameborder="0"></iframe>

And now embedded flex.bi dashboard will automatically resize it's <iframe> element to match the current dashboard height. 

Iframe
srchttps://flex.bi/bi/accounts/47/embed/dashboard/265?resize_iframe=https%3A%2F%2Fdocs.eazybi.com%2Fplugins%2Fresize_iframe.html
width90%
height962

This text is right after <iframe> to illustrate automatic resizing.

...

If your embedded reports contain page filters or your dashboards contain common page filters you can dynamically set value for those filters by passing the value in URL. You should add parameter selected_pages and value should be comma separated full member names for page dimensions. Full member name contains also dimension name and flex.bi will automatically match members to page dimension. Please see below example URL and the report with pre-set time and measures page filter 

Code Block
<iframe width="100%" height="482" src="https://flex.bi/bi/accounts/47/embed/report/799?selected_pages=[Item].[AUDIO%20-%20Audio%20Products],[Person].[(none)].[SJ%20-%20Samuel%20Jackson],[Person].[(none)].[LD%20-%20Leila%20Dinnerplate]" frameborder="0"></iframe>

Iframe
srchttps://flex.bi/bi/accounts/47/embed/report/799?selected_pages=%5BItem%5D.%5BAUDIO+-+Audio+Products%5D%2C%5BPerson%5D.%5B%28none%29%5D.%5BSJ+-+Samuel+Jackson%5D%2C%5BPerson%5D.%5B%28none%29%5D.%5BLD+-+Leila+Dinnerplate%5D
width100%
height482

...

For example, you can provide parameter disable_actions , allowed_actions and selected_pagesfor a report like this:

Code Block
<iframe width="100%" height="482" src="https://flex.bi/bi/accounts/47/embed/report/799?disable_actions&allowed_actions=drill_across,page_selection&selected_pages=[Item].[AUDIO%20-%20Audio%20Products],[Person].[(none)].[SJ%20-%20Samuel%20Jackson],[Person].[(none)].[LD%20-%20Leila%20Dinnerplate]" frameborder="0"></iframe>