Page Comparison

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:

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

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

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

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

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",
  "description": "Description for the new menu",
  "submenus": []
}

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

e) More examples you can find below:

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"
}]

Explanation of the Uploaded Configuration:

1. Global Menus Example (menuEntry.json):

   • The ConfigMainMenu has several submenus:

     Code Block
     language json
     { "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

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

• 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