Display different Power BI dashboards on Power Apps Portal

[Anonymous]

Hi Experts,

I have a requirement where I need to display different dashboards from Power BI on the Power Apps Portal Based on Logged in user's Organization.

For example, If  User-A belongs to Organization- A, he should be able to see the dashboard belonging to Organization-A and for User-B , he should be able to see the dashboard belonging to Organization-B and if a User belongs to Multiple Organization, he should have a way to select between them. And also for a contact with Administrator Web role, he should be able to select between the different Dashboards. 

Any help would be greatly appreciated.

Thanks in advance..

[Rahber]

One of the way i can think of is

You can have a power BI dashboard in an Iframe and the source of the iFrame will come from entity record

You can either use Liquid or Fetch XML to get the url from the entity based on your condition. Below example will work if user entity has organization field

{% if user.organisation== 'xyz' %} <iframe> {% endif %}

[OOlashyn]

Hi @Anonymous,

You can show different Power BI dashboard depending on users information using liquid. You will need to create a web template with powerbi liquid tag that will look something like this:

{% if user.orgfield == "Org A" %}
{% powerbi authentication_type:"powerbiembedded" path:"PATH_TO_FIRST_REPORT" %}
{% elseif user.orgfield == "Org B" %}
{% powerbi authentication_type:"powerbiembedded" path:"PATH_TO_SECOND_REPORT" %}
{% endif %}

Regarding the possibility to chose a dashboard, it is a little bit trickier. Because the liquid is server-side rendering you won't be able to switch on the fly with javascript. What you can do is for example show user a list of the available dashboard and on select refresh the page passing some id in the URL that you can then use in liquid to render dashboard. It might look something like this:

{% comment %} Get dashboardId from request URL  {% endcomment %}
{% assign dashboardId = request.params['dashboardId'] %}

{% if dashboardId == "Dash 1" %}
{% powerbi authentication_type:"powerbiembedded" path:"PATH_TO_FIRST_REPORT" %}
{% elseif dashboardId == "Dash 2" %}
{% powerbi authentication_type:"powerbiembedded" path:"PATH_TO_SECOND_REPORT" %}
{% endif %}

[Anonymous]

Hi @OOlashyn ,

As I am new to Power Apps ,I would be grateful if you Could help me on how to show user a list of available Power BI dashboards on the Portal?

Thank you in advance..

[OOlashyn]

Hi @Anonymous ,

If your list of dashboards will not change frequently the easiest way might be to hardcode a select with possible options, something like this:

<select onchange="handleDashboardChange()">
    <option value="<DASHBOARD_1_ID>">Dashboard 1</option>
    <option value="<DASHBOARD_2_ID>">Dashboard 2</option>
    <option value="<DASHBOARD_3_ID>">Dashboard 3</option>
</select>

Then add some javascript to act on change event to reload the page with proper URL parameter as per my previous message.

If the list of dashboards might be unique for a user or will be changed frequently possible solution might be to create a custom entity in CDS to store dashboards related to the user and then fetch them dynamically. You can fetch them for example by creating a web page that will serve as a web api as per this post. 

[Anonymous]

Hi @OOlashyn 

I tried adding the option set which you suggested in your reply. My dashboards do not change frequently. But I am not able to add the liquid tags inside the on change function. As I am a beginner could you please help me on this..

Thanks a lot for your help.

[OOlashyn · Accepted solution]

Hi @Anonymous ,

You don't need to operate with liquid in onchange event. What you need to do is to reload the page with a proper parameter that will be picked by liquid and will render powerbi dashboard. You cannot manipulate liquid in javascript as it is a template language.

See the full example below:

{% comment %} Get dashboardId from request URL {% endcomment %}
{% assign dashboardId = request.params['dashboardId'] %}


<div class="container">
    <div class="select-container">
        {% comment %} set current page location to value of selected option {% endcomment %}
        {% comment %} when selected page will be reloaded with proper parameter in url {% endcomment %}
        <select onchange="location=this.value;">
            <option value="{{page.url}}" selected></option>
            {% comment %} Value is combination of current page url and custom parameter {% endcomment %}
            <option value="{{page.url}}?dashboardId=dash1">Dashboard 1</option>
            <option value="{{page.url}}?dashboardId=dash1">Dashboard 2</option>
            <option value="{{page.url}}?dashboardId=dash1">Dashboard 3</option>
        </select>
    </div>
    <div class="dashboard-container">
        {% comment %} Show proper powerbi dashboard by selected id or default message {% endcomment %}
        {% case dashboardId %}
            {% when 'dash1' %}
                {% powerbi authentication_type:"powerbiembedded" path:"PATH_TO_FIRST_REPORT" %}
            {% when 'dash2' %}
                {% powerbi authentication_type:"powerbiembedded" path:"PATH_TO_SECOND_REPORT" %}
            {% when 'dash3' %}
                {% powerbi authentication_type:"powerbiembedded" path:"PATH_TO_THIRD_REPORT" %}
            {% else %}
                <div>No dashboard selected!</div>
        {% endcase %}
    </div>
</div>

[Anonymous]

Thanks a lot @OOlashyn . That was really very helpful..

[Anonymous]

Hi @OOlashyn ,

Could you please suggest if there is any possibility to have a lookup field for the organizations and on selecting an organization from the lookup, dashboard related to that organization can be displayed on the same page, instead of using static option set with option values as mentioned in this post. And also, is it possible to display the selected organization on all the pages in the Portal?

Thank you..

[OOlashyn]

Hi @Anonymous ,

Well, you can use a lookup, fetch URL of the dashboard related to that lookup and reload the page passing it as a parameter. Just keep in mind that liquid is server-side rendering so it needs to have all data to render the page and cannot be switched on the fly.

Regarding display selected organization on all pages - if I understand you correctly - you can do it in different ways. I would say the most straightforward way (and also the one that will give you the flexibility in terms of liquid) would be to store the data in specific lookup on the contact record of the current user itself. So he can go to a specific page (not necessarily profile) and select organization he wants and submit data. And then you can use it in all pages via liquid user object for example. Or another approach will be store selection in session storage or local storage and receive it with javascript. But this one is not that great as you will need to use js to retrieve data.