Skip to content

Add tab switcher

Tabs switcher allows separating the default Field Types in the Content Type from the Field Types that enhance the content with new functionalities. The best example of such Field Types are SEO or Taxonomy, as these are not typical Field Types but a Field Types that handle functionalities for the whole Content object.

The following example shows how to add a Meta tab with automatically assigned Taxonomy Field Type.

Add Meta tab

Before you start adding the Meta tab, make sure the Content Type you want to edit has Taxonomy Entry Assignment Field Type.

Next, provide the semantic configuration:

1
2
3
4
5
6
7
8
ibexa:
    system:
        admin_group:
            admin_ui_forms:
                content_edit:
                    fieldtypes:
                        ibexa_taxonomy_entry_assignment:
                            meta: true

ibexa_taxonomy_entry_assignment - identifier for the Field Type

meta - when set to true, puts the declared Field Type in the Meta tab

Meta tab

Add custom tab

First, create an event listener in the src/EventListener/TextAnchorMenuTabListener.php:

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
<?php

namespace App\EventListener;

use Ibexa\AdminUi\Menu\ContentEditAnchorMenuBuilder;
use Ibexa\AdminUi\Menu\Event\ConfigureMenuEvent;
use Symfony\Component\EventDispatcher\EventSubscriberInterface;

class TextAnchorMenuTabListener implements EventSubscriberInterface
{
    public static function getSubscribedEvents(): array
    {
        return [ConfigureMenuEvent::CONTENT_EDIT_ANCHOR_MENU => 'onAnchorMenuConfigure'];
    }

    public function onAnchorMenuConfigure(ConfigureMenuEvent $event): void
    {
        // access anchor menu root item
        $menu = $event->getMenu();

        // if you need to access "Content" tab, use ITEM__CONTENT constant:
        $menu[ContentEditAnchorMenuBuilder::ITEM__CONTENT];

        // if you need to access "Meta" tab, use ITEM__META constant:
        $menu[ContentEditAnchorMenuBuilder::ITEM__META];

        // Adding new tab called "New tab"
        $menu->addChild('New tab', ['attributes' => ['data-target-id' => 'ibexa-edit-content-sections-new-tab']]);

        // Add second level item "2nd level item" to previously created "New tab" tab
        $menu['New tab']->addChild('2nd level item', ['attributes' => ['data-target-id' => 'ibexa-edit-content-sections-new-tab-item_2']]);
    }
}

A new custom tab is defined in the line 20, the line 22 defines items for the second level.

For new tabs it is also required to render its section in the Content editing form. To do it, register the UI Component:

1
2
3
4
5
6
    app.my_component:
        parent: Ibexa\AdminUi\Component\TwigComponent
        arguments:
            $template: 'my_template.html.twig'
        tags:
            - { name: ibexa.admin_ui.component, group: 'content-edit-sections' }

Finally, create the templates/my_template.html.twig file:

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
{% extends '@ibexadesign/ui/component/anchor_navigation/primary_section.html.twig' %}

{% set data_id = 'ibexa-edit-content-sections-new-tab' %}

{% block sections %}
    {% embed '@ibexadesign/ui/component/anchor_navigation/secondary_section.html.twig' %}
        {% set data_id = 'ibexa-edit-content-sections-new-tab-item_2' %}
        {% block content %}
            Contents of custom secondary section
        {% endblock %}
    {% endembed %}
{% endblock %}