Forum Discussion
Helper IVHide a page based on measure value
Helper IVThank you all for the quick replies!
Currently I have a report and am pssing in a filter. The report is embeded in a web page. Based on the passed in filter I want to hide certain pages in the report. My report pages each have names. So when a filter value of 'Sam' is passed in, I want to hide the values page. When a filter of 'Bob' is passed in I want to show the Values page and hide the CustomerCost page. The visuals on the pages show content that is specific to that page. If I try to hide the visuals, as suggested about, the page still appears to the user, but there is nothing on it. I hope that helps describe my project.
Sincerely,
Peter
Helper II
To achieve the functionality you described, where you want to dynamically show or hide report pages in Power BI based on a passed-in filter, you can use Power BI's JavaScript API in combination with some custom code on your web page.
Here's a general outline of the steps you would need to follow:
Embed the Power BI Report:
- Embed the Power BI report into your web page using the Power BI JavaScript API. Make sure you have the necessary JavaScript libraries and configurations set up to display the report.
Set Up a Filter:
- Implement a mechanism on your web page to allow users to select a filter value (e.g., 'Sam' or 'Bob').
JavaScript Code for Page Visibility:
- Write JavaScript code that listens for changes in the selected filter value.
- Based on the selected filter value, use the Power BI JavaScript API to show or hide specific report pages. You will need to use the powerbi.embed object and the updateSettings method.
Here's an example of what the JavaScript code might look like:
javascriptCopy code// Get a reference to the embedded report const reportContainer = document.getElementById('reportContainer'); // Replace with your container ID const report = powerbi.embed(reportContainer, config); // Listen for changes in the filter selection const filterSelect = document.getElementById('filterSelect'); // Replace with your filter input/select element filterSelect.addEventListener('change', function () { const selectedFilterValue = filterSelect.value; // Define which pages should be hidden or shown based on the filter value const pagesToShow = []; const pagesToHide = []; if (selectedFilterValue === 'Sam') { pagesToHide.push('CustomerCost'); // Hide the CustomerCost page } else if (selectedFilterValue === 'Bob') { pagesToShow.push('Values'); // Show the Values page pagesToHide.push('CustomerCost'); // Hide the CustomerCost page } // Update the report settings to show/hide pages report.updateSettings({ filterPaneEnabled: false, // Hide the filter pane navContentPaneEnabled: true, // Show the navigation pane layoutType: models.LayoutType.Custom, // Use custom layout customLayout: { displayOption: models.DisplayOption.FitToWidth, // Adjust the display option as needed pagesToShow: pagesToShow, pagesToHide: pagesToHide } }); });HTML Elements:
- Ensure that you have the necessary HTML elements, such as a container for the report, a filter input/select element, and any other UI elements you require.
This code listens for changes in the filter selection, and based on the selected filter value, it specifies which report pages to show and hide using the updateSettings method of the Power BI JavaScript API. This way, you can dynamically control the visibility of report pages based on the selected filter value.
Make sure to adapt the code to match your specific HTML structure, IDs, and the report configuration you have.