Skip to content
  • Documentation >
  • Administration >
  • Back Office >
  • Back Office tabs >
  • Back Office tabs

Back Office tabs

Many elements of the Back Office interface, such as content view, dashboard or system information, are built using tabs.

Tabs in System Information

You can extend existing tab groups with new tabs, or create your own tab groups.

Tabs

A custom tab can extend one of the following classes:

  • Ibexa\Contracts\AdminUi\Tab\AbstractTab - base tab.
  • Ibexa\Contracts\AdminUi\Tab\AbstractControllerBasedTab - embeds the results of a controller action in the tab.
  • Ibexa\Contracts\AdminUi\Tab\AbstractRouteBasedTab - embeds the results of the selected route, passing applicable parameters.
 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
//...
class EveryoneArticleTab extends AbstractTab implements OrderedTabInterface

    //...
    public function getIdentifier(): string
    {
        return 'everyone-article';
    }

    public function getName(): string
    {
        return 'Articles';
    }
    public function renderView(array $parameters): string
    {

        //...
        return $this->twig->render('@ibexadesign/ui/dashboard/tab/all_content.html.twig', [
            'data' => $this->pagerContentToDataMapper->map($pager),
        ]);

Tip

For a full example of creating a custom tab, see Add dashboard tab.

You need to register the tab as a service. Tag it with ibexa.admin_ui.tab and indicate the group in which it should appear:

1
2
3
4
5
6
7
services:
    App\Tab\Dashboard\Everyone\EveryoneArticleTab:
        autowire: true
        autoconfigure: true
        public: false
        tags:
            - { name: ibexa.admin_ui.tab, group: dashboard-everyone }

The group can be one of the existing components, or your own custom tab group.

Tab order

You can order the tabs by making the tab implement OrderedTabInterface. The order depends on the numerical value returned by the getOrder method:

1
2
3
4
    public function getOrder(): int
    {
        return 300;
    }

Tabs are displayed according to this value in ascending order.

Tip

It is good practice to reserve some distance between these values, for example to stagger them by step of 10. It may come useful if you later need to place something between the existing tabs.

You can also influence tab display (for example, order tabs, remove or modify them) by using the following event listeners:

  • TabEvents::TAB_GROUP_PRE_RENDER
  • TabEvents::TAB_PRE_RENDER

Tab groups

You can create new tab groups by using the TabsComponent.

To create a tab group, register it as a service:

1
2
3
4
5
6
7
services:
    app.my_tabs.custom_group:
        parent: Ibexa\AdminUi\Component\TabsComponent
        arguments:
            $groupIdentifier: 'custom_group'
        tags:
            - { name: ibexa.admin_ui.component, group: 'dashboard-blocks' }

Tag the group with ibexa.admin_ui.component. group indicates where the group is rendered. For a list of possible rendering places, see Injecting custom components.