Admin menu creation and access control list managment (ACL) on Magento 2

Add menu in backoffice – On existing section

We will add our menu on Magento BO.
For this example, we will add it on “Content” section

Create file
app/code/Maxime/Jobs/etc/adminhtml/menu.xml

And put this content :

<?xml version="1.0"?>
<config xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xsi:noNamespaceSchemaLocation="urn:magento:module:Magento_Backend:etc/menu.xsd">
    <menu>
        <add id="Maxime_Jobs::job_head" title="Jobs" module="Maxime_Jobs" sortOrder="100" parent="Magento_Backend::content" resource="Maxime_Jobs::job_head" />
        <add id="Maxime_Jobs::department" title="Departments" module="Maxime_Jobs" sortOrder="10" parent="Maxime_Jobs::job_head" action="jobs/department" resource="Maxime_Jobs::job" />
        <add id="Maxime_Jobs::job" title="Jobs" module="Maxime_Jobs" sortOrder="20" parent="Maxime_Jobs::job_head" action="jobs/job" resource="Maxime_Jobs::job" />
    </menu>
</config>

We have 3 instructions here.
– We create the title “Jobs”, which is have “Magento_Backend::content” as parent and “Maxime_Jobs::job_head” as id.
– We create the subtitle “Departments”, which is have “Maxime_Jobs::job_head” as parent, Maxime_Jobs::department” as id and “jobs/department” as action.
– We create the subtitle “Jobs”, which is have “Maxime_Jobs::job_head” as parent, Maxime_Jobs::job” as id and “jobs/job” as action.

You can change the sort_order value to change object position in menu.

We will see that :

If you click on an item, nothing happens. We must create our routes and controllers.
But, we will do that on the next part. We must do other stuff now !

Add menu in backoffice – On a new section

Now, we will move our menu on a new section.

You can delete this code on the XML : parent="Magento_Backend::content"

You will have this code :

<?xml version="1.0"?>
<config xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xsi:noNamespaceSchemaLocation="urn:magento:module:Magento_Backend:etc/menu.xsd">
    <menu>
        <add id="Maxime_Jobs::job_head" title="Jobs" module="Maxime_Jobs" sortOrder="100" resource="Maxime_Jobs::job_head" />
        <add id="Maxime_Jobs::department" title="Departments" module="Maxime_Jobs" sortOrder="10" parent="Maxime_Jobs::job_head" action="jobs/department" resource="Maxime_Jobs::job" />
        <add id="Maxime_Jobs::job" title="Jobs" module="Maxime_Jobs" sortOrder="20" parent="Maxime_Jobs::job_head" action="jobs/job" resource="Maxime_Jobs::job" />
    </menu>
</config>

Now our menu is on the bottom left of the screen :

The icon image is defined by Magento.
When we will learn Magento 2 design part, I will explain you how to change this icon 😉

ACL managment

You may see our new menu because you have got all rights on the BO. But somes users can have somes roles with other permissions.
So, we created new section and new menu, we must declare the new accesses.

Create the file :
app/code/Maxime/Jobs/etc/acl.xml

And put this code inside :

<?xml version="1.0"?>
<config xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xsi:noNamespaceSchemaLocation="urn:magento:framework:Acl/etc/acl.xsd">
    <acl>
        <resources>
            <resource id="Magento_Backend::admin">
                <!--<resource id="Magento_Backend::content">-->
                    <resource id="Maxime_Jobs::job_head" title="Jobs" sortOrder="100" >
                        <resource id="Maxime_Jobs::department" title="Departments" sortOrder="10">
                            <resource id="Maxime_Jobs::department_save" title="Save Department" sortOrder="10" />
                            <resource id="Maxime_Jobs::department_delete" title="Delete Department" sortOrder="20" />
                        </resource>
                        <resource id="Maxime_Jobs::job" title="Jobs" sortOrder="20">
                            <resource id="Maxime_Jobs::job_save" title="Save Job" sortOrder="10" />
                            <resource id="Maxime_Jobs::job_delete" title="Delete Job" sortOrder="20" />
                        </resource>
                    </resource>
                <!--</resource>-->
            </resource>
        </resources>
    </acl>
</config>

You can see 2 commented lines, you must decomment its if you left the menu on “Content” section.
Else, you can delete this 2 lines.

This XML define the permissions tree.
So, in order to the new permissions, you must go on :

System > Permissions > User roles

Choose the role you want.
Click on “Role ressources” and choose “custom” on the select field.

You will see our new permissions :

Now we’ve got our menu, and we can manage permissions.
Next step is to create admin routes and controllers !