Die Seitenleiste ist der primäre Ort für navigierende und unterstützende Inhalte: Dateiexplorer, Suchpanels, Navigatorbäume und Übersichtslisten. Add-ins registrieren Views in der Seitenleiste, und der Host bettet sie als Panels ein. Mehrere Views können zu einem Accordion gruppiert werden, sodass verwandte Inhalte visuell zusammengehören.

Zurück zur Contributions-Übersicht oder zur Hauptübersicht.

Der Host bietet vier Orte, an denen Views platziert werden können:

"contributes": {
  "views": {
    "sidebar": [
      {
        "id": "assets.navigator",
        "name": "Assets-Navigator",
        "icon": "media/navigator.svg",
        "containerId": "assets-explorer"
      },
      {
        "id": "assets.categories",
        "name": "Kategorien",
        "icon": "media/categories.svg",
        "containerId": "assets-explorer"
      }
    ],
    "panel": [
      {
        "id": "assets.log",
        "name": "Asset-Protokoll",
        "icon": "media/log.svg"
      }
    ]
  }
}

Wenn mehrere Views dieselbe containerId haben, fasst der Host sie zu einem Accordion zusammen. Im Beispiel oben bilden assets.navigator und assets.categories gemeinsam die Gruppe assets-explorer. In der Seitenleiste erscheint ein einzelner Container mit zwei zusammenklappbaren Sektionen.

Dieses Verhalten ermöglicht es, dass verschiedene Add-ins Views in dieselbe Gruppe einfügen. Ein Basis-Add-in könnte den Navigator bereitstellen und ein Erweiterungs-Add-in eine zusätzliche Kategorie-Ansicht — beide landen im selben Accordion, weil sie dieselbe containerId verwenden.

Ohne containerId erhält jede View ihren eigenen Container in der Seitenleiste.

Eine View wird durch einen TWvdSDocumentFrame dargestellt, der über ISidebarService registriert wird:

procedure TAssetPlugin.Activate(const AContext: IExtensionContext);
begin
  AContext.Subscribe(
    FHost.SideBar.RegisterPanel('assets.navigator', 'Assets-Navigator',
      'media/navigator.svg', TAssetNavigatorFrame)
  );
end;

Der Host erzeugt eine Instanz von TAssetNavigatorFrame, wenn die Seitenleiste die View anzeigt. Die Frame-Klasse muss von TWvdSDocumentFrame erben.

Alternativ kann eine View über ITreeViewService mit einem ITreeDataProvider verbunden werden, wenn ein Baumstruktur-Panel genügt:

AContext.Subscribe(
  FHost.TreeViews.RegisterTreeDataProvider('assets.navigator',
    TAssetTreeProvider.Create)
);

In diesem Fall erzeugt der Host automatisch ein TreeView-Control und füllt es mit den Daten des Providers.

Jede View kann Aktionsbuttons in ihrer Titelleiste haben. Diese werden über den view/title-Ort im Menü-Merge deklariert:

"menus": {
  "view/title": [
    {
      "command": "assets.refresh",
      "when": "view == assets.navigator",
      "group": "navigation"
    },
    {
      "command": "assets.add",
      "when": "view == assets.navigator",
      "group": "navigation"
    }
  ]
}

Der when-Ausdruck view == assets.navigator stellt sicher, dass die Buttons nur in der Titelleiste der richtigen View erscheinen. Ohne diesen Filter würden sie in jeder View-Titelleiste auftauchen.

Wenn eine View leer ist — etwa weil noch keine Daten geladen wurden —, kann ein Welcome-Inhalt angezeigt werden:

"viewsWelcome": [
  {
    "viewId": "assets.navigator",
    "content": "Noch keine Anlagen vorhanden.\n[Erste Anlage erstellen](command:assets.create)",
    "when": "!hasAssets",
    "group": "main",
    "order": 1
  }
]

Der content unterstützt einfaches Markdown. Links im Format [Text](command:command.id) werden als Buttons gerendert, die beim Klick den referenzierten Command auslösen. Der when-Ausdruck bestimmt, ob der Welcome-Inhalt angezeigt wird.

Views können programmatisch ein- und ausgeblendet werden:

// View anzeigen
FHost.SideBar.ShowPanel('assets.navigator');
 
// View verstecken
FHost.SideBar.HidePanel('assets.navigator');

Das ist nützlich, wenn ein Add-in auf ein Ereignis reagieren und die Aufmerksamkeit des Benutzers auf ein bestimmtes Panel lenken möchte.

Weiter zur StatusBar oder zurück zur Contributions-Übersicht.