Hide Sidebar with ScriptRunner for Confluence

[Kurt Rosivatz]

Hi,

has anyone figured out how to hide the sidebar of a specific space in Confluence (Server) with ScriptRunner's Script Fragments "Hide system or plugin UI element" feature?

What is/are the module key(s) of the sidebar I need to enter in the "What" field. So far I could not figure out the right key(s) even with the web locator feature. I managed to hide a lot of UI elements, but not the complete sidebar.

It must be possible to hide the sidebar because there is a marketplace app "HideElements for Confluence" that does this with one click - but as I need this only in one specific space I'd like to "protect my investment" in ScriptRunner so buying an additonal plugin would be a rather expensive option for us.

Regards,

Kurt

[Jonny Carter · Accepted solution]

Hey, @Kurt Rosivatz! I know it's been a minute, but I poked around with this today. I didn't find a way to do it that seemed good, but I figured I'd "show my work" at least.

If you really want to customize the side bar, I reckon you're better off sticking with ThemeBuilder (pardon the shameless plug) or, as you noted, HideElements for Confluence. ScriptRunner is a great Swiss Army Knife, but sometimes you really do need a specialized tool for the job.

I first tried turning on the Fragment Finder tool. As you can see, there isn't an item or panel encompassing the whole sidebar that we can hide outright.

The closest I could get was to hide the com.atlassian.confluence.plugins.confluence-space-ia:left-ia-sidebar-panel element. Hiding that hides the contents of the side bar, but not the sidebar itself.

Making matters more complicated, the getSpace and getSpaceKey method on most pages both return null for most pages! That makes it tough to limit this just to particular spaces using a condition.

On looking at it with the browser tools, I can see that even after hiding the sidebar contents, there's still a large grey area because the element with the id main has an inline style setting its margin to a fixed number of pixels, leaving the grey sidebar there. You can see the inline style jump between 55 pixels and 285 pixels (or thereabouts, depending on how large you expand it) of margin to leave room for the sidebar.

The best workaround that I could find was to use some CSS in a web resource to override the setting and hide the left sidebar:

#main {
    margin-left: 0px !important;
}

.ia-splitter-left {
    display: none !important;
}

Of course, web resources don't have the condition field, so you can't easily limit them to just one specific space.

I went a little overboard to see if I could overcome this problem with some custom JavaScript, which can also be placed in a web resource. While this will technically hide the sidebar for a specific space.

const targetSpaceKey = 'ds';
const css = `
#main {
    margin-left: 0px !important;
}

.ia-splitter-left {
    display: none !important;
}
`

function getSpaceKey() {
return Confluence.PageLocation.get().spaceKey;
}

function hideSidebar() {
    if (Confluence.PageLocation) {
        if (getSpaceKey() === targetSpaceKey) {
            const styleTag = document.createElement('style');
            styleTag.type = 'text/css';
            styleTag.appendChild(document.createTextNode(css));
            document.head.appendChild(styleTag);
        }
    } else {
        window.setTimeout(hideSidebar, 10);
    }
}
document.addEventListener("DOMContentLoaded", hideSidebar);

If you try it, you'll see a flash of the sidebar before it disappears. Not great.

I tried other things, like manually overriding the main element's inline style:

const mainElement = document.querySelector('#main');
mainElement.style = "margin-left: 0px";

That still leads to a flash of the sidebar before it's hidden.

I gotta give credit to the good folks at Lively, this isn't a trivial problem! If you'd rather merely customize the contents of the side panel, ThemeBuilder is probably the better fit. If you really just need to straight-up hide the panel, it looks like HideUiElements is the way to go.