Edit dhis2 web pages

From mn/ifi/inf5750
Revision as of 13:58, 20 November 2013 by Roland@uio.no (talk | contribs)

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

If your project involves editing the existing DHIS2 web pages, rather than just making a downloadable web app, you should read the following.

DHIS2 uses Struts and Velocity to render web pages. 

The Velocity templates have the extension *.vm and exist in the src/main/webapp/<project-name>/ directories. 

Each web module is in a separate Maven project, so for example 'Tracker' is in 'dhis-web-caseentry', and the directory to find the .vm files is: src/main/webapp/dhis-web-casentry/

Our suggestion for this web project is that you make minimum changes in the web pages and instead use the web app concept to upload your logic. So you need to add a <script> tag in the relevant page, linking to a Javascript file in your web app, as well as adding other elements such as DIV if you need to identify and replace some content. You can for example use JQuery to replace HTML tags with your own dynamic content. In your web app (uploaded as a DHIS2 app), you can make web api calls to get content from DHIS. 

Make special HTML tags that are app-dependent hidden when the page loads, so that the page looks good also if the app isn't installed on the server. 

As an example, if you want to make changes to the patient dashboard (in Tracker), you want to edit the patientDashboard.vm. If you want a new box after the three boxes on the existing screen, find the text in the page:


<div class="link-area" style="width:120%">
<p class='header'>

Below the closing </td>, insert a new element. For example:

<div id="applet1" class="link-area">
<p class='header'>
A header
<div class="contentProviderTable">
Some content.

In this case you also need to change the style="width:120%" in the div above so that it doesn't overlap with yours. 

And then you add a script tag on the bottom of the page.

<script type="text/javascript" src="/apps/example/js/dashboard.js"></script>

Some of the web pages generated on the web server through .vm templates get loaded dynamically through Javascript, so you may not see their content using 'View source' in your browser. Use the Javascript console in your browser to see the real URLs that are called, and the data that is fetched. 

You may want to pass some other information from DHIS2 to your Javascript app. Such as for example which patient dashboard the javascript is called from, or which program is being browsed. You can do this by adding variables into the Velocity (.vm) files. These variables are inserted into the HTML on the server-side.

One example could be to insert into the .vm file:

$patient.name has uid = $patient.uid and $patient.organisationUnit.uid			

You could put the above into a script-tag and put them in a global javascript variable.

var patientName = $patient.name;
var patientUid = $patient.uid;
var orgunit = $patient.organisationUnit.uid;

If you're editing the patientDashboard.vm file, you may want to insert this at the top, since the patient-variable is used for some other patients (relatives) later in the page.