Image for post
Image for post

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.

Image for post
Image for post

How it is after the migration .

Image for post
Image for post

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.

Image for post
Image for post

After the migration view on the mobile phone.

Image for post
Image for post

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.

Image for post
Image for post

After the migration view of the dashboard.

Image for post
Image for post

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.

Written by

#apache #opensource #openmrs

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store