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

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.