Feature: #69814 - ModuleTemplate API

See forge#69814

Challenge

Currently all DocHeaders are implemented on their own.

This means we have about 80 DocHeaders which are equal but not the same.

The main challenge is to provide extension developers with all tools they need to build decent backend modules while maintaining control of the docHeader itself.

Solution

We will provide a replacement for DocumentTemplate which provides an easy-to-use API which is on the other hand flexible enough to tackle all tasks we currently think of.

At the same time we will remove the amount of duplicate marker based templates.

The API uses the Fluent-API approach and has been built to supply maximum IDE code completion support.

Parts of a docHeader Currently a typical docHeader is split up into the following sections:

  • Top Bar

    • Context Sensitive Help Icon
    • Select Menu(s)
    • Path
    • RecordInformation incl. Clickmenu

  • Bottom Bar

    • Left Button Bar
    • Right Button Bar

API Components

Buttons

InputButton
Used to generate a <button> element.
LinkButton
Used to generate links
SplitButton
A mixed component accepting multiple button objects and renders them into a condensed form.
FullyRenderedButton
Displays arbitrary HTML code and we highly recommend to use these.

Examples of usages

Adding a button

$openInNewWindowButton = $this->moduleTemplate->getDocHeaderComponent()->getButtonBar()
    ->makeLinkButton()
    ->setHref('#')
    ->setTitle($this->getLanguageService()->sL('LLL:EXT:lang/locallang_core.xlf:labels.openInNewWindow', TRUE))
    ->setIcon($this->iconFactory->getIcon('actions-window-open', Icon::SIZE_SMALL))
    ->setOnClick($aOnClick);

$this->moduleTemplate->getDocHeaderComponent()->getButtonBar()
    ->addButton($openInNewWindowButton, ButtonBar::BUTTON_POSITION_RIGHT);
Copied!

Adding a menu with menu items

$languageMenu = $this->moduleTemplate->getDocHeaderComponent()->getModuleMenuRegistry()->makeMenu()
    ->setIdentifier('_langSelector')
    ->setLabel($this->getLanguageService()->sL('LLL:EXT:lang/locallang_general.xlf:LGL.language', TRUE));
$menuItem = $languageMenu->makeMenuItem()
    ->setTitle($lang['title'] . $newTranslation)
    ->setHref($href);
if((int)$lang['uid'] === $currentLanguage) {
    $menuItem->setActive(TRUE);
}
$languageMenu->addMenuItem($menuItem);
$this->moduleTemplate->getDocHeaderComponent()->getModuleMenuRegistry()->addMenu($languageMenu);
Copied!

ButtonBar Hook

The old module rendering knew a $GLOBALS['TYPO3_CONF_VARS']['SC_OPTIONS']['typo3/template.php']['docHeaderButtonsHook'] hook to manipulate buttons. A similar hook is available in ModuleTemplate API as $GLOBALS['TYPO3_CONF_VARS']['SC_OPTIONS']['Backend\Template\Components\ButtonBar']['getButtonsHook'].

Registering your own hook

$GLOBALS['TYPO3_CONF_VARS']['SC_OPTIONS']['Backend\Template\Components\ButtonBar']['getButtonsHook']['MyExt'] =
    \MyVendor\MyExt\Hooks\ButtonBarHook::class . '->getButtons';
Copied!

Example usage of the hook

class ButtonBarHook {

    /**
     * Get buttons
     *
     * @param array $params
     * @param ButtonBar $buttonBar
     * @return array
     */
    public function getButtons(array $params, ButtonBar $buttonBar) {
        $buttons = $params['buttons'];

        $iconFactory = GeneralUtility::makeInstance(IconFactory::class);
        $button = $buttonBar->makeLinkButton();
        $button->setIcon($iconFactory->getIcon('my-custom-icon', Icon::SIZE_SMALL));
        $button->setTitle('My custom docHeader button');
        $button->setOnClick('alert("Hook works");return false;');

        $buttons[ButtonBar::BUTTON_POSITION_LEFT][1][] = $button;

        return $buttons;
    }
}
Copied!