Making HTML Forms Look Better - Twitter Bootstrap Integration

Software Platform
, ,
1

Hello,

I am looking into how to integrate Twitter Bootstrap to make the data entry forms look better any ideas?

Also does the new UI framework provide any predefined styling for forms, so there is no need to add new styling options?

Thanks in advance

2

Why Bootstrap though? Why not use something like Bourbon Neat, which provides the same features but doesn’t clutter the view with logic that belongs in SCSS/CSS.

3

Bootstrap has pre-built components out of the box and is an existing skillset that is available across a larger number of developers.

We won’t be building any fancy customizations just focusing on building features without worrying about browser compatibility while providing a modern look.

1 Like
4

Understandable.

5

I have resolved this matter by doing the following:

  1. Adding Twitter Bootstrap to my WAR file distribution project based on the openmrs-distro-platform

  2. Overriding the headerFull.jsp file with one that includes the Twitter Boostrap JS and CSS in the build above.

I know #2 is bad but I am not aware of any way to include additional CSS and JS to core (hope to get an alternate option) soon

3 Likes
6

For what it’s worth, you should be able to include bootstrap on a form-by-form basis using this tag (if you are using the htmlformentryui module):

  <uiInclude provider="registrationapp" javascript="field/personAddressWithHierarchy.js" />

… but I know you are looking for something more global…

Mark

7

For pages written in the UI Framework (e.g. most of the Reference Application 2.x ones) see also

https://wiki.openmrs.org/x/h5UvAg#UIFrameworkReferenceGuide-HowdoIincludeajsorcssfilegloballyoneverypage

1 Like