Is this a standard layout that I should follow on designing Admin OWA UI?

Development
1

When I look at openmrs-module-openconceptlab Admin OWA UI, It layout look like:

layout
layout1094×651 11.3 KB

Is this a standard layout that I should follow on designing Admin OWA UI? @mksd @darius @raff @binduak

2

The official OWA generators bring in the Ref App styling. This is likely not fine for OWAs aimed at Bahmni in general. But it could be ok for those that provide an admin UI.

We could take that convention:

  • If admin UI: everything follows the Ref App styling.
  • If clinical UI: then we want the Bahmni Apps styling in our OWAs, and this raises the question of sharing CSS between Bahmni Apps and OWAs add-ons.

Thoughts?

3

@mksd, it’s possible to override at runtime a styling of an OWA by providing a different css than the one shipped with Reference Application. I don’t think it was properly documented by a dev working on that feature and I need to revisit it.

We could work on creating a Bahmni styling for OWAs. Could you please point me to some code examples of an app using Bahmni styling? Is Bahmni using bootstrap?

4

Great! That would be amazing.

So no Bahmni Apps doesn’t use Bootstrap. @shruthipitta will come back to you with code examples.

How does it work with the current OWAs, how is it ensured that their style is indeed the same as the Ref App? My question is specifically: how do both worlds remain in sync when it comes to styling?

5

It was synced manually once and is shipped with openmrs-contrib-uicommons https://github.com/openmrs/openmrs-contrib-uicommons/tree/master/src/scss. The drawback is that it is for AngularJS (1.x) based OWAs.

Some time ago I extracted styling to a separate pure scss/css project, which can be imported into Reference Application and any OWA written in AngularJS, Angular, React, etc., see https://github.com/openmrs/openmrs-web-style-referenceapplication Additionally you will be able to import scss into a project specific for your distro and customize it easily. Unfortunately, I needed to move to work on something else before I completed that. I am hoping to learn more about the Bahmni styling to take it into account when picking the work up again so thanks for any pointers.

6

Yes I was going to say, we are working on two OWAs at the moment, and both are built on React, so there’s that…

Cool, that’s exciting. We are altogether getting a step closer to an OWA-centric ecosystem that works for multiple distributions.

@shruthipitta will provide the necessary pointers as soon as possible.

7

@mksd @raff Thanks. I will implement the Ref App styling in Bed Management Admin UI.

8

@raff @mksd

Here is an example

  • Login to https://demo.mybahmni.org. Username: superman Password: Admin123
  • Home Page => Admin app => audit log.
  • Here is the html for the Audit log filter and table
  • In this line we have the corresponding class mentioned.
  • The styles are defined in the corresponding file in the styles directory here

Is this what you were looking for? Please let me know if you need anything else.

9

Thanks @shruthipitta! Yes, it is what I was looking for.

10

@raff how do we update our apps styling? If we stick for a second to the Ref App look and feel for example. It will change over time, therefore how do we remain “in sync”, so to say?