Namely, Pickled Meatballs


    1.0.0 • Public • Published


    ESM Package serves as an engine for rendering dashboard widgets based on the configuration served.



    How to Setup?

    • Run npm install to install all the dependencies
    • Run npm start -- --https --port 8082 to start application in dev mode.
    • If you are using with OpenMRS Micro Frontend, update/add the port:url in import-map.json file of openmrs-esm-root-config.
    • Run npm run build for production build.

    Dashboard Configuration Schema

    Refer Architecture Decision Record for more details about configuration schema.

    Architecture Decision Records

    Architecture decision records are available under docs folder.


    • Responsive Layout
    • User Context
    • Breadcrumb
    • Toast Messages

    Responsive Layout

    Dashboard allows the developers/implementers to configure the layout of dashboard & widgets. They can control the layout at 2 levels.

    1. Dashbaord Level

    In configuration, you can configure howmany columns you want to have for the dashboard. By default, dashbaord will contain 2 columns.


      "layout": {
        "columns": 10 //No of columns the dashboard should have. default: 2
    1. Widget Level

    In configuration, you can configure howmany columns & rows a widget can take. By default it will be 1.

      "contents": [
          size: {
            rows:2, // No of rows occupied by widget
            columns:1 // No of columns occupied by widget

    User Context

    Dashboard will set the user related properties as context for the widgets. User context information will be passed as properties for the widgets.

    Below user information are avaialble as properties for widgets.

    1. uuid
    2. locale


    Dashboard will show the breadcrumb based on the title of the dashboard.

    Toast Messages

    Dashboard allows the widgets to show toast messages when they want to some information to the user. All the widgets will a reference property called showMessage which can be called with below signatature to a message to user.

    Sample Usage

    // sample-widget.tsx
    function SampleWidget(props) {
      const showSampleMessage = () =>{
        props.showMessage({type: "success", message: "You clicked the button"});
      return <button onClick={showSampleMessage}>Show Message<button>

    Supported Message Types

    • success
    • error
    • warning


    npm i @openmrs/esm-user-dashboard

    DownloadsWeekly Downloads






    Unpacked Size

    1.04 MB

    Total Files


    Last publish


    • ibacher
    • mogoodrich
    • openmrs-bot
    • rkorytkowski
    • psbrandt
    • djazayeri
    • joeldenning
    • fatmali
    • mksd
    • rrameshbtech
    • brandones
    • jdick
    • bmamlin
    • dkibet
    • florianrappl
    • mdubey
    • dennisforthewin