In most cases you will use an action to open your own tab. In the example, a button is plugged into the Favorites toolbar. Clicking the button triggers an OpenTabAction to open the browse tab.

import Config from "@jangaroo/runtime/Config";
import EditorMainNavigationToolbar from "@coremedia/studio-client.main.editor-components/sdk/desktop/maintoolbar/EditorMainNavigationToolbar.ts"
import AddItemsPlugin from "@coremedia/studio-client.ext.ui-components/plugins/AddItemsPlugin";
import Button from "@jangaroo/ext-ts/button/Button";
import OpenTabAction from "@coremedia/studio-client.main.editor-components/sdk/actions/OpenTabAction";
import BrowseTab from "./BrowseTab";

Config(EditorMainNavigationToolbar, {
  plugins: [
    Config(AddItemsPlugin, {
      items: [
        //...
        Config(Button, {
          itemId: "browseTab",
          baseAction: new OpenTabAction({
            tab: Config(BrowseTab),
          }),
        }),
      ],
      //...
    }),
  ],
})

The BrowseTab from above is configured as the tab configuration parameter of OpenTabAction. A new browse tab is then opened every time when clicking the button. In addition, all open browse tabs will be reopened in the work area after the reload of CoreMedia Studio. For that CoreMedia Studio stores the xtypes of the open tabs as user preference when opening, closing or selecting tabs. When loading the work area instances of the xtypes are generated and added to the work area. This is basically why you should configure each tab in a separate TypeScript class. Nevertheless, you will see below in Section 9.17.4, “Storing the State of a Work Area Tab” how you can save other state of the tab than the xtype in the user preference.