Bootstrap Standard


(Sherwin Gaddis) #21

I understand what you are saying. Thank you very much for the advice. I
really appreciate it. :slight_smile:

Open Med Practice

OpenEMR Simplicity at its best in cloud based EMR’s
“For those who believe, no proof is necessary. For those who don’t believe,
no proof is possible”

(Sherwin Gaddis) #22

This will be very handy to have since I just ran into this very thing
during the UI upgrade I just did.

Again, thanks for the education. It is truly priceless to have such

Open Med Practice

OpenEMR Simplicity at its best in cloud based EMR’s
“For those who believe, no proof is necessary. For those who don’t believe,
no proof is possible”

(Brady Miller) #23


@juggernautsei , I placed a review on your procedure ui, which looks really nice and also maintains the flavors of the chosen custom themes:

@mdsupport and others, still working on the header template in order to make the ui libraries a 1 liner. Have a PR going with 2 examples (1 without the datetimepicker and 1 with); figured we can also use it to bring in other standard styling libraries(so, 2 lines of code to bring in all standard ui libraries such as datetimepicker,knockout, etc.). thoughts?


(Brady Miller) #24


My PR is testing well and ready to go into the codebase if the community agrees with this strategy. Note that there was a label class that was clashing with the bootstrap label class and doing weird things. So I basically renamed the OpenEMR class to label_custom . Can see the PR here:


(Brady Miller) #25


@juggernautsei 's procedure ui improvements were really nice and was just brought into the codebase.

To provide another example of the standard header user, I also worked this into the improved procedure ui code here to show another example:

To see the code, click on the link at the top of the above graphic.


(Brady Miller) #26


I just brought in the above standard header template with example code into the codebase.

There is now a really nice pull request by Robert that does a full conversion of the procedure order form to bootstrap (just a couple minor bugs to work out before it goes into the codebase):


(MD Support) #27

Frequent complaint about layout forms is the rigidity in display imposed by 4 columns table. In the templates it would be better to include Bootstrap v4 cards (or panels in v3) as basic UI unit to display or edit related groups of items.

(Sherwin Gaddis) #28

That is a great suggestion! Do you have some code to share on how to accomplish this?

(MD Support) #29

Bootstrap site has many examples. Like all bootstrap components, you can convert existing code by simply wrapping containers with card or card-group class. One of the obvious target would be deconstructing demographics or encounter screens and giving sites flexibility to control display of various blocks as per local practice needs.

(Robert Down, BSN, RN) #30

I’ve been tinkering with how to use bootstrap’s grid system for layout based forms, it is what I’ll likely attack next after we get the buttons wrapped up

(Sherwin Gaddis) #31

@robert.down from what I can tell, the LBF has no specific CSS assigned to it. Is that a correct assessment? Just want to pick your brain. Looking at the new.php line 526 there is a css reference there class=‘section’. This style reference can be found in style_light.css line 291.

Are you planning to bring overwrite the styles that are embedded in the code like line 526?

I am not much of a designer by nature. Just trying to hear what your approach is going to be to fix this section of the program.

(MD Support) #32

Although lbf has no specific css, it has a rigid table structure which plays havoc as display size starts getting smaller. On larger screens, display does not utilize full screen effectively.

Fixing any of these issues requires a mapper class that will allow data level access to label / value pairs. At present, we get a complex html code.

(Matthew Vita) #33

Just so you all know, this thread/project is linked in the core roadmap:

If you’d like to, you can adjust the top post in the thread to be similar to the other linked projects. This is a great example: Intelligent Chart Summarization


(R Magauran) #34

I have a bootstrap version of the Flow Board coming that will integrate into openEMR. It will not require MedEx but for those who use MedEx it will light up with all the messaging progress icons. I’ll push it out soon and hopefully it can be reviewed for 5.0.3.

(Brady Miller) #35

hi @rmagauran ,
Looking forward to it. This is also a good reminder for @robert.down to touch up your styling in the Messaging gui:

(Stephen Waite) #36

looks very promising, thanks for all of the work so far @rmagauran

noticed in the medex api readme that said medex is already included in 5.0.0(3) but didn’t find it on a quick github search

(R Magauran) #37

Brady and Robert are doing the review and getting the css to conform to the UI.

The latest code is at here:

The bootstrap patient tracker is just a facelift to match look and feel with the Recall Board. It is “responsive” and can be used on any size display.

We have been beta testing MedEx for the last 2 months. It is pretty much ready to go for 5.0.3 or whatever the next release is (5.1?). (But there are some benefits to being a beta tester!) We have to re-bundle the release packages for earlier versions of openEMR so it can be used if you don’t want to or can’t upgrade to the latest codebase. Of the current beta site, one is an openEMR ver 4.2 production server and it all works (Recall Board, Flow Board, SMS/EMAIL/Voice messaging) without issues.

(Stephen Waite) #38

good to know @rmagauran, thanks for the reply

(Anthony Porter) #39

Yes bootstrap needs to be first and foremost before any user setting. I wouldn’t worry about trying to be “standard”. Just focus on making it a lot better. You can even use some parallax if you need to just to kick it a notch. Similar to our portal page we can not get to work with patients and just us lol. If you’ve seen the page.

It adds some edge to the application keeping it interesting thus not confusing to navigate because the main header is used throughout the app.

Check out the website and you can see where I’m coming from…

(Matthew Vita) #40

Website looks nice.

Worry about trying to be “standard”

Ah, there may be some context missing here. We are trying to make the entire system look and feel seamless so we need to standardize the bootstrap theming and design language in our system.

ZBig and Robert have been doing excellent work in this space. I encourage you to join them! Let me know