Need Guidance on creating a custom explorer widget

[YathindraNikshipth]

I’ve been exploring FileNavigatorContribution and FileNavigatorWidget to understand how the Explorer widget works, but I couldn’t find where the widget is added to the left panel.

I installed two extensions from Open VSX (Maven for Java and Community Server Connectors), but instead of being added to the left panel, they appear as an accordion view in the Explorer widget. I’d like to understand where this is handled.

If I want to create a custom widget similar to the Explorer, what would be the recommended approach for the flow to debug and understand?

[msujew]

Hey @YathindraNikshipth,

For widgets in the sidebars, Theia has a distinction between widgets and view containers. A view container can contain multiple views/widgets, and is displayed in the sidebar. The actual widget is just part of its owning view container. See here for how the navigator widget is contributed to its view container:

theia/packages/navigator/src/browser/navigator-contribution.ts

Lines 167 to 177 in 83fb8c1

	super({
	viewContainerId: EXPLORER_VIEW_CONTAINER_ID,
	widgetId: FILE_NAVIGATOR_ID,
	widgetName: EXPLORER_VIEW_CONTAINER_TITLE_OPTIONS.label,
	defaultWidgetOptions: {
	area: 'left',
	rank: 100
	},
	toggleCommandId: FILE_NAVIGATOR_TOGGLE_COMMAND_ID,
	toggleKeybinding: 'ctrlcmd+shift+e'
	});

And here how the view container is created in the first place:

theia/packages/navigator/src/browser/navigator-widget-factory.ts

Lines 63 to 74 in 83fb8c1

	async createWidget(): Promise<ViewContainer> {
	const viewContainer = this.viewContainerFactory({
	id: EXPLORER_VIEW_CONTAINER_ID,
	progressLocationId: 'explorer'
	});
	viewContainer.setTitleOptions(EXPLORER_VIEW_CONTAINER_TITLE_OPTIONS);
	const openEditorsWidget = await this.widgetManager.getOrCreateWidget(OpenEditorsWidget.ID);
	const navigatorWidget = await this.widgetManager.getOrCreateWidget(FILE_NAVIGATOR_ID);
	viewContainer.addWidget(navigatorWidget, this.fileNavigatorWidgetOptions);
	viewContainer.addWidget(openEditorsWidget, this.openEditorsWidgetOptions);
	return viewContainer;
	}

VS Code extensions can decide whether to use an existing view container and contribute their view to it, or to create their own view container. This is handled by the declaration of the view in the package.json of the respective extension.

In order to create a custom widget. I would recommend following this guide on our website.

[YathindraNikshipth]

@msujew thank u , i was able to create a custom view container.

[YathindraNikshipth]

@msujew

i have a doubt, in order to make vscode extensions to contribute views to my custom viewcontainer i need to change the view declaration in it's respective package.json file and also i believe i should make some changes in PluginViewRegistry class avaialable in @theia/plugin-ext package. am i right?

so i have written the following code snippet

`@injectable()
export class CustomPluginViewRegistry extends PluginViewRegistry {

@postConstruct()
protected init(): void {
    super.init()
}

}`

and binding as follows

rebind(PluginViewRegistry).to(CustomPluginViewRegistry)

even though i didn't made major changes it seems to be breaking it's intended purpose so i believe i missing something. could u please point where am i heading wrong?

[msujew]

it seems to be breaking it's intended purpose

What exactly is breaking? Any errors in the console log? The rebinding seems to be correct.

[YathindraNikshipth]

@msujew at first the view contributed by plugin are not visible in Explorer widget (Which initially does before rebinding) but few builds it's working fine now.

But still not able to shift the plugin views from Explorer to My Custom Widget.

i have overriden the following code

` async initWidgets(): Promise {
super.initWidgets();

    const promises: Promise<void>[] = [];


    promises.push((async () => {
        const explorer = await this.widgetManager.getWidget(CUSTOM_EXPLORER_VIEW_CONTAINER_ID);
        if (explorer instanceof ViewContainerWidget) {
            await this.prepareViewContainer('workbench.view.extension.custom_explorer', explorer);
        }
    })().catch(console.error));

    await Promise.all(promises);

}

`

this step partially worked but i still missing something.

update:

I was able to sucessfully move the plugin views to my custom container. Thank you