Skip to content
  • Documentation >
  • Administration >
  • Back office >
  • Back office tabs >
  • Create dashboard tab

Create dashboard tab

To create a new tab in the dashboard, create an EveryoneArticleTab.php file in src/Tab/Dashboard/Everyone. This adds a tab to the Common content dashboard block that displays all articles in the repository.

 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
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
<?php declare(strict_types=1);

namespace App\Tab\Dashboard\Everyone;

use Ibexa\AdminUi\Tab\Dashboard\PagerContentToDataMapper;
use Ibexa\Contracts\AdminUi\Tab\AbstractTab;
use Ibexa\Contracts\AdminUi\Tab\OrderedTabInterface;
use Ibexa\Contracts\Core\Repository\SearchService;
use Ibexa\Contracts\Core\Repository\Values\Content\LocationQuery;
use Ibexa\Contracts\Core\Repository\Values\Content\Query\Criterion;
use Ibexa\Contracts\Core\Repository\Values\Content\Query\SortClause;
use Ibexa\Core\Pagination\Pagerfanta\ContentSearchAdapter;
use Pagerfanta\Pagerfanta;
use Symfony\Contracts\Translation\TranslatorInterface;
use Twig\Environment;

class EveryoneArticleTab extends AbstractTab implements OrderedTabInterface
{
    protected PagerContentToDataMapper $pagerContentToDataMapper;

    protected SearchService $searchService;

    public function __construct(
        Environment $twig,
        TranslatorInterface $translator,
        PagerContentToDataMapper $pagerContentToDataMapper,
        SearchService $searchService
    ) {
        parent::__construct($twig, $translator);

        $this->pagerContentToDataMapper = $pagerContentToDataMapper;
        $this->searchService = $searchService;
    }

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

    public function getName(): string
    {
        return 'Articles';
    }

    public function getOrder(): int
    {
        return 300;
    }

    public function renderView(array $parameters): string
    {
        $page = 1;
        $limit = 10;

        $query = new LocationQuery();

        $query->sortClauses = [new SortClause\DateModified(LocationQuery::SORT_DESC)];
        $query->query = new Criterion\LogicalAnd([
            new Criterion\ContentTypeIdentifier('article'),
        ]);

        $pager = new Pagerfanta(
            new ContentSearchAdapter(
                $query,
                $this->searchService
            )
        );
        $pager->setMaxPerPage($limit);
        $pager->setCurrentPage($page);

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

This tab searches for content with content type "Article" (lines 57-60) and uses the built-in all_content.html.twig template to render the results, which ensures that the tab looks the same as the existing tabs (lines 71-73).

The tab also implements OrderedTabInterface (line 17), which enables you to define the order in which the tab is displayed on the dashboard page. It's done with the getOrder() method (line 45).

Register this tab as a service:

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 }