How to add a new tab to the side menubar in Akeneo

Introduction

The Akeneo PIM (Product Information Management) system provides a customizable and extensible platform for managing product data. One of the customization options available is the ability to add a new tab to the Akeneo side menubar. In this blog post, we will walk you through the steps to create a new tab and integrate it seamlessly into the Akeneo interface.

Prerequisites

Before we begin, make sure you have the following prerequisites:

• Access to the Akeneo project directory
• Familiarity with PHP and Symfony framework
• Basic understanding of Akeneo’s architecture

Step 1: Create a New Bundle

To start, we need to create a new bundle for our custom functionality. Follow these steps:

1. Locate the Akeneo project directory on your server.
2. Open a terminal and navigate to the `src` directory within your Akeneo project.
3. Create a new directory for your custom bundle. Let’s name it `CustomBundle`.
4. Inside the `CustomBundle` directory, create the necessary files and folders according to Symfony’s bundle structure.

Here’s an example of the directory structure for your custom bundle:

src/
    CustomBundle/
        Controller/
            CustomController.php
        Resources/
            views/
                index.html.twig
        CustomBundle.php

Step 2: Configure the Bundle

Next, we need to configure the newly created bundle. Here’s what you need to do:

1. Open the `CustomBundle.php` file located inside the `CustomBundle` directory.
2. Define the namespace and extend the `Bundle` class.
3. Implement the necessary methods required by the `Bundle` class.

Here’s an example of the CustomBundle.php file:

// src/CustomBundle/CustomBundle.php

namespace CustomBundle;

use Symfony\Component\HttpKernel\Bundle\Bundle;

class CustomBundle extends Bundle
{
}

Step 3: Create the Controller

In this step, we’ll create a controller that will handle the logic for the new tab. Follow these steps:

1. Inside the Controller directory of your CustomBundle, create a new file, e.g., CustomController.php.
2. Define the namespace and extend the AbstractController class from Symfony.
3. Implement the action method that will be responsible for rendering the content of your new tab.

Here’s an example of the CustomController.php file:

// src/CustomBundle/Controller/CustomController.php

namespace CustomBundle\Controller;

use Symfony\Bundle\FrameworkBundle\Controller\AbstractController;
use Symfony\Component\HttpFoundation\Response;

class CustomController extends AbstractController
{
    public function index(): Response
    {
        return $this->render('@Custom/views/index.html.twig');
    }
}

Step 4: Create the Template

To display the content of the new tab, we’ll create a template file. Follow these steps:

1. Inside the Resources directory of your CustomBundle, create a new directory named views.
2. Inside the views directory, create a new file, e.g., index.html.twig.
3. Define the necessary HTML structure and content for your new tab using Twig syntax.

Here’s an example of the index.html.twig file:

{# src/CustomBundle/Resources/views/index.html.twig #}

{% extends '@Akeneo/layout.html.twig' %}

{% block content %}
    <h1>New Tab</h1>
    <p>This is the content of the new tab.</p>
    <code>//

Step 5: Clear the Cache

To ensure that your changes take effect, we need to clear the cache. Run the following command in the terminal:

php bin/console cache:clear

Now you can see Akeneo side menubar in the above image.