Solution Building: 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.

NOTE: if someone want to test this, just pull frontend modules (including assembly module openimis-fe_js) from feature/OSB-11 branch. And just try it.

Key Concepts

1. Menu ID and Definition:

• Each menu in the configuration file is uniquely identified by an id.

• Example from your configuration:

• id: Unique identifier (ConfigMainMenu).

• name: Display name for the menu.

• description: A short summary of the menu's purpose.

2. Submenus:

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

• Example:

• 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').

3. 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.

Open

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:

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:

Explanation of the Uploaded Configuration:

1. Global Menus Example (menuEntry.json):

   • The ConfigMainMenu has several submenus:

• The AdminMainMenu matches to existing admin menu: openimis-fe-admin_js/src/components/AdminMainMenu.js at develop · openimis/openimis-fe-admin_js

2. Custom Menus Example (menuCustom-onlycustom.json):

• The SocialRegistryMainMenu is defined with specific submenus:

• 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.

• Icons and 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

Open

 

Menu entries for admin user