Configuration of Main Menu and Submenus

Overview

The menu configuration functionality allows administrators to define and manage the main menu structure for the application. This includes:

Adding or updating menu entries with attributes like position, name, and description.
Linking menus to existing application logic using unique id values.
Organizing menus with a hierarchical structure, including support for predefined submenus.
Controlling the display order of menus and submenus through the position attribute.
Leveraging icons and descriptions to enhance user navigation and experience. (TBD)

Submenus are restricted to those pre-defined in the application's frontend logic, ensuring consistency and preventing conflicts.

Key Concepts

Menu ID and Definition:

Each menu in the configuration file is uniquely identified by an id.
Example from your configuration:

{
  "position": 5,
  "id": "ConfigMainMenu",
  "name": "Configuration",
  "icon":"Assignment",
  "description": "Administration Panel"
}

id: Unique identifier (ConfigMainMenu).
name: Display name for the menu.
description: A short summary of the menu's purpose.
icon: A material-UI icon name. Examples: Assignment, HowToReg, Payment, Dashboard, Ticket, Person

Submenus:

Submenus belong to a specific parent menu and are identified using their id.
Example:

{
  "position": 4,
  "id": "admin.products",
  "icon":"Assignment"
}

Submenus cannot currently be added outside predefined application logic.
These IDs must match the application's implementation to function properly (see 'list of possible submenus configs in openIMIS').

Position:

position determines the order in which menus or submenus are displayed.
Menus and submenus with lower position values appear higher in the menu hierarchy.

Step-by-Step Setup Instructions

1. Adding a New Menu:

a) Navigate to the Django Admin panel.

b) Go to Module Configurations and locate the relevant module (e.g., fe-core).

c) Edit the Config field to include a new menu entry:

Example:

{
  "position": 12,
  "id": "NewMainMenu",
  "name": "New Main Menu",
  "icon":"Assignment",
  "description": "Description for the new menu",
  "submenus": []
}

d) Add this JSON object under the "menus" array.

e) More examples you can find below: , - you can try with those ones and try different menu configuration which fits to your implementation

f) Save the configuration.

2. Mapping to Existing Menus:

To reuse or match menus already defined in your source code, use the same id as in the application's logic. For example:
- id: "OpenSearchReportsMenu" matches the "Dashboard" menu in your source.

3. Adding Submenus:

Submenus are tightly bound to the application's backend logic. You cannot create new submenu entries unless they exist in the application's source code.

For existing menus:

Use the id of the submenu to link it.

Example for `ConfigMainMenu`:

submenus: [{
  "position": 4,
  "id": "admin.products",
  "icon":"Assignment"
}]

Explanation of the Uploaded Configuration:

Global Menus Example (menuEntry.json):
- The ConfigMainMenu has several submenus:
  { "position": 5, "id": "AdminMainMenu", "name": "Configuration", "submenus": [ { "position": 4, "id": "admin.products" }, { "position": 3, "id": "admin.locations" }, ... ] }

The AdminMainMenu matches to existing admin menu: https://github.com/openimis/openimis-fe-admin_js/blob/develop/src/components/AdminMainMenu.js

Custom Menus Example (menuCustom-onlycustom.json):

The SocialRegistryMainMenu is defined with specific submenus:

{
  "position": 1,
  "id": "SocialRegistryMainMenu",
  "name": "Social Registry",
  "submenus": [
    { "position": 2, "id": "socialProtection.benefitPlans" },
    ...
  ]
}

There are no matching menus within application therefore the new menu entry will be created which will contain provided submenus.

Limitations

New submenu additions must align with frontend logic, as they are not dynamically processed from the configuration files.
Routes are for frontend display purposes and have no backend functionality unless mapped correctly. (this will be developed as the next steps)

Keeping old approach

If you want to keep old approach, just leave 'menus' as empty array or do not put this key into configuration file. In that case menu will be populated in a deault, old way based on the order of modules in openimis.json.

Examples

Menu entries for user with specific, restricted role in the system

Menu entries for admin user

Menu entries for admin user

Menu entries for user with specific, restricted role in the system

Menu entries for admin user

Menu entries for user with specific, restricted role in the system

Configuration of Main Menu and Submenus

Overview

Key Concepts

Step-by-Step Setup Instructions

1. Adding a New Menu:

Example:

2. Mapping to Existing Menus:

3. Adding Submenus:

Example for `ConfigMainMenu`:

Explanation of the Uploaded Configuration:

Limitations

Keeping old approach

Examples

Did you encounter a problem or do you have a suggestion?

Please contact our Service Desk

Configuration of Main Menu and Submenus

Overview

Key Concepts

Step-by-Step Setup Instructions

1. Adding a New Menu:

Example:

2. Mapping to Existing Menus:

3. Adding Submenus:

Example for ConfigMainMenu:

Explanation of the Uploaded Configuration:

Limitations

Keeping old approach

Examples

Did you encounter a problem or do you have a suggestion?

Please contact our Service Desk

Example for `ConfigMainMenu`: