Embedding PowerBI report in ReactJS - show/hide a selected tab (report page) based on user role

[deepthishi]

Hi,

I am working on embedding a power BI report in React JS web application. 

The report has multiple tabs (pages). I have a requirement on the applciation side, to show/hide only the selected tab based on teh user role. How to accomplish this on the application side.

Also, is it possible to show/hide certain sections of the page  based on user role, from within the reactJS applciation?

Thanks for looking into this.

[v-tangjie-msft]

Hi @deepthishi ,

To manage the visibility of tabs (pages) in a Power BI report based on user roles, you would typically leverage Power BI's built-in Row-Level Security (RLS) features to control data access. However, controlling the visibility of entire tabs directly based on user roles requires a different approach since RLS doesn't directly control tab visibility.

Yes, it is possible to show or hide sections of a page in ReactJS based on user roles. This can be achieved through conditional rendering within your React components. You would typically manage user roles within your application's state or context and then use these to conditionally render different parts of your UI.

Here's a simplified example:

function MyComponent({ userRole }) {
  return (
    <div>
      {userRole === 'admin' && (
        <div>Admin Section</div>
      )}
      {userRole === 'user' && (
        <div>User Section</div>
      )}
    </div>
  );
}

You can refer to the following documents that may be helpful to you: 

How to Navigate Pages Dynamically with RLS? (youtube.com)

Solved: Auto hide report pages/tabs based on user - Microsoft Fabric Community

javascript - React.js Material-UI: Programmatically hide and show tab - Stack Overflow

Best Regards,

Neeko Tang

If this post  helps, then please consider Accept it as the solution  to help the other members find it more quickly. 

[deepthishi]

Thanks @v-tangjie-msft for the response. So I understand that it may not be possible to direclt control the visisbility of the tab using RLS . So, is it possible to control the visibility of a embedded powerbi Report tab programatelly through react JS? I went through the suggested documnets, but it is still not clear to me. can you please elaborate. Any code samples will help - thank you