Versions Compared

Key

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

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

You can publish reports and dashboards both from public eazyBI flex.bi accounts (and then any user will be able to see report results) as well as from non-public eazyBI flex.bi accounts (in this case user will need to log in eazyBI flex.bi if no active eazyBI flex.bi browser session will be present for this user).

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

...

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:

Image RemovedImage Added

You can include generated <iframe ...></iframe> code in another HTML page and as a result, you will see eazyBI flex.bi report rendered inside this web page:

...

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

...

Embed dashboard as iframe

You can also embed eazyBI flex.bi dashboard page in other HTML page. If you have dashboard edit permission then click edit button in top right corner of Dashboards tab page and then click Embed dashboard button and you will see similar Embed dashboard in another HTML page dialog as for report. Include generated <iframe> code in another page to see embedded dashboard:

...

In previous embedded dashboard you can see that if you expand rows in table report then iframe is not resized and you get scrollbar inside iframe (iframe size stays as you have specified in iframe height attribute). To achieve automatic <iframe> element resizing based on eazyBI flex.bi dashboard height you need to perform the following additional tasks (see explanation of this iframe resizing approach).

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 eazyBI flex.bi dashboard:

<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("eazybiflexbi_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="eazybiflexbi_dashboard" attribute (the same as used in getElementById above) as well as add resize_iframe parameter to eazyBI 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:

<iframe id="eazybiflexbi_dashboard" width="100%" height="798" src="https://eazybiflex.combi/bi/accounts/147/embed/dashboard/61506?resize_iframe=https%3A%2F%2Fdocs.eazybi.com%2Fplugins%2Fresize_iframe.html" frameborder="0"></iframe>

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


 

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 eazyBI 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 

<iframe width="100%" height="482" src="https://flex.bi/accounts/1/embed/report/1?selected_pages=[Time].[1997].[Q1%201997],[Time].[1997].[Q2%201997],[Measures].[Unit%20sales]" frameborder="0"></iframe>

 

Adding parameters to URL

You can provide several parameters to the URL of the shared report or dashboard, in that case, use an ampersand & to separate several parameters. To assign a value to the parameter user an equal sign =. To provide several values for one parameter, separate those values by a comma , .

...