VS Code Extension - How to add a WebviewPanel to the sidebar?

user_4970496 0
Viewed 3651

According to this page webviews can be "rendered in the sidebar or panel areas". The examples show how to render as editor panels...

vscode.window.createWebviewPanel(
    'catCoding', // Identifies the type of the webview. Used internally
    'Cat Coding', // Title of the panel displayed to the user
    vscode.ViewColumn.One, // Editor column to show the new webview panel in.
    {} // Webview options..
);

I'm trying to render the webview as an additional panel in the sidebar under explorer.

I'm assuming some kind of change to the 3rd arg vscode.ViewColumn.One?

vscode-extensions visual-studio-code view
2 Answers

@Gamma11, thanks for your answer. Definitely helped resolve the "labyrinth of definitions"

Elaborating that out a bit (and maybe simplifying/clarifying the webview-view-sample with a tighter JS (as opposed to TS) version):

1 - In package.json you have the following entry defining the view as a webview that lives in the sidebar explorer:

"views": {
    "explorer": [
        {
            "type": "webview",
            "id": "calicoColors.colorsView",
            "name": "Trillion Files"
        }
    ]
}

2 - Also in package.json the activation that sends to JS

"activationEvents": [
    "onView:calicoColors.colorsView"
]

3 - In JS the event is picked up by vscode.commands.registerCommand

function activate(context){
    var thisProvider={
        resolveWebviewView:function(thisWebview, thisWebviewContext, thisToke){
            thisWebviewView.webview.options={enableScripts:true}
            thisWebviewView.webview.html="<!doctype><html>[etc etc]";
        }
    };
    context.subscriptions.push(
        vscode.commands.registerWebviewViewProvider("calicoColors.colorView", thisProvider);
    );
}

function deactivate() { }

module.exports = {
    activate,
    deactivate
}

There are plenty more properties that can go into thisProvider, but this minimal code gets a panel up and running in the sidebar.

user_49704960

It seems like createWebviewPanel() is actually only for webviews shown in the editor. For the side bar, you have to use registerWebviewViewProvider() as shown in the webview-view-sample linked on that page:

vscode.window.registerWebviewViewProvider('calicoColors.colorsView', provider));

And then specify which view to show it in via package.json - the example uses the Explorer:

{
    "contributes": {
        "views": {
            "explorer": [
                {
                    "type": "webview",
                    "id": "calicoColors.colorsView",
                    "name": "Calico Colors"
                }
            ]
        }
    }
}
user_26317150
Related