Menu Sections

The "Menu Sections" play a pivotal role in structuring and organizing navigation items within the Activator ecosystem. They provide the ability to group various menu items based on their relevance or similarity, allowing users to navigate more efficiently through the interface. By creating clearly defined sections, developers can make navigation more intuitive, reducing confusion and facilitating the search for specific features or content.
The significance of "Menu Sections" lies in their ability to structure the interface in a logical and organized manner, contributing to an enhanced overall user experience. By providing an overview of the different categories of content or features available, these sections enable users to better understand the application's structure and find what they're looking for more easily. Additionally, by grouping menu items under relevant sections, developers can streamline the customization and management of menus, allowing them to quickly and effectively modify the layout and content of the navigation interface based on evolving user needs.

View of Menu Sections

They are created and configured in the Activator admin interface, where developers have the opportunity to define various sections based on the structure and logic of their application. Once created, these sections are made visible in the Activator client interface, where users can explore and interact with them.

Presentation on Activator Admin

In Activator Admin, the 'Navigation Sections' module is located within the menu container, among the items listed under </>Pages and Navigation.

✍️NB : Make sure you are in the System Component main module.

Presentation on Activator Client

To view the menu sections, you need to select a navigation menu from those you have access to. Then you will see the menu sections within the menu container as shown in the image below:

In this image, the menu sections are: SECTION DOC

✍️NB : They are non-clickable.

Create A New Menu Sections

To initiate the creation of a menu section, simply click on the +Add new button. Upon clicking, you'll observe a modification in the menu section's display interface, with the addition of various elements facilitating the configuration of properties associated with the menu sections.

Configuration of the Menu Section

Definition

The content (JSON) of the Definition section is presented as follows:

{
  "title": "MenuCategory",
  "description": "Navigation Menu Category",
  "resourceName": "",
  "titleResKey": "",
  "descResKey": "",
  "items": [],
  "accessControl": {
    "showFor": {
      "roles": [
        "sys.everyone"
      ]
    },
    "hideFor": {
      "roles": []
    }
  }
}

{
"showFor":{
"roles": [
"sys.everyone"
},
"hideFor":{
"roles": []
}
}
}

showFor": {
"roles": [],
"roleFilters":[
{
"roleName":"nebula.roles.headOfService",
"attributeValues":[
"attributeName":"department",
"value": "ui"
]
},
"hideFor":{
"roles": []
}
}

Meta Data

 In the Meta Data section of your Navigation Menu, the JSON file appears as follows:

{
    "ui": {
        "cssClass": "",
        "icon": "fas fa-bars"
    },
    "tags": [],
    "settings": [],
    "accessControl": {
        "read": {
            "roles": [
                "sys.everyone"
            ],
            "roleFilters": [],
            "optionStrict": false
        },
        "modify": {
            "roles": [
                "sys.everyone"
            ],
            "roleFilters": [],
            "optionStrict": false
        },
        "delete": {
            "roles": [
                "sys.everyone"
            ],
            "roleFilters": [],
            "optionStrict": false
        }
    }
}

These properties characterize:

-   "ui" which contains a Json object with two other properties: "cssClass" and "icon." 
     •    "cssClass": allows you to add a CSS class to give the desired style to the navigation menu.
     •     "icon": will associate an icon with the navigation menu name, visible from Activator Client.
-    “tags”:/****************/
-    “settings”:/***********************/

✍️ NB : This property only accepts two types of icons:
•    the Font Awesome Free 5.5.0 icons by @fontawesome - https://fontawesome.com
•    /**********************************/

 -   The accessControl property illustrated by:

"accessControl": {
        "read": {
            "roles": [
                "sys.everyone"
            ],
            "roleFilters": [],
            "optionStrict": false
        },
        "modify": {
            "roles": [
                "sys.everyone"
            ],
            "roleFilters": [],
            "optionStrict": false
        },
        "delete": {
            "roles": [
                "sys.everyone"
            ],
            "roleFilters": [],
            "optionStrict": false
        }
    }

Defines the access permissions of the component manager for this menu item. In the case of creation, it specifies permissions for reading, modifying, and deleting through the properties read, modify, and delete of the accessControl object. Each property of accessControl also has three sorting properties (categorizing each action performed on the menu according to users), which are:

•    "roles": [sys.everyone], granting access to the roles that will be assigned. By default, all users with the sys.everyone role will have access to reading, modifying, and deleting for this menu item.
•    "roleFilters": []/*******************/
•    "optionStrict": false, By default it is set to false but can take true as another value. This property allows defining the hierarchy of roles on the menu.

✋IMPORTANT
If the value of optionStrict is true, it means that a user with a higher or lower role will not have the right to perform the actions that you can perform. Conversely, when the value is false, only users with a higher role will have the right to perform the actions that you can perform.
To better understand, visit the Role Hierarchy.

Modification of a Navigation Menu

Once you have accessed it, understand that the configurations you made during the creation of the menu in the Definition section will now be contained in the Source tab, and those made in the meta data section will now be in the Additional Info tab.

Conclusion

"Menu Sections" play a crucial role in structuring and organizing navigation items within the Activator ecosystem. They allow various menu items to be grouped based on their relevance or similarity, making navigation more intuitive and reducing confusion. By structuring the interface in a logical and organized manner, these sections enhance the overall user experience, making it easier to find specific features or content. Additionally, they enable developers to customize and manage menus efficiently, adapting their layout and content to the evolving needs of users.