User Interface for Outpatient Module : GSOC 2012


  This module is used by doctors when they are having a patient consultation. All the patients those are screened (screener encounter) but not have OPD encounter are shown for a specific doctor. Then a doctor can view all the patients those are assigned to him, in the patient list. Doctor can view the patient's detailed information by clicking on a specific patient in the patient list and and an OPD encounter with observation and can also place a drug order for a patient.


Major features of the module are given below:

  • The logged in doctor can see the patient list for the OPD for that day.
  • Doctor can see the detailed information about the patient by clicking on the patient in the patient list.
  • Doctor can place an encounter by submitting it from history ,examination and diagnosis tab.
  • Doctor can place a drug order from the treatment tab.
  • Past medication history is also available in the module.
  • Patient can be referred to another doctor according to the problem he have from refer to doc panel.
  • Lab orders can be seen in the lab history by clicking the lab history icon in patient history tab.
  • Problems of a patient can be added in the examination tab by searching the problems in the sign search field and add that sign in the examination list by clicking on the searched sign list.
  • Doctor can view the list of the medicines in the treatment tab and this list is fetched from back-end.

Implementation Details:

The module is implemented using the Sencha Touch API which is a very good javascript API for building touch web applications. Many types of sencha touch components are being used in development of this module. The implementation details are given below:

  1. The is module built on the MVC (model , view and controller) architecture in which model, view and controller are isolated.
  2. The model describes the data models received and shows from back-end and data model to send data to back-end.
  3. View describes how the data is fetched from back-end is shown to the user.
  4. Controller handles all the actions performed by the user and makes the changes in the view accordingly.
  5. Apart from these there is one other thing : store. Store is used to pull and push the data from back-end.
  6. Store uses models to specify the format of the data sent and received.
  7. Store is directly connected to the view (form, list, grid etc.).
  8. In the view, many sencha touch components are used to build the UI, like sencha navigation list is used to make the patient list.
  9. Sencha list is used to make lab history, examination list and treatment summery(drug list).
  10. A plugin for ext grid is used to make grid in sencha and that grid is used to make UI for drug panel, medication history and refer to doctor panel.
  11. Sencha form components like search fields, picker fields, select fields, text fields etc. are used to make the forms.

Major Work Done In This Summer:

  • Work done before mid term evaluation:
    1. Made the patient list using the sencha navigation list.
    2. Made the top half of the more info panel ( RAXAJSS-175 ).
    3. Made UI for history, diagnosis and treatment tab( RAXAJSS-176, RAXAJSS-177RAXAJSS-179 ).
    4. Made UI for refer to doctor, medication history, lab order list and implemented searching and sorting in it( RAXAJSS-176 ).
    5. Added searching and sorting in the patient list ( RAXAJSS-168 ). 
  • Work done after mid term evaluation:
    1. Made UI for examination tab (RAXAJSS-176).
    2. Fetched the patient list from the server using REST calls (RAXAJSS-165, RAXAJSS-166RAXAJSS-167).
    3. Added the fuctionality to add an encounter with the observations using REST calls.
    4. Added functionality to place a drug order using REST calls.

Major Problem Encountered during the GSOC:

  • Making grid in Sencha Touch: This problem was encountered when I had to make grid panel in sencha touch for the refer to doc panel and medication history. The problem was solved by adding a grid plugin in the sencha library for the grid.
  • Making vertical tabs: I had to make a vertical tab panel but sencha touch has no such tab support so I made a vertical group button, linked the buttons to the tab panel, hid the tab bar and added some styles to it.
  • Fetching the patient list from rest calls: Nathan and John helped me in this and finally finished it.
  • Adding an encounter with observations: Nathan and John helped me in this too.

What I have learned :

I am really glad that I worked with such a great organisation and with such talented people during my GSOC-2012. I have learnt a lot during this summer. I got the chance to work on such an amazing web app development API and explore it. I also got chance to work with the REST calls which was an amazing experience.I have learned how to work on a big project with other persons as a team. This summer was such an amazing experience for me to work on an open source project with a great organisation.