Is there any way to add a new dashboard via config instead of editing one of the existing?

Development
1

Is there any way to add a new dashboard via config instead of editing one of the existing?

I understand the instructions on how to work with the nav-group and add new left menu items that link to existing dashboards, but I would like to add a new one and customize it with widgets from scratch.

I see config schema in source code but don’t know how to apply it.

Is there any documentation or examples of how to use it? (version 3.x+)

2

Did you get a chance to look at this:

  1. OpenMRS Frontend 3.0 Documentation for Developers
3

As I understand, there is a way to make a dashboard through a new module and source code. Can it be done somehow through the configuration without creating a module?

4

sure, its possible! that means this repo will surely help you since it defines a generic dashboard component that can be used to create a new dashboard by specifying a configuration object that conforms to the genericDashboardConfigSchema .

Not certain of a already existing doc!

cc// @dkigen @ibacher @vasharma05

5

@alexanderm @thembo42, I couldn’t find any mention of this in the documentation. However, @thembo42 is correct that it is quite easy to figure out from the genericDashboardConfigSchema. So it should look something like the code block below.

{
  "@openmrs/esm-patient-chart-app": {
    "extensionSlots": {
      "patient-chart-dashboard-slot": {
        "add": [
          "dashboard#Dashboard"
        ],
        "configure": {
          "dashboard#Dashboard": {
            "title": "Test group",
            "slot": "my-nav-group-slot"
          }
        }
      }
    }
  }
}

However, I discovered a bug that prevents this functionality from working. In the /home/ymolodkov/data/projects/play/openmrs-esm-patient-chart/packages/esm-patient-chart-app/src/side-nav/generic-dashboard.component.tsx file, the DashboardExtension should be wrapped with the BrowserRouter tag component, otherwise, const location = useLocation() will throw an exception. So, it should look something like this:

export default function GenericDashboard({ basePath }: GenericDashboardProps) {
  const config = useConfig() as GenericDashboardConfig;
  return (
    <BrowserRouter>
      <DashboardExtension title={config.title} basePath={basePath} />
    </BrowserRouter>
  );
}

@dkigen @ibacher @vasharma05 Should I create an issue and then create a pull request for this?

1 Like
6

sure, useLocation hook cannot be used in that context without BrowserRouter component, so yes its an issue!

7

looks correct to me! I suppose this is minimalistic to escape to the doc!

8

@thembo42 @ibacher I have created an issue on the OpenMRS JIRA board: [O3-2075] Unable to add custom dashboard using JSON Application configuration - OpenMRS Issues

I also tried to create a bugfix from a separate branch, but it looks like I don’t have enough permissions to push to the repository. What should I do? Should I fork the repository, create a new branch, and then use upstream to create a pull request?

9

Thanks! Do this exactly!

This too is helpful; https://wiki.openmrs.org/display/docs/Pull+Request+Tips

10

Thanks so much for helping with all of this!

1 Like
11

@thembo42, thank you for pointing me to this. I have created a pull request, could you review it and let me know if I did everything correctly?

Here’s the link:

O3-2075 Fix to display Dashboard from the JSON application configura… by YaroslavTir · Pull Request #1133 · openmrs/openmrs-esm-patient-chart · GitHub

1 Like
12

@yaroslav @alexanderm thanks, looks good to me!

@yaroslav hope you locally tested that and link the PR to the Jira issue pliz!

@ibacher @vasharma05 kindly chip in and review !

13

@thembo42 Definitely, I tested it. I also ran yaml test By the way, does the review include running and checking the bugfix or only looking through the code?

and link the PR to the Jira issue pliz!

done

1 Like