Gsoc 2019: Bootstrap as a foundation for Reference Application UI Project

Hi all this will be the public thread for the GSoC-2019 project :- Bootstrap as a foundation for Reference Application UI Project.

1 Like

@ssmusoke , @jwnasambu @suthagar23 guys I went through most of the discussions so are we planning to go head with a new react + redux based application to replace the current reference application.Seems like keeping the groovy based web pages is breaking the bootstrap related components when it’s integrated with bootstrap 4.

And also I have followed up the project openmrs-owa-builtinreports[1].Which is lately build as a sepearate react project in the build time which create the zip file to upload as an owa module to the core.So are we following the same path for the project guys.


And guys are we building he components from the scratch or using components from project.

Good question! have you gone through the objectives on this link?

@jwnasambu yes I went through.Ok so first we have to identify what are the features of the leagacy ui we are taking forward to the next step if am right?

You are right.Have you identified some?

@jwnasambu Not yet.But will be starting from now will let you know soon on this.And thanks alot.

Hi All ,

We are only referring to the project only if am right ? Is it or there are more projects related other than the one mentioned.

Thank you

Am a little bit confused because it has only these groovy pages only Screenshot%20from%202019-05-10%2010-24-17

@ayesh We are not building new components yet, the idea is to build on the changes started in the previous threads that I shared to move from the current custom OpenMRS style guide to one based on the Latest Boostrap

This may require making changes to UI Commons components to match the new styling.

The plan is to start with the GSP pages (Patient Dashboard), and included widgets then move to other parts of the application.

Does this make sense

1 Like

Yeah makes sense.@ssmusoke so still we are starting with has the home.gsp which is the patient dashboard if am right.

@ayesh I shared a link with some work done by Darius in a separate thread - start with those changes and see how to move from there. We are doing the Clinician Facing Dashboard First - its in coreapps

Here is the link to the work done by some community members Kickstarting Integration of Twitter Boostrap for Ref App UI for 2.6 for context and background

Yes as @darius mentioned we can keep both style guide and move forward with bootstrap.So for now we are not replacing the gsp pages ? Keeping the same and adding support for bootstrap or new jsx pages or html pages with ajax calls will replace the components.

Hi @ssmusoke @jwnasambu I went through the patient summary page to do the changes that @darius mentioned.To check with the bootstrap cdn.But the basic template of pages are extracted from the project (Header , Body) []

and the actual style changes are in the project []

for the continuous development it’s recommend to add the projects to the watched-projects normally these modules except uicommons is working as expected as when added to watched -projects.

Would like to know am I missing something to bridge the reference app and core apps with ui-commons module.

And all I was been able to recreate the changes that @darius has done but without the sass change on the ui-commons.As I mentioned previously the sass changes are not reflected. Hm is there a way to compile the sass files other than that all changes are done as it is from the code level it self.

@ssmusoke @jwnasambu And this is how it looks like on patient summary page.



iPhone 5SE/5S Screenshot%20from%202019-05-12%2018-31-12

And this is login page

Web chrome :-


IPhone 5s

@ssmusoke , @jwnasambu And the next thing I want to know is are we removing the gsp pages and making them pure react or html components.And the code changes for the above screens are also done.