UI Commons

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