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

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

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?

Solution

@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, thisToken){
            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.