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.
...
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.
TabbedViews
TabbedViews exist to support scenarios where the user may want to have a second level of navigation under the primary navigation bar. In configuration consists solely of defining a name, title and navbar:
{
"name": "myTabbedView",
"title": My Tabbed View",
"navbar": [
{
"label": "View 1",
"view": "view1"
"path": "/view1
},
{
"label": "View 2",
"view": "view2,
"path": "/view2"
}
]
}
The above uses the following configuration:
{
name: "resultsTabbedView",
title: "Results",
navbar: [
{
label: "Overview",
path: "/overview",
view: "resultsOverviewDashboard"
},
{
label: "Vitals",
path: "/vitals",
view: "VitalsSummary"
},
{
label: "Height and Weight",
path: "/heightAndWeight",
...
view: "HeightAndWeightSummary"
}
]
}
In the next section, we discuss the primary navigation bar which uses an identical configuration set up as the navbar in the TabbedView. We discuss the properties within the navbar configuration below.
Primary navigation bar:
{
"primaryNavbar": [
{
"label": "Summary",
"view": "summaryDashboard"
"path": "/summary"
},
{
"label": "Results",
"view": "resultsTabbedView"
"path": "/results"
},
{
"label": "Conditions",
"view" : "conditionsOverview",
"path" : "/conditions"
}
]
}
The above will automatically generate a primary navigation bar with three items. The configuration for an item includes three required properties: label, view and path. The label is what will be displayed to the user on the navigation bar. View is a generic term we will use to refer to what will be displayed by clicking on the link. We have created three views: widgets, dashboards and tabbedViews. Please see below for a detailed description of these concepts. The path property is provided so that you can link to these features from within widgets you create. In the example above, a route will be created to serve conditionsOverview widget at /patient/:patientUuuid/chart/conditions.
...
...
{
"label": "My Widget",
"view" : "myWidget",
"path" : "/mywidget"
}
...
What does a full configuration file look like for this module?
Contributing / Development
...