Skip to content

Instantly share code, notes, and snippets.

@JamesDBartlett3
Last active September 4, 2021 14:52
Show Gist options
  • Save JamesDBartlett3/5bf85550b3cb80f668a423f4e39726b9 to your computer and use it in GitHub Desktop.
Save JamesDBartlett3/5bf85550b3cb80f668a423f4e39726b9 to your computer and use it in GitHub Desktop.
Power BI Left Side Filter Pane -- install a UserScripts browser extension (like TamperMonkey, GreaseMonkey, ViolentMonkey, etc) then import this file.
// ==UserScript==
// @name Power BI - Left Filter Pane
// @namespace http://tampermonkey.net/
// @version 0.1
// @description Move Power BI report filter pane from right side of canvas to left side
// @author James D. Bartlett III (@JamesDBartlett3)
// @match https://app.powerbi.com/*
// @icon https://www.google.com/s2/favicons?domain=powerbi.com
// @grant none
// ==/UserScript==
(function() {
// define checkExist function with interval set to run every 500ms
let checkExist = setInterval(function() {
// set filterPane variable to result of document query for first element with TagName "outspace-pane"
let filterPane = document.getElementsByTagName("outspace-pane")[0]
// if filterPane is undefined...
if (filterPane == undefined) {
// console.log("Filter pane not found. Waiting 500ms...") // notify via console log
// continue to next iteration of loop
}
// otherwise, if filterPane is not undefined...
else {
// set canvas variable to the parent node of filterPane
let canvas = filterPane.parentNode
// if filterPane is not the first child of its parent...
if(canvas.firstChild != filterPane) {
// console.log("Filter pane found. Moving to left side of page.") // notify via console log
// make filterPane the first child of its parent
canvas.insertBefore(filterPane, canvas.firstChild)
}
}
}, 500)
// define rotateChevronIcon function with interval set to run every 100ms
let rotateChevronIcon = setInterval(function() {
// declare collapsedPane and expandedPane variables to results of document query for their respective classes
let collapsedPane = document.querySelector('.outspacePaneCollapsed')
let expandedPane = document.querySelector('.outspacePaneExpanded')
// if the pane is expanded...
if(expandedPane) {
// set rotation of the chevron icon to 90 degrees
expandedPane.querySelector('.collapseIcon').setAttribute("style", "transform: rotate(90deg)")
}
// if the pane is collapsed...
if(collapsedPane) {
// set rotation of the chevron icon to 270 degrees
collapsedPane.querySelector('.collapseIcon').setAttribute("style", "transform: rotate(270deg)")
}
}, 100)
})();
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment