1

I'm pretty new to VS Code extension development.

I'm trying to create and open a WebViewPanel on click of a Diagnostic target URI.

Till now, I'm able to create a Diagnostic and create a WebViewPanel separately. But with the below code, n number of WebViewPanel gets opened up in one single shot on execution where n = items.length. I'm pretty much stuck at this point. All the examples available in VS Code extension APIs documentation talk about opening a WebViewPanel on execution of a command. But that is something which I'm not looking for.

Is there a way to achieve what I'm trying to get at? Any inputs on this would be of great help.

const output = JSON.parse(stdout);
const items = output['items'];
if (violations && violations.length > 0) {
  const foundDiagnostics: vscode.Diagnostic[] = [];
  for (let index = 0; index < items.length; index++) {
    const element = items[index];
    const html = `
    <div class="path">
       <div class="label"><span class="font-light">${element['description']}</span></div>
    </div>`;
    const panel = vscode.window.createWebviewPanel('demo','Demo', vscode.ViewColumn.Beside, {});
    panel.webview.html = html;

    const code: DiagnosticCode = {
       target: vscode.Uri.parse('https://google.com'),//Sample URI. Need to open/make a WebViewPanel visible on click of this URI
       value: element['id']
    };
  }

  foundDiagnostics.push({
     range: new vscode.Range(0, 1),
     message: element['item_id'] + ': '+ element['name'] + ' (' + element['severity'] + ')',
     severity: vscode.DiagnosticSeverity.Error,
     code
  });

}
Shyam Baitmangalkar
  • 1,075
  • 12
  • 18
  • what is the use of the WebViewPanel? `Diagnostics` show in the `PROBLEMS` Panel – rioV8 Sep 10 '22 at 08:27
  • Yes @rioV8 Diagnostic show up in the PROBLEMS panel. But what I need is, to open up a side drawer (WebViewPanel or anything which is equivalent) kind of a thing to show up some static description on click of the Diagnostic target URI. – Shyam Baitmangalkar Sep 10 '22 at 09:34
  • you create the WebViewPanel when you create the diagnostic, and for each diagnostic at the same time, create the WebViewPanel when the diagnostic is clicked – rioV8 Sep 10 '22 at 12:17
  • the only way you can get a callback on a diagnostic is through the `CodeAction` – rioV8 Sep 10 '22 at 12:29
  • @rioV8 Can you please provide some example for the same? Where I can create a WebViewPanel when diagnostic is clicked? – Shyam Baitmangalkar Sep 10 '22 at 14:40
  • you can't do it on a click, you have to use the code action, search API for `CodeAction` – rioV8 Sep 10 '22 at 15:32
  • @rioV8 Thanks a lot for the inputs. I was able get a callback on a diagnostic using `CodeAction` – Shyam Baitmangalkar Sep 13 '22 at 09:00

0 Answers0