UI Commons

Owned by Moses Mutesasira
Last updated: Jan 22, 2020
2 min read

What this module does

The  Ui-Commons module is an OpenMRS module that contains the UI Library that has  common  re-usable  JS/CSS/HTML/templates/fragments etc.

To have a look at the existing components in the module , vist the following pages on the qa-server

 How-To Use the Ui -Commons Icons

  From the icons Listed under this page  https://qa-refapp.openmrs.org/openmrs/uicommons/icons.page  

  The icons are categorised into two general sets of icons ,

  1. The Common Icons . These are named as   "icon-<name>" eg   icon-trash  see screen shot below

 

     

     To access/use the above icons in your page

  • You should decorate the page with the decorator "standardEmrPage" from appui module

  • then include   the icon as   <i class="<icon-name>"></i>     see code snippet below 

             

your_page.gsp
<% ui.decorateWith("appui", "standardEmrPage") %> <div > <i class="icon-music"></i> </div>

         The above will display as below 

 

 

2. Fonte Awesome Icons. These are named as "fa-<name>" eg    fa-apple-pay  . ,see screen shot below 

 

        

 

    Note. The above Font Awesome icons are also sub grouped into three classes  They can be accesed either of the following paths

    <i class="fab fa-fw <font_name>"></i>   or   <i class="fas fa-fw <font_name>"></i>  or   <i class="far fa-fw  <font_name>"></i>  (Try out  to get the which path works ) example

your_page.gsp
<% ui.decorateWith("appui", "standardEmrPage") %> <div > <i class="fab fa-fw fa-youtube"></i> <!-- NB if a given Font Awesome icon doesnt display then try to get it by <i class="fas fa-fw fa-youtube"></i> or <i class="far fa-fw fa-youtube"></i> --> </div>

 

the above will display as below 

 

Downloads