Studio Developer Manual / Version 2310
Table Of Contents
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.35. Adding a search for content items 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).