Creating tabs like on patientDashboard

Development
1

Hi all

I am trying to implement tabs in the radiology module like is on the patient dashboard page. I have taken a look at the code of the patientDashboard but i still cannot find the exact code that is giving that tab interface on the patient dashboard. Here is what i have done so far, http://pastie.org/10845407 and this is how it looks,

radiologyDashboardTab.png1600×900 101 KB
. From the screenshots you’ll see i need to make the “orders” link a tab just like on the patient dashboard but i can’t seem to understand much of the code that is been used to achieve this in patientDashboard page here, especially because i see a lot of javascript imports but i can’t tell their purpose. Code for patient dashboard can be found here on github. Any help will be much appreciated.

cc @teleivo, @pascal, @dkayiwa, @wyclif

2

It’s done with CSS magic, use the browser development tools to see the DOM elements and the CSS selectors used:

dashboard.png1890×665 80.5 KB

The JS function changeTab makes visible the contents of the current tab (a DIV) and changes its CSS class

Each tab content is rendered by the openmrs:portlet custom tag.

<openmrs:portlet url="patientDemographics" id="patientDashboardDemographics" patientId="${patient.patientId}"/>

2 Likes
3

thanks @lluismf, will look into this :slight_smile:

4

Hi @lluismf

I am having problem with directory resolution when importing files.

looking at the file attribute below

<%@ include file=“/WEB-INF/template/include.jsp” %>

shows that “/” resolves to the root of openmrs context because when i open “openmrs/” i see the WEB-INF folder

but this other line confuses

<“openmrs”:htmlInclude file=“/scripts/easyAjax.js” />

the file attribute above confuses me because “/scripts” is actually located in “openmrs/WEB-INF/view/scripts” so why was it not something like

<“openmrs”:htmlInclude file=“/WEB-INF/view/scripts/easyAjax.js” />

Now the portlet url attribute[quote=“lluismf, post:2, topic:6371”] <openmrs:portlet url=“patientDemographics” id=“patientDashboardDemographics” patientId=“${patient.patientId}”/> [/quote]

if the portlet is inside a module for example /radiology-omod/src/main/webapp/portlets/discontinuationOrderDisplayPortlet.jsp , how will the url look like

5

@ivange94

I think you need to specify set the attribute moduleId="radiology" of the openmrs:portlet tag

see https://wiki.openmrs.org/display/docs/Module+Portlets

6

All you need should be https://jqueryui.com/tabs