Custom Extension SidePanel Template

JupyterLab extensions
,
#1

hi! I’m a student trying to build custom jupyterlab extension on the left side tab/or bar and no progress for days … :(((

like where file explorer, extension manager, and etc… are.

All I needed is blank collapsible side tap added, maybe anybody has a template made that can be shared? much appreciated, thanks!

#2

Follow the extension tutorial at Extension Tutorial — JupyterLab 3.0.1 documentation, but when it says do app.shell.add(widget, 'main');, do app.shell.add(widget, 'left'); instead.

FYI, the possible areas are listed in the code at jupyterlab/shell.ts at ff1bb771f819d0fdcecc6e5770d453473978625d · jupyterlab/jupyterlab · GitHub

2 Likes
#3

finally got it working with below

const extension: JupyterFrontEndPlugin<void> = {
id: 'example-ext',
autoStart: true,
activate: async (
    app: JupyterFrontEnd
) => {
    addSideBar(app);
}};

export default extension;

function addSideBar(app: any) {
const panel = new Panel();
panel.id = 'Example-tab';
panel.title.icon = tabIcon; // svg import
panel.addWidget(new ExampleWidget());
app.shell.add(panel, 'left', { rank: 1 })
}

export class ExampleWidget extends ReactWidget {
   render(): JSX.Element {
    return (
        <ExampleComponent />
    );
}
}

function ExampleComponent() {
return (
    <body id="main">
        <div className="jp-Examplewidget"><h2>Hello World!</h2></div>
    </body>
);
}

Hope above code will be helpful for someone else.

Thank you so much for your support! Now I have a starting ground.

Btw, after googling around,
I started noticing that there is not much documentation around @lumino and their applications.
Regular developers want to work on something that is widely used,
to make sure they can leverage the full community support.
May I ask for your thoughts about that?

1 Like
#4

this is really good thank you for sharing with us

#5

We welcome contributions to the Lumino documentation!