GSoC @OpenMRS 1st week

Ayeshmantha Perera
Jun 1 · 4 min read

The coding period begins right after the community bonding period and it’s time for all of us to get started with our project work.

I am working on a project to migrate the reference application to bootstrap 4.0 since the style guide already in the application does not support the responsiveness and there’s a actually a need from the community to migrate it in to the latest version of bootstrap.

Setting up the Project

When working on the style migration I clearly identified that it will be task which involves few modules.

After following the wiki on OpenMRS documentation I found out that setting up the OpenMRS sdk would be a good approach for me to get started on the project.Because the modules which involve in the development can be watched and can do the development to have the results in real time.This is clearly documented in OpenMRS and I think it’s a great way for a new developer to get started working on a project.

In the first week of coding period my target was to cover integrating bootstrap 4 to the application and having Login and dashboard page components migrated in to bootstrap 4.

After having the first discussion after the coding period begins with my mentors (Stephen Senkomago, Juliet Wamalwa) I started working on the tasks for the week.

Task 1 :- Migrating the Login Page to Bootstrap 4.

It was bit a tricky to move forward since I had work on migrating all the component’s to bootstrap.I first went through the code base in order to identify from where to get started and identified that Login.gsp page is sitting separately from other files and have to integrate bootstrap 4 separately in to the file.The main concern was to have the pages as same as it is now after migrating to bootstrap 4 but with a modern look and feel.

How it Looked like before the migration.

How it is after the migration .

To have a clear idea please visit here to view the whole change.

Task 2:- Migrating the Header in inner pages to Bootstrap 4.

It was not a task that we discussed to work on but when starting the development I suggested my mentors if we are thinking about having a responsive header for all pages will have to work on this as a starting step.

In this task I worked on bootstrap migration as well JavaScript changes in order to make the header workable on collapse in mobile phones as well.

Before the migration view on a mobile phone.

After the migration view on the mobile phone.

Task 3:- Migrating the Dashboard page to Bootstrap 4.

As discussed with mentors this was also a main task to work on the fist week since with the bootstrap integration the whole dashboard was converting in to a mess and things was not working well.

Had to introduce mobile queries since the buttons which are links to other services that showing in a grid was not easy to handle on the mobile screens.

And as I previously mentioned it is a must to maintain the same view as in the current reference application.

Before the migration view of the dashboard.

After the migration view of the dashboard.

To have a look at all changes follow this link.

This is it and the amazing first week with OpenMRS and a huge thanks to my mentors who were always supporting me.

Ayeshmantha Perera

Written by

#apache #opensource #openmrs

Welcome to a place where words matter. On Medium, smart voices and original ideas take center stage - with no ads in sight. Watch
Follow all the topics you care about, and we’ll deliver the best stories for you to your homepage and inbox. Explore
Get unlimited access to the best stories on Medium — and support writers while you’re at it. Just $5/month. Upgrade