GSoC 2020 Work Product: Modernize OpenEMR’s User Interface

Post date  August 25, 2020
Author  Guan-Wu Su

Guan-Wu Su | Email | GitHub | LinkedIn | Project

I’m Guan-Wu Su, a junior computer science student from Taiwan. Before I tell you what I did for my project, I would like to thank the OpenEMR community and mentors for the opportunity to work and learn with them.

I am especially thankful to my mentors Brady and Tyler who passed on their in-depth knowledge of the codebase, reviewed my pull requests, and provided feedback. Also, I would like to give special thanks to Stephen and Jerry, who helped me whenever I had questions. This has been a wonderful experience, which I will cherish.


My project aimed to improve the user interface, upgrade the codebase, remove outdated syntax, and remove legacy libraries, such as jQuery-UI. This will future-proof the codebase making it more usable, accessible, and maintainable into the future.

The main project ideas are listed below:

  • Improve the Bootstrap user interface, optimize responsive design, and standardize styling via a styling guide.
  • Cleanup redundant code.
  • Remove outdated syntax and styles.
  • Remove legacy javascript components, such as JQuery-UI.
  • Import ESLint to normalize the javascript coding style.


I began work on OpenEMR on the 23th of February with some issue fixes, Since then, at the time of this report, I have had 96 commits brought into the OpenEMR codebase which involved improvements in 452 files and I have 7 pull requests still undergoing code review. A listing of my PR’s can be found below. The majority of the work outlined in the above Introduction has been completed.

The jQuery UI removal has been completed except for one place in the Encounter > Eye Exam that relies on the old jQuery UI draggable framework.

The user interface refinement and redesign has been mostly completed except for the Reports, Miscellaneous, Popups, and About sections and several pages have missing Bootstrap tooltips.

The ESlint project is still a work in progress at the time of this writing. I estimate that I should finish it before the end of GSoC. Each javascript file will be converted to follow the ESlint rules. The javascript that is integrated in PHP files will require another ESlint package for validation.


Merged PRs

Name Issue No. Topic
Issue Fix #2955: Improve #2955
Issue Fix #2947: Add dark and superhero themes #2947
Feat: update all theme screenshot
Issue Fix #2958: Improve Logs Viewer UI #2958 UI Modernization
Issue Fix #2959: Improve language editor UI #2959 UI Modernization
Issue Fix #2989: Form label field alignment issue #2989 UI Modernization
Fix #3004 change jquery ui tooltip #3004 jQuery-UI Removal
Fix #3029 close p tag #3029
Fix #3002 change encounter tabs to bootstrap style #3002 UI Modernization
Fix #3040 empty note content #3040
Fix #3047 remove outdated syntax #3047
Fix #3061 facilities modal #3061 UI Modernization
Fix #3060 Add expand and go to top button cursor #3060
Fix #3062 calendar text link #3062
Fix #3070 refine test table #3070 UI Modernization
Fix #3081 categories button and confirm form #3081 UI Modernization
Fix #3077 remove jqueryui #3077 jQuery-UI Removal
Fix #3104 refine install code set #3104 UI Modernization
Fix #3130: load compendium title #3130 UI Modernization
Fix #3099: add bootstrap table style and remove outdated syntax #3099 UI Modernization
Fix #3164: eob posting - search expand button lost cursor #3164
Fix #3174 patient encounter form field alignment #3174 UI Modernization
Fix #3179 Update font awesome #3179
Fix #2949: add diagnostics to navbar #2949 UI Modernization
fix: update font awesome refresh to sync icon #3213 UI Modernization
feat #3205 : improve diagnostics gui #3205 UI Modernization
fix: modal dialog close icon broken.
Fix #3166 eob invoice bs4 updates #3166 UI Modernization
Fix: register email input lost form-control style UI Modernization
fix: search-plus and search-minus icons broken UI Modernization
Fix #3107 mult language tool style #3107 UI Modernization
Fix #3248 appointment search bs4 #3248 UI Modernization
Fix: css style background url
fix: add miss btn-group style
fix: change to button tag and add FontAwesome icon UI Modernization
Fix #3279 warning closing form #3279
Fix #3003 clickmap remove jquery ui #3003 jQuery-UI Removal
fix #3309: duplicate summary tabs and background color #3309
Fix: remove report.css a tag style.
feat #2888: add float calendar widget #2888 UI Modernization
Fix #3341: Add the Bootstrap style in available appointments #3341 UI Modernization
Fix #3380: Register modal button #3380 UI Modernization
Fix #3387 update jquery #3387
fix #2892: form inner scrollbar #2892
Fix #3383 encounter summary dropdown #3383 UI Modernization
Fix #3005 : Remove EDI History jquery ui #3005 UI Modernization / jQuery-UI Removal
Feat #3414: add highlight config #3414 UI Modernization
Fix #3458: change button layout #3458 UI Modernization
docs: update github issue template
Refactor #3527: remove jquery-ui and change to bootstrap components ui #3527 UI Modernization / jQuery-UI Removal
Fix #3542: remove outdated type attribute #3542
Fix #3007: remove jquery-ui and outdated code part1 #3007 jQuery-UI Removal
feat: add the bootstrap style and remove outdated code UI Modernization
Feat #3595: Multi site administration and database #3595 UI Modernization
Refactor #3542: remove outdated javascript attribute #3542
Refactor: remove outdated font tag
Fix #3542: html doctype attribute #3542
Refactor #3603: refine ippf_upgrade page #3603 UI Modernization
Refactor: refine the flow board page UI Modernization
Refactor: Refine the recall board and new recall pages UI Modernization
Refactor: refine the message section pages UI Modernization
Refactor: refine the patient finder page UI Modernization
Refactor #3700: refine dashboard disclosures page #3700 UI Modernization
Fix: remove invalid code syntax.
fix: firefox vertical align center
Refactor: refine the patient messages and add patient messages pages. UI Modernization
Refactor: remove oudated javascript attribute #3542
Feat: adjust buttons icon UI Modernization
Refactor: refine the prescription list and prescription add pages UI Modernization
Fix medex navbar overflow UI Modernization
Fix #3734: add override css to fix multiple arrow issue #3752 #3734
Refactor: refine the amendments add and edit page. UI Modernization
Refactor #3737: refine dashboard immunizations page UI Modernization
Refactor: remove outdated code and adjusted grid system.
feat: refine the setup page. UI Modernization
Fix #3778: change the add field max length to 63 #3778
Refactor #3779: remove outdated code, and add the bootstrap form style. #3779 UI Modernization
Feat: add the bootstrap input style in dashboard documents. UI Modernization
feat #3804: change visit history icon. #3804 UI Modernization
Refactor #3817: refine past encounters and documents. #3817 UI Modernization
refactor: refine the patient records request. UI Modernization
Refactor: refine the encounter delete form page and modal. UI Modernization
fix: adjust the flow board appt status button style. UI Modernization
Fix #3842: fix the recall board disappear when click the arrow button. #3842
refactor: refine the procedure order on summary page. UI Modernization
Refactor #3267: refine the lab page #3267 UI Modernization

On going PRs

Name Issue No. Topic
chore: add eslint and eslint-config-airbnb ESLint
Refactor: refine the dashboard pages. UI Modernization
Refactor: refine all of the patient visit forms. UI Modernization
Refactor: refine the fee sheet, new encounter form, procedure order pages. UI Modernization
refactor: refine the fee section pages. UI Modernization
Refactor: remove unnecessary oe classes.
refactor: Refine procedure section UI Modernization

All of my PRs