Class FVTTSidebarControl

Provides the ability to mount and control Svelte component based sidebar panels & tabs in the Foundry sidebar.

The nice aspect about FVTTSidebarControl is that all you have to provide is the sidebar component and the rest is handled for you including automatically widening the width of the sidebar to fit the new sidebar tab. Also by default an adhoc SvelteApplication is configured to display the sidebar when popped out automatically without the need to associate an app instance.

---

To add a new sidebar tab schedule one or more invocations of FVTTSidebarControl.add in a setup hook. You must add all sidebars in the setup hook before the main Foundry sidebar renders. Please review all the expanded options available in the configuration object passed to the add method. At minimum, you need to provide a unique id, icon, and svelte configuration object. You almost always will want to provide beforeId referencing another existing sidebar tab ID to place the tab button before. If undefined the tab is inserted at the end of the sidebar tabs. The default Foundry sidebar tab IDs from left to right are: 'chat', 'combat', 'scenes', 'actors', 'items', 'journal', 'tables', 'cards', 'playlists', 'compendium', and 'settings'.

---

Optionally:

• You can define the icon as a Svelte configuration object to load an interactive component instead of using a FontAwesome icon. This allows you to dynamically show state similar to the chat log sidebar when activity occurs or for other purposes.

• You can provide popoutOptions overriding the default options passed to the default adhoc SvelteApplication rendered for the popout.

• You can provide a class that extends from SvelteApplication as popoutApplication to provide a fully customized popout sidebar that you fully control.

---

There is a method to remove an existing stock Foundry sidebar FVTTSidebarControl.remove. It takes an id field that must be one of the existing Foundry sidebar IDs to remove: chat', 'combat', 'scenes', 'actors', 'items', 'journal', 'tables', 'cards', 'playlists', 'compendium', and 'settings'.

---

There is a method to replace an existing stock Foundry sidebar FVTTSidebarControl.replace. It takes the same data as the add method, but id must be one of the existing Foundry sidebar IDs to replace: chat', 'combat', 'scenes', 'actors', 'items', 'journal', 'tables', 'cards', 'playlists', 'compendium', and 'settings'.

Both the add and replace methods have a data field mergeAppImpl that provides the base implementation for the added / replaced object instance assigned to globalThis.ui.<SIDEBAR APP ID>. When replacing Foundry core sidebar panels like the CombatTracker there is additional API that you must handle found in the given core sidebar app implementation. It is recommended that you implement this API as part of the control / model code passed to the Svelte sidebar component and also set to mergeAppImpl.

---

The FVTTSidebarControl.get method allows you to retrieve the associated FVTTSidebarEntry for a given sidebar by ID allowing access to the configuration data, popout app, and wrapper components that mount the sidebar.

The FVTTSidebarControl.wait returns a Promise that is resolved after all sidebars have been initialized. allowing handling any special setup as necessary.

---

Minimal setup

Hooks.once('setup', () =>
{
   FVTTSidebarControl.add({
      beforeId: 'items',               // Place new tab before the 'items' tab.
      id: 'test',                      // A unique CSS ID.
      icon: 'fas fa-dice-d10',         // FontAwesome icon.
      condition: () => game.user.isGM, // Optional boolean / function to conditionally run the sidebar action.
      title: 'Test Directory',         // Title of popout sidebar app; can be language string.
      tooltip: 'Tests',                // Tooltip for sidebar tab.
      svelte: {                        // A Svelte configuration object.
         class: TestTab                // A Svelte component.
      }
   });
});
Copy