UI Commons
- Moses Mutesasira
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 ,
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
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