What is this?

...

• git clone https://github.com/openmrs/openmrs-esm-patient-chart
  

• cd openmrs-esm-patient-chart
• npm install
• npm run build
• Serve the built dist/openmrs-esm-patient-chart.js and configure it in your SPA Module's root-config

Then, have a look at the Frontend Implementer Documentation for installing microfrontends for the SPA Module.

...

{

   "name": "dashboardName"
   "title": "title of dashboard"
   "layout": {
        "columns": n
   }
   "widgets": [
       {
          "name": "widget1",
          "esModule" : "@widget1-module"
          "layout" : {
              "columnSpan": n
              "rowSpan": n
          }

       },
       {
          "name": "widget2",
          "esModule" : "@widget2-module"
       }
    ]
}

Dashboards make it relatively straight forward to take a collection of widgets and display them using a grid layout (see css-grid, if you're interested). The layout is simple, it allows a user to say how many columns will be in the grid. You specify this in the config under layout.columns. Within the widgets configuration, you can also specify the number of columns and/or rows you want the widget to occupy using layout.columnSpan and layout.rowSpan properties within the widget. The widgets are rendered in the order they are listed in the config. An example may illustrate things more clearly. Let's set up a dashboard with 4 columns. If widget1 is set to 3 columns, and widget2 is set to 2 columns, then widget1 will be displayed on the first row. Because 3 + 2 = 5 > 4, widget2 will be bumped to the next row and occupy the first two columns. If no layout is specified in the configuration, the dashboard will default to using 1 column and 1 row to display the widget. 

Configuring the primary navigation bar:

...