Header

The header-hook renders a header (the blue bar with the toolbar in it) into your component. Moreover it takes care of the tab-handling.

Most often you’ll find yourself defining a component which contains the header-hook and methods for manipulating the toolbar or other methods which implement behaviour which is the same over all tabs.

The header-hook in such a component could look something like:

header: function() {
    return {
        tabs: {
            url: 'url/to/tabsData',
            componentOptions: {
                values: this.data
            }
        },
        toolbar: {
            languageChanger: true,
                buttons: {
                save: {},
                settings: {
                   options: {
                       dropdownItems: {
                           delete: {}
                       }
                   }
                }
            }
        },
        title: 'My title'
    };
}

What this hook does is essentially the following:

• It initializes the tabs with the data returned from the defined url. From then on you’ll never have to worry about tabs again. The whole routing to and starting your tabs component is handled automatically if the data returned by tabs.url has the right format.

• It initializes the toolbar with the defined buttons. For information on how to configure buttons and even how to create your own buttons have look Sulu-Buttons.

• It injects the title into every tab (or into your current component if no tabs specified)

Note

The header-hook can also be a function which returns the object seen in the example. Within this function you have access to things like this.options.

Tab Conditions

To enable tab-conditions in the header you have to do following steps:

1. Set the option tabs.componentOptions.values. This object will be used to evaluate the conditions.

2. Emit the event this.sandbox.emit(‘sulu.header.saved’, savedData) with the newly saved data. This will update the tabs and reevaluate the conditions with given data.

List of all available options:

Parameter	Type	Description
title	String|Function	A title which gets injected into every tab-component or into the current component if no tabs exist. If it’s a function it must return a string.
noBack	Boolean	if true no back icon gets rendered
tabs	Object	contains configuration-properties about the tabs
tabs.url	String	url to load the tabs-data from
tabs.data	Object	tabs-data. Either this option or the tabs.url option must be set when working with tabs.
tabs.options	Object	an object which gets merged into the component-options of every tab-component
tabs.componentOptions	Object	an object which gets merged into the component-option of the husky-tab component
tabs.componentOptions.values	Object	which will be used to evaluate the tab display condition
tabs.container	String|Object	a selector or a dom-object into which the tabs-components get rendered
toolbar	Object	contains configuration-properties about the toolbar
toolbar.buttons	Object	an object of sulu-buttons. For the documentation on sulu-buttons have a look Sulu-Buttons.
toolbar.options	Object	an object of options to pass to the husky-toolbar-component
toolbar.languageChanger	Object|Boolean	contains configuration-properties for the language-changer dropdown. If just set to true renders a dropdown with the system-locales and emits events as a callback
toolbar.languageChanger.url	String	An url to load the items for the language-changer dropdown
toolbar.languageChanger.preSelected	String	the preselected language id
toolbar.languageChanger.callback	Function	a callback function which gets executed when the language-changer-dropdown gets changed