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

• For icons  ,see https://qa-refapp.openmrs.org/openmrs/uicommons/icons.page 
• For java script UI components , see https://qa-refapp.openmrs.org/openmrs/uicommons/javascript.page 
• For re-usable fragments ,see https://qa-refapp.openmrs.org/openmrs/uicommons/fragments.page 
• For more style guides , see https://qa-refapp.openmrs.org/openmrs/uicommons/styleGuide.page

 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 

<%
    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

<%
    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

• For Implementers , The omod can be downloaded from https://addons.openmrs.org/show/org.openmrs.module.uicommons
• For Developers , source code is found  at https://github.com/openmrs/openmrs-module-uicommons