Wiki Spaces

Documentation
Projects
Resources

Get Help from Others

Q&A: Ask OpenMRS
Discussion: OpenMRS Talk
Real-Time: IRC Chat | Slack

Projects

Page tree

Versions Compared

Key

  • This line was added.
  • This line was removed.
  • Formatting was changed.

Table of Contents

What is this?

openmrs-esm-patient-chart is a patient dashboard microfrontend for the OpenMRS SPA. It provides a simple dashboard with cards detailing the patient's information, such as vitals, demographic and relationships.

...

At it's core, a widget is simply a component. Presently, the majority of work on this application has been using react. A widget might be something like a card displaying conditions, or a set of cards for displaying orders. Widgets are defined using the widgetDefinitions configuration option. 


{

...


"widgetDefinitions":

...

[

...

{

...

"name":

...

"myWidget",

...

"esModule"

...

:

...

"@my-moodule-with-widgets

...

}

...

]
}

The chart rendering engine will attempt to load the above module, using SystemJS to dynamically load my-module-with-widgets. Note: this module must be listed in your import map in order for SystemJS to be able to import it. Please see here for more instructions on managing your import map. On import, System.JS provides an es6 module. Based on the above configuration, the rendering engine expects there to be a property within the module called "myWidget".  If you are creating your own module to serve widgets, please be sure to use the exact same name to export the widget as you use in the widget definition. 

...

A dashboard is a collection of widgets with a layout. We provide a simple layout manager to make it relatively straightforward to configure your dashboards. A dashboard definition consists of the following



{

...


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

...

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

...

This widget may now be referenced in the primaryNavbar (or in a tabbedView) by setting the "view" property of the navbar to the name of the widget. For example, we could have the following:

...

...

{

...

"label":

...

"My

...

Widget",

...

"view"

...

:

...

"myWidget",

...

"path"

...

:

...

"/mywidget"

...

}

What does a full configuration file look like for this module?

...