Unable to Add nav-group-slot to nav-group

I am trying to configure the navigation panel, and while I was able to create a navigation group, I am unable to add a group slot to it. I have watched a video tutorial and created the same JSON code as shown, but the navigation group remains empty.

The video:

json:

{
  "@openmrs/esm-patient-chart-app": {
    "Translation overrides": {
      "en": {
        "startVisit": "Check-in"
      }
    },
    "extensionSlots": {
      "patient-chart-dashboard-slot": {
        "add": [
          "nav-group#HIVAdultReturn",
          "nav-group#NCDOutpatient"
        ],
        "configure": {
          "nav-group#HIVAdultReturn": {
            "title": "HIV Adult Return",
            "slotName": "hiv-nav-group-slot"
          },
          "nav-group#NCDOutpatient": {
            "title": "NCD Outpatient",
            "slotName": "heart-nav-group-slot"
          }
        }
      }
    },
    "hiv-nav-group-slot": {
      "add": [
        "allergies-summary-dashboard",
        "appointments-summary-dashboard"
      ]
    },
    "patient-chart-allergies-dashboard-slot": {
      "add": [
        "obs-by-encounter-widget#hiv",
        "obs-by-encounter-widget#diabets"
      ],
      "configure": {
        "obs-by-encounter-widget#hiv": {
          "title": "Hiv Widget",
          "resultsName": "HIV",
          "data": [
            {
              "concept": "1132AAAAAAAAAAAAAAAAAAAAAAAA",
              "label": "Sodium",
              "color": "greeen"
            },
            {
              "concept": "856AAAAAAAAAAAAAAAAAAAAAAAA",
              "label": "Viral Load",
              "color": "red"
            }
          ],
          "table": {
            "pageSize": 20
          }
        },
        "obs-by-encounter-widget#diabetes": {
          "title": "Diabetes Widget",
          "resultsName": "HIV",
          "data": [
            {
              "concept": "1132AAAAAAAAAAAAAAAAAAAAAAAA",
              "label": "Sodium",
              "color": "green"
            },
            {
              "concept": "856AAAAAAAAAAAAAAAAAAAAAAAA",
              "label": "Viral Load",
              "color": "red"
            }
          ],
          "table": {
            "pageSize": 20
          }
        }
      }
    }
  }
}

Could you please assist me with this issue? @ibacher @jexsie @jexsie (I mentioned you all here because you have already helped me a lot with configuring the navigation group :slight_smile: )

hi

Always check dev tools , they will give you initial pointers!

These error messages are telling you that some configuration keys that were provided in the configuration file are not recognized by the app, and so they are being ignored. Specifically, the keys “@openmrs/esm-patient-chart-app.hiv-nav-group-slot” and “@openmrs/esm-patient-chart-app.patient-chart-allergies-dashboard-slot” are not being recognized.

for it to be recognised, you need to modify the "nav-group#HIVAdultReturn" like so;

That should work perfectly fine! though still you need to be aware oft this; Screenshot from 2023-04-21 10-34-54

This is a JSON configuration file that provides settings and configurations for the @openmrs/esm-patient-chart-app module. The file defines several configuration settings such as translation overrides, extension slots, and widget configurations. The extensionSlots object contains two properties, add and configure, which specify which nav groups to add to the patient-chart-dashboard-slot extension point and how to configure them respectively.

can you try this!

{
  "@openmrs/esm-patient-chart-app": {
    "Translation overrides": {
      "en": {
        "startVisit": "Check-in"
      }
    },
    "extensionSlots": {
      "patient-chart-dashboard-slot": {
        "add": [
          "nav-group#HIVAdultReturn",
          "nav-group#NCDOutpatient"
        ],
        "configure": {
          "nav-group#HIVAdultReturn": {
            "title": "HIV Adult Return",
            "slotName": "hiv-nav-group-slot",
            "add": [
              "allergies-summary-dashboard",
              "appointments-summary-dashboard"
            ]
          },
          "nav-group#NCDOutpatient": {
            "title": "NCD Outpatient",
            "slotName": "heart-nav-group-slot"
          }
        }
      },
      "hiv-nav-group-slot": {
        "add": [
          "allergies-summary-dashboard",
          "appointments-summary-dashboard"
        ]
      },
      "patient-chart-allergies-dashboard-slot": {
        "add": [
          "obs-by-encounter-widget#hiv",
          "obs-by-encounter-widget#diabets"
        ],
        "configure": {
          "obs-by-encounter-widget#hiv": {
            "title": "Hiv Widget",
            "resultsName": "HIV",
            "data": [
              {
                "concept": "1132AAAAAAAAAAAAAAAAAAAAAAAA",
                "label": "Sodium",
                "color": "greeen"
              },
              {
                "concept": "856AAAAAAAAAAAAAAAAAAAAAAAA",
                "label": "Viral Load",
                "color": "red"
              }
            ],
            "table": {
              "pageSize": 20
            }
          },
          "obs-by-encounter-widget#diabetes": {
            "title": "Diabetes Widget",
            "resultsName": "HIV",
            "data": [
              {
                "concept": "1132AAAAAAAAAAAAAAAAAAAAAAAA",
                "label": "Sodium",
                "color": "green"
              },
              {
                "concept": "856AAAAAAAAAAAAAAAAAAAAAAAA",
                "label": "Viral Load",
                "color": "red"
              }
            ],
            "table": {
              "pageSize": 20
            }
          }
        }
      }
    }
  }
}

cc// @ibacher @vasharma05 @dkigen @bistenes @jnsereko @heshan @dkayiwa @jexsie

That’s basically it @thembo42. Everything has to be inside extensionSlots.

@yaroslav, checkout this documentation here about extension configuration for more info. I believe there’s nowhere this config you provided @yaroslav is being documented or referenced. If not so, then feel free to update.

1 Like

Yep. it’s working now, you guys are awesome! :slight_smile:

@thembo42 Thank you for the tips. Yesterday, I was trying to figure it out through the code, but as a mostly backend developer, it was tricky for me.

@jexsie This documentation is exactly what I needed, and I couldn’t find it yesterday. I think it would be helpful to add this link to the Wiki page.

1 Like

Yeah, sure @yaroslav. But this was an API proposal for the extension system, maybe before implementation.
@ibacher is better to clarify if this should be linked onto the wiki

1 Like

I wouldn’t link directly to the RFC, but we probably could incorporate some of that into the Wiki, e.g., where we have the other implicit configuration settings documented.

2 Likes

how is that?

[Configure nav groups](O3 Implementer Documentation: Set Up, Configure & Deploy - Projects - OpenMRS Wiki

If you lacked the context of this Talk post and saw that example, does it help you to understand the concepts involved? IMO, there’s too much going on in that example for it to be useful on what is already a very long page of documentation. Inter alia, there are two configuration settings (remove and order), which are not in this example. There’s a lot that’s extraneous (Translation overrides, modifying multiple slots, detailed configuration of the obs-by-encounter-widget), which are useful in a demo video, but not in a Wiki of the example (having extraneous material makes it hard for someone without the appropriate context to figure out what they need to do). In general, for example on the Wiki, we want minimal things that explain a single key feature (i.e., each slot has four implicit configuration keys, add, remove, order, and configure).

2 Likes

sure, thanks @ibacher let me minimalise this to point out the specific feature(demo’d probably ) I realise some features are already expalined in the macro sections of the wiki.

@ibacher @thembo42 personally, a comprehensive example would be helpful for me, as it would save me time searching/reading an information elsewhere. It would be great if the example were made available in the demo, either as a JSON editor example or loaded upon starting the demo. Additionally, comments could be included in the JSON to make the example more clear.

We should probably have a more comprehensive example somewhere, but linked off of the implementers guide. My concern is to keep the technical stuff on that (large) page focused. We can always add more Wiki pages.

That’s not a bad idea… Might be worth opening an issue to think about what we can provide and how.

We don’t currently support JSON comments in the configuration files, but adding support for that wouldn’t be a bad idea; especially for very large configurations, comments could be very useful.