{"type":"doc","content":[{"type":"heading","attrs":{"level":2},"content":[{"text":"What this module does","type":"text"}]},{"type":"paragraph","content":[{"text":"The Ui-Commons module is an OpenMRS module that contains the UI Library that has common re-usable JS/CSS/HTML/templates/fragments etc.","type":"text","marks":[{"type":"textColor","attrs":{"color":"#172b4d"}}]}]},{"type":"paragraph","content":[{"text":"To have a look at the existing components in the module , vist the following pages on the","type":"text"},{"text":" qa-server","type":"text","marks":[{"type":"link","attrs":{"href":"https://qa-refapp.openmrs.org/openmrs/login.htm"}}]}]},{"type":"bulletList","content":[{"type":"listItem","content":[{"type":"paragraph","content":[{"text":"For icons","type":"text","marks":[{"type":"strong"}]},{"text":" ,see ","type":"text"},{"text":"https://qa-refapp.openmrs.org/openmrs/uicommons/icons.page","type":"text","marks":[{"type":"link","attrs":{"href":"https://qa-refapp.openmrs.org/openmrs/uicommons/icons.page"}}]},{"text":" ","type":"text","marks":[{"type":"textColor","attrs":{"color":"#172b4d"}}]}]}]},{"type":"listItem","content":[{"type":"paragraph","content":[{"text":"For java script UI components","type":"text","marks":[{"type":"strong"}]},{"text":" , see ","type":"text"},{"text":"https://qa-refapp.openmrs.org/openmrs/uicommons/javascript.page","type":"text","marks":[{"type":"link","attrs":{"href":"https://qa-refapp.openmrs.org/openmrs/uicommons/javascript.page"}}]},{"text":" ","type":"text","marks":[{"type":"textColor","attrs":{"color":"#172b4d"}}]}]}]},{"type":"listItem","content":[{"type":"paragraph","content":[{"text":"For re-usable fragments","type":"text","marks":[{"type":"strong"}]},{"text":" ,see ","type":"text"},{"text":"https://qa-refapp.openmrs.org/openmrs/uicommons/fragments.page","type":"text","marks":[{"type":"link","attrs":{"href":"https://qa-refapp.openmrs.org/openmrs/uicommons/fragments.page"}}]},{"text":" ","type":"text","marks":[{"type":"textColor","attrs":{"color":"#172b4d"}}]}]}]},{"type":"listItem","content":[{"type":"paragraph","content":[{"text":"For more style guides","type":"text","marks":[{"type":"strong"}]},{"text":" , see ","type":"text"},{"text":"https://qa-refapp.openmrs.org/openmrs/uicommons/styleGuide.page","type":"text","marks":[{"type":"link","attrs":{"href":"https://qa-refapp.openmrs.org/openmrs/uicommons/styleGuide.page"}}]}]}]}]},{"type":"heading","attrs":{"level":2},"content":[{"text":" How-To Use the Ui -Commons Icons","type":"text"}]},{"type":"paragraph","content":[{"text":" From the icons Listed under this page ","type":"text"},{"text":"https://qa-refapp.openmrs.org/openmrs/uicommons/icons.page","type":"text","marks":[{"type":"link","attrs":{"href":"https://qa-refapp.openmrs.org/openmrs/uicommons/icons.page"}}]},{"text":" ","type":"text","marks":[{"type":"textColor","attrs":{"color":"#172b4d"}}]}]},{"type":"paragraph","content":[{"text":" The icons are categorised into two general sets of icons ,","type":"text","marks":[{"type":"textColor","attrs":{"color":"#172b4d"}}]}]},{"type":"orderedList","attrs":{"order":1},"content":[{"type":"listItem","content":[{"type":"paragraph","content":[{"text":"The Common Icons","type":"text","marks":[{"type":"strong"},{"type":"textColor","attrs":{"color":"#172b4d"}}]},{"text":" . These are named as \"","type":"text","marks":[{"type":"textColor","attrs":{"color":"#172b4d"}}]},{"text":"icon-","type":"text","marks":[{"type":"em"}]},{"text":"\" eg ","type":"text"},{"text":" icon-trash ","type":"text","marks":[{"type":"strong"}]},{"text":"see screen shot below","type":"text"}]}]}]},{"type":"paragraph"},{"type":"paragraph","content":[{"text":" ","type":"text"},{"type":"inlineExtension","attrs":{"extensionType":"com.atlassian.confluence.migration","extensionKey":"inline-media-image","parameters":{"width":"","id":"1eb390ab-670d-4835-a62d-f0a8d48b34e3","collection":"contentId-25469322","height":"250"}}}]},{"type":"paragraph","content":[{"text":" To access/use the above icons in your page","type":"text"}]},{"type":"bulletList","content":[{"type":"listItem","content":[{"type":"paragraph","content":[{"text":"You should ","type":"text"},{"text":"decorate","type":"text","marks":[{"type":"link","attrs":{"href":"https://openmrs.atlassian.net/wiki/display/docs/Decorating+our+fragment"}}]},{"text":" the page with the decorator \"standardEmrPage\" from appui module","type":"text"}]}]},{"type":"listItem","content":[{"type":"paragraph","content":[{"text":"then include the icon as ","type":"text"},{"text":"<","type":"text","marks":[{"type":"textColor","attrs":{"color":"#000000"}},{"type":"em"}]},{"text":"i","type":"text","marks":[{"type":"textColor","attrs":{"color":"#000000"}},{"type":"em"}]},{"text":" ","type":"text","marks":[{"type":"textColor","attrs":{"color":"#000000"}},{"type":"em"}]},{"text":"class","type":"text","marks":[{"type":"textColor","attrs":{"color":"#000000"}},{"type":"em"}]},{"text":"=","type":"text","marks":[{"type":"textColor","attrs":{"color":"#000000"}},{"type":"em"}]},{"text":"\"\"","type":"text","marks":[{"type":"textColor","attrs":{"color":"#000000"}},{"type":"em"}]},{"text":">","type":"text","marks":[{"type":"textColor","attrs":{"color":"#000000"}},{"type":"em"}]},{"text":" see code snippet below ","type":"text","marks":[{"type":"textColor","attrs":{"color":"#000000"}},{"type":"em"}]}]}]}]},{"type":"paragraph","content":[{"text":" ","type":"text"}]},{"type":"heading","attrs":{"level":5},"content":[{"text":"your_page.gsp","type":"text","marks":[{"type":"strong"}]}]},{"type":"codeBlock","attrs":{"language":"xml"},"content":[{"text":"<%\n ui.decorateWith(\"appui\", \"standardEmrPage\")\n%>\n

\n \n

","type":"text"}]},{"type":"paragraph","content":[{"text":" The above will display as below ","type":"text"},{"type":"inlineExtension","attrs":{"extensionType":"com.atlassian.confluence.migration","extensionKey":"inline-media-image","parameters":{"width":"","id":"123e808f-1f81-4b74-9ca1-0f3d80b98e8e","collection":"contentId-25469322","height":""}}}]},{"type":"paragraph"},{"type":"paragraph"},{"type":"paragraph","content":[{"text":"2. ","type":"text"},{"text":"Fonte Awesome Icons. ","type":"text","marks":[{"type":"strong"}]},{"text":"These are named as \"","type":"text"},{"text":"fa-\" eg ","type":"text"},{"text":"fa-apple-pay","type":"text","marks":[{"type":"em"},{"type":"strong"}]},{"text":" . ,see screen shot below ","type":"text"}]},{"type":"paragraph"},{"type":"paragraph","content":[{"text":" ","type":"text"},{"type":"inlineExtension","attrs":{"extensionType":"com.atlassian.confluence.migration","extensionKey":"inline-media-image","parameters":{"width":"","id":"fd693f81-9c5b-4c8b-9b24-857ff883fffa","collection":"contentId-25469322","height":"201"}}}]},{"type":"paragraph"},{"type":"paragraph","content":[{"text":" Note. The above Font Awesome icons are also sub grouped into three classes They can be accesed either of the following paths","type":"text"}]},{"type":"paragraph","content":[{"text":" ","type":"text","marks":[{"type":"textColor","attrs":{"color":"#333333"}},{"type":"em"}]},{"text":"\">","type":"text","marks":[{"type":"strong"},{"type":"textColor","attrs":{"color":"#333333"}},{"type":"em"}]},{"text":" or ","type":"text","marks":[{"type":"textColor","attrs":{"color":"#333333"}},{"type":"em"}]},{"text":"\">","type":"text","marks":[{"type":"strong"},{"type":"textColor","attrs":{"color":"#333333"}},{"type":"em"}]},{"text":" or ","type":"text","marks":[{"type":"textColor","attrs":{"color":"#333333"}},{"type":"em"}]},{"text":"\">","type":"text","marks":[{"type":"strong"},{"type":"textColor","attrs":{"color":"#333333"}},{"type":"em"}]},{"text":" (Try out to get the which path works ) example","type":"text","marks":[{"type":"textColor","attrs":{"color":"#333333"}},{"type":"em"}]}]},{"type":"heading","attrs":{"level":5},"content":[{"text":"your_page.gsp","type":"text","marks":[{"type":"strong"}]}]},{"type":"codeBlock","attrs":{"language":"xml"},"content":[{"text":"<%\n ui.decorateWith(\"appui\", \"standardEmrPage\")\n%>\n

\n \n \n

","type":"text"}]},{"type":"paragraph"},{"type":"paragraph","content":[{"text":"the above will display as below ","type":"text"}]},{"type":"mediaSingle","attrs":{"layout":"full-width"},"content":[{"type":"media","attrs":{"__fileSize":8834,"__fileMimeType":"image/png","width":1030,"id":"4a0b3968-996b-4f8c-9260-32b5a8cf7b10","collection":"contentId-25469322","type":"file","__fileName":"you tube.png","height":120}}]},{"type":"paragraph"},{"type":"heading","attrs":{"level":2},"content":[{"text":"Downloads","type":"text"}]},{"type":"bulletList","content":[{"type":"listItem","content":[{"type":"paragraph","content":[{"text":"For Implementers","type":"text","marks":[{"type":"strong"}]},{"text":" , The omod can be downloaded from ","type":"text"},{"text":"https://addons.openmrs.org/show/org.openmrs.module.uicommons","type":"text","marks":[{"type":"link","attrs":{"href":"https://addons.openmrs.org/show/org.openmrs.module.uicommons"}}]}]}]},{"type":"listItem","content":[{"type":"paragraph","content":[{"text":"For Developers","type":"text","marks":[{"type":"strong"}]},{"text":" , source code is found at ","type":"text"},{"text":"https://github.com/openmrs/openmrs-module-uicommons","type":"text","marks":[{"type":"link","attrs":{"href":"https://github.com/openmrs/openmrs-module-uicommons"}}]}]}]}]}],"version":1}

Browser not supported