Edit dhis2 web pages

From mn/ifi/inf5750
Revision as of 09:54, 6 November 2013 by Roland@uio.no (talk | contribs) (Created page with "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 r...")

(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:

<td>

<div class="link-area" style="width:120%">
<p class='header'>
$i18n.getString("relationships")
 

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

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

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.