From mn/ifi/inf5750
Revision as of 18:28, 12 December 2015 by (talk | contribs)

(diff) ← Older revision | Latest revision (diff) | Newer revision → (diff)
Jump to: navigation, search

Project details

Managing organisation units

Webapp for DHIS2 for managing organisation units. A user should be able to view and filter through a list of organisation units and click to see detailed information about each unit, all in one page. The user should also be able to edit and add organisation units. We will use a map to display the location of the different selected units, and the user should be able to click the map to add a new unit with coordinates.


Webapp built with AngularJS framework. We use Materialize for the layout instead of Bootstrap. Angular Leaflet directive for loading and displaying a map, retrieve locations, and mapping location data.

Group members

Simon Jespersen -

Asbjørn Thom -

Torbjørn N. Høiland -


The app will fetch a list of organisation units from DHIS2. A user should be able to view, edit and add these units. There will be functionality for searching and filtering of the organisation units. The user will be able to view the location of an organisation unit on a map and add new units by clicking at the specific location (on the map). When searching for an organisation unit, the results will be displayed on the map. When the user clicks on an already existing organisation unit on the map the page should display detailed information about, and be able to edit, the selected organisation unit.


Milestone 1 (08.11.15)

Document features and architecture on Wiki:

Show understanding of DHIS2 web apps.

What we have done

We made a mockup of the application layout (see Screenshots: Milestone 1) and set up the project in git. The group began researching on the different tools and frameworks (see Project details: Architecture) which was to be used throughout the project. It was decided to go with tabs, instead of separate windows, for the viewing and editing of organisation units.

We then started by creating the webapp with the proposed layout. Then the directive, which was to handle and display the organisation units, was created. The webapp could now fetch, using the controller, organisation units (from DHIS2 Demo) and display these in a list.

Milestone 2 (22.11.15)

First version up and running as DHIS2 web app.

What we have done

We started by solving some file structure and project setup problems. The project required us to use angular factories, but since we were already using the controller for this purpose, moving the functionality was bound to create some merge conflicts. These were solved (although not without some heavy sighs) and the factory was now doing the DHIS2 api calls as intended. The factory now put all the organisation units loaded into the list, but as we noticed - this would be a rather long list. We then added the paging functionality. By default each page displays 50 units now, but we can change this later by sending extra parameters with our API calls.

We then added the loading of detailed information about the selected organisation unit. When the user clicks on the unit (s)he wants to see more information about, the webapp gets the ID of the selected unit and loads the details, which is then added into the, now expanded, list element. Now it was time to implement the adding and editing of organisation units.

The ADD tab was then made active and a form element was implemented. Here we gave the user different information to fill in (name, description, location etc.). One form is used to add new organisation units, and another one to edit already existing ones. The editing is done with the "edit" button in the lower right corner of the collapsible list element. The detailed information that already exists of the selected organisation unit is filled into the form and the user can edit or add new information.

We also began testing with Angular Google Maps (see this) and trying to get this to display the different organisation units.

Filtering and searching were implemented. We did this with a watcher on the search bar. When the user then typed some characters these where used as parameters for the filtering of the loaded organisation units.

Milestone 3 (04.12.15)


What we have done

Added required fields and validation on the ADD/EDIT tabs. This was to ensure the fields (name, location, etc.) that are required to be filled, were filled before the creation of the organisation unit.

Search and filter were only being used when something was being typed in the search bar, meaning the user couldn't filter organisation units based on the group and levels from the dropdown menus. This was because they were used as parameters in the search function, which weren't called until a change occurred in the search bar. This was changed to actually filter based on the dropdown menus, without there being a need for changes on the search bar.

We had some problems using Google Maps and getting it to display markers correctly. It was then decided to try the Angular Leaflet directive for the map instead (see this). This directive was simple and soon up and running while being sufficient in displaying each newly added marker.

Delivery (11.12.15)

Final delivery date. Presentations will be in mid December.

What we have done

We added the functionality for displaying location markers of the search result. Also made it possible to drag the designated marker to a new location, and click on the marker to display the details about the selected organisation unit.

We also did some bug fixes and improvements to the map functionality.


Simon: General setup and layout and providing assistance where needed.

Asbjørn: Map

Torbjørn: Angular factories, Wiki


Milestone 1Here you see the starting idea we had of the webapp layout. Milestone 2(From left to right) - 1. List view of the organisation units, 2. Search bar in use, 3. the ADD new unit form, 4. Searching (and finding) the newly added unit,

5. Detailed view of list element (organisation unit) with edit button, 6. Edit already existing unit, with datepicker in front.

Finished application(From left to right) 1. List of organisation units, showing of a unit. 2. Filtering the list. 3. Add a new unit. 4. Edit a unit

Learning notes

We have gained a better understanding of how the DHIS2 operates and using angular. Specifically creating a web application which used the DHIS2 api to fetch data (in an angular factory) and then displayed the collected information in various ways. We also gained some knowledge of displaying a map and creating/adding the specific functionality.

We also learned how material design should be implemented using Materialize (instead of Bootstrap).

Fixes and improvements

These are just some improvements and small bugs we found, but didn't have time to implement or fix ourselves.


Because of the way the searching functions, it sometimes displays the wrong results. If the user types too fast it might show the result for two searched characters, even though the user typed in three characters. This is due to the ajax calls used.


Choosing the amount of organisation units displayed per page in the list. Also the bar showing pages could get an upgrade.

A "clear search" button would also be useful.



Download link

Download here.