Adding a button with a hyperlink or custom onClick action to the sidebar

#1

Hi, I was wondering if there was a way to add a button, either as a React component or widget, to the sidebar, which would then have a custom onClick event to say an external URL or custom action?

I saw an earlier question from a little while back which had a similar idea, but I wasn’t too clear on how that might be implemented or how the toolbar renderer can be extended.

Is there maybe an example of how this is done in the theia codebase?

screenshotButton
screenshotButton96×536 7.05 KB

#2

@domino thank you for the discussion, we don’t really have an example in the code base that suits your exact needs but you should be able to inspire yourself from the SidebarMenuWidget (theia/sidebar-menu-widget.tsx at master · eclipse-theia/theia · GitHub) which trigger a context-menu when clicked.

In your case, your widget can trigger the opening of the hyperlink.

1 Like
#3

Thank you for pointing me in the right direction @vince-fugnitto !

One thing I’m still a little unclear on is how I would prevent it from opening a separate panel on click instead of rendering the widget content?

For example, if I add it to my top shell panel with the following code, it renders and behaves as I’d want it to:

await this.shell.addWidget(customWidget, {
            area: 'top',
            rank: 2
        });

image

But then if I add it to the left area, it now adds an icon to the panel, and opens a tree which contains the element I’d like to render, instead of directly to the tabBar or below it.

await this.shell.addWidget(customWidget, {
            area: 'left',
            rank: 2
        });

image

I was able to get close to what I wanted by modifying the sidebar-menu-widget itself within @theia/core to render a different element, so I guess maybe looking at extending SidePanelHandler might be a simpler direction than modifying the core module.

image