From mn/ifi/inf5750
Jump to: navigation, search

In this project we made a web application for managing Organization Units within DHIS2. The application has a easy to use interface with a map as the main component. The organization units are shown in the map as polygons with colors and markers. The application also features a dynamic (real time) search, filtering possibilities and a sidebar for displaying and editing information about the units.

Project details

In this project we have made a web application to be used within DHIS2. DHIS2 is an open source health information system where you can easily collect, display and analyze reported health data.

"In DHIS 2 the location of the data, the geographical context, is represented as organisational units. Organisational units can be either a health facility or department/sub-unit providing services or an administrative unit representing a geographical area (e.g. a health district)." [1]

Managing Organization Units[2] is an application to get a better overview of organization units within the DHIS2 system. The application will be a single page application with a map displaying all org. units as polygons and markers with their correct coordinates. By clicking on a marker you will get all available information on a unit. You will also be able to edit these units if necessary. By clicking on an empty point on the map you will be asked to add a new org. unit.

Since there are a lot of organization units there will be implemented a dynamic search and filtering to help simplify the search for a specific organization unit.




This is our first sketch.

Our main focus with the web application design was a simple and user-friendly solution. Here is the result.

Screenshots and screen flow

Search or click on the map.


Map operations

You can click on the map to see information or update the information in the sidebar.

If you want to add a new organization unit, you can drill down to your location and fill in the information in the sidebar.

Click on map - show popup modal
See details - show sidebar
Update details in sidebar
drill down once or twice more
Add new
Form in sidebar

Search operations

You can also search to see more information and details about your facility, both in sidebar and on map.

You can filter your search after ownership, type and location.

Filter search
Show sidebar with search details

Group members

Erik Haider Forsén -

Julie Hill Roa -

Roza Moustafa -

Yrjan Fraschetti -


This application will be a new module within the DHIS2 web app. This will be a easier, more visual way of doing tasks on organization units than what is possible within the DHIS2 web app today.

The app it self will be a SPA which get organization units and other information from the DHIS2 REST API. This app will therefore not store any information other than locally before sending the updated/new information back to the DHIS2 rest API.


  • Bootstrap
  • HTML 5 & CSS 3
  • Angular 2.0 (alpha v. 48)
  • DHIS2 Web app
  • Google Maps JavaScript API
  • REST to communicate with DHIS2

It is a requirement to use Angular and since we had a lecture about Angular 2.0 and it is a new technology, the group wanted to test it out and see if it suited our project. So far there are no indication that it won't, so we are developing the application in Angular 2.0.

Requirements and features


The requirements are listed below:

Make a web app in order to manage organization unit easily.

The user should be able to:

  • Search for an org. unit and get facility details, using live search 
  • Filter your search based on levels
  • Present the information pertaining to the chosen facility in a drop-down menu beneath its name 
  • Locate on map
  • Edit coordinates
  • Edit org. unit details
  • Add a new facility by clicking on the map


All of these requirements has been implemented as features in the final application. We also wanted to implement statistics on organisation units and a list of all units, but in the end we did not find the time to implement these features in a good way.

Development and tasks


Since the project started in November we have worked toghether every Thursday. We have mostly worked on our tasks by our self, but during the project we have had 2 sessions of pair programming. This has proven to be very efficient for solve big problems that each of us would otherwise have been stuck on for a long time .


We devided the project into sevral parts or tasks. The tasks and the group member responsible are listed below:

  • Map integration and displaying of data - Julie
  • Design - Roza
  • Search - Erik
  • Filter - Yrjan
  • Interaction (displaying and editing data) - Erik

Documented learning

Non of the members in the group had any previous experience with Angular 2, and thus we have learned a lot about this new programing language. The fact that Angular 2 is still in an alpha stage, means that the documentation available is somewhat sparse. This does in turn mean that finding answers to problems we ran into during the project was sometimes impossible. Because of this, some of the code in the final application can be categorized as "hacked", meaning that it is not good code practise, or not used in the way it was intended.

In the same way as all of the group members where unfamiliar with Angular 2, we where also unfamiliar with DHIS 2 and its web API. We have learn a lot about how development in DHIS 2 works, and how the web API is structured. Since the web API is very rich and large, it took some time to understand how to work with it efficiently.


Milestone 1 - due 08.11.2015

  • Document features and architecture on wiki:

See features paragraph.

We have also made a sketch of the design/layout of the application.

We have set up a project in git. This project contains a skeleton with a good Angular 2.0 structure for the web app.

We looked at googlemaps and made an API-key to be able to use their map-API .

All group members have done Angular 2.0 quick start and tutorials.

We have also looked into testing for javascript with Jasmine and tried to test one method.

  • Show understanding of dhis2 web app:

We have downloaded the dhis-live package and deployed it on our local computers. We have also switched from H2 db to postgres. We have populated our databases with sample data from Sierra Leone. We managed to upload our "hello-world"-app into dhis.

We have also browsed the dhis app too see other app examples, and successfully added a new organization unit.

We have started looking into retrieving data from the dhis API, but so far it is difficult with Angular 2.0 (need to learn more).

Milestone 2 - due 22.11.2015

  • First bare-bone version - static HTML
  • Uploadable as DHIS2 web app.

Milestone 3 - due 04.12.2015

  • Finished, if applicable also with mobile app.

Final delivery - due 13.12.2015

  • Presentation: Wednesday 16th of December at 14.00.

Suggested improvements to API

The API were rich and had most of the features we wanted. One feature that was lacking (or maybe just not documented), was how to associate a organisationUnit with an organisationUnitGroup. We could not find any information on it in the documentation, and were unsuccessful in our many attempts to add organisationUnitGroup to both new and existing organisationUnits.


Git repo:

Zip file of final product: