close

Filter

loading table of contents...

Studio Developer Manual / Version 2204

Table Of Contents

9.10.1 Adding Buttons to the Header Toolbar

Customizing MainNavigationToolbar and HeaderToolbar is very similar. You will get an example for the latter here.

If you want to add fixed buttons to HeaderToolbar (that is, buttons that can not be modified or removed by the user), you need to add them to either the top or the bottom section of the toolbar.

The given example shows how to use the AddItemsPlugin plugin to add your own buttons after the site selector. Simply add the following code to the plugin rules section of your Studio plugin:

import Config from "@jangaroo/runtime/Config";
import Component from "@jangaroo/ext-ts/Component";
import HeaderToolbar from "@coremedia/studio-client.main.editor-components/sdk/desktop/HeaderToolbar";
import AddItemsPlugin from "@coremedia/studio-client.ext.ui-components/plugins/AddItemsPlugin";

//...
Config(HeaderToolbar, {
  plugins: [
    Config(AddItemsPlugin, {
      items: [
         //...add your component/button here...
      ],
      after: [
        Config(Component, { itemId: HeaderToolbar.HEADER_MENU_BAR_SEPARATOR_ITEM_ID_1 }),
      ],
    }),
  ],
})

Ensuring a proper order of the items in toolbars helps significantly in making the application usable. Note how an after constraint is used to put the new button to a specific place. It uses the framework-predefined itemId of the toolbar separator right to the site selector to describe the desired location of the added button.

To add a simple button with an action, enter the following code inside the <items> element (see Section 9.4, “Localizing Labels” to learn how to localize the label of the button):

import Config from "@jangaroo/runtime/Config";
import Button from "@jangaroo/ext-ts/button/Button";
import ShowCollectionViewAction
  from "@coremedia/studio-client.main.editor-components/sdk/actions/ShowCollectionViewAction";

...
    Config(Button, {
      baseAction: new ShowCollectionViewAction({
        text: "To be Published",
        published: false,
        editedByMe: true,
        contentType: "CMArticle",
      }),
    })
...

Example 9.49. Adding a search for documents to be published


This code snippet will create a search folder button with label text "To be Published" that uses a ShowCollectionViewAction action to open the Library window in a mode that searches for a restricted set of content items (please see the API documentation for ShowCollectionViewAction for more details).

Search Results

Table Of Contents
warning

Your Internet Explorer is no longer supported.

Please use Mozilla Firefox, Google Chrome, or Microsoft Edge.