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


Project name: Data element bulk editor

The current "Data Elements" application is an editor for data elements ment to be used when creating forms. All kinds of data elements can be added, but all elements contains the same properties. Some properties are required, some are optional. The current application of DHIS2 resides only on server side, appeares outdated and slightly cluttered. Some features are lacking and some are poorly implemented.

  • Edit button loads separate page
  • There are several pages, with x elements on each page
  • Filtering does not work in real time
  • Saving must be done manually
  • Users of the application claim it is too complicated to use

A system to make it easier to bulk edit data elements is necessary.

The task of this project is to create a brand new application, based on the same design as the existing. This will be implemented in HTML, CSS and Javascript, by utilizing the DHIS2 web API.

Architecture and technologies

  • HTML, CSS and Javascript
  • jQuery
  • Bootstrap
  • JSON
  • DHIS2 Web API

Group members

  • Andreas Gansen
  • Ola Græsli
  • Chris Risvik
  • Nikolaos Fatis


Required features

  • No page reloading, everything happens on one single page
  • Always show details view on right side
  • Press element for accordion dropdown editor with requred fields
  • Real time filtering of all elements, without buttons
  • Design is based on the existing DHIS2 application "Data Elements"
  • Two buttons to change between Aggregate and Tracker
  • Display 50 elements by default. Load more content.
  • Adding, removing, editing and cloning functionality must be kept
  • Save button which closes the edit window and refreshes the details view

Ideas and issues

  • Real time filtering may be slow when accessing a high number of elements
  • Filtering has to use all elements, thus load them or do a lookup somehow?
  • We don't want popups. Use dropdown menus which expands
  • Aggregate and tracker buttons are a bit slow, due to having to reload all the elements into the view.
  • If we want to have a details view which changes on mouseover, we need to either load from server each time, or load a json-file with everything upon page load.
  • The "add new" form needs to appear somewhere
  • Get it running on mobile browsers
  • Button for "more settings" in dropdown editor, which expands the dropdown, showing all fields
  • Currently, the if the "Name" header/button sorts alphabetically and reversed when clicked. Should this be implemented as well?

Schedule and progress

  • Create bitbucket repository, 27. oct  Chris
  • Write basic wiki, 27. oct Chris
  • Create template for web page and push to git,  27. oct Ola
  • Added mockups and decided on design and functionality, 29. oct Andreas and Chris
  • Populating list from json-file 5. nov Andreas
  • Implented navbar and filter functionality 6. nov Chris
  • Cleanup, performance tweaking and added edit form functionality 7. nov Ola
  • Implementing details view with mouseover 13. nov Niko
  • Implemented paging which does not reload page, and works with filter. 19. nov Chris
  • Created form template, 24. nov Ola
  • Implement edit functionality with buttons and stuff Niko and Chris

Mockup and screenshots



  • Milestone 1: 1st November: Document features and architecture on Wiki
  • Milestone 2: 15th November: First bare-bone versjon - static HTML and Uploadable as DHIS web app
  • Milestone 3: 30th November: Finished, if applicable also with mobile app
  • Final delivery: 8th December
  • Presentation: 9th December

Repository has been added with read access



- Create zip file, use zip -r

- Search "Management" in Apps at the demo server.

- upload the zip file.

- The source is than extracted to: /var/lib/tomcat/webapps/ROOT/apps/