The OpenLMIS-UI is a single page application that communicates with OpenLMIS Services to provide a user interface for interacting with OpenLMIS. This UI aims to be modular, extendable, and provide a consistent user experience. It is called a ‘reference’ because implementations may use and/or customize it to their local needs.
The OpenLMIS-UI is state-driven, meaning the browser’s URL determines what is displayed on the screen. Once the application starts, the browser’s current URL is parsed and used to retrieve data from OpenLMIS Services. All retrieved data populates HTML-based views, which are displayed in the user’s browser and styled by CSS.
The OpenLMIS-UI is built in a modular way from multiple other UI repositories and compiled into a single page application. The OpenLMIS Dev-UI provides the build system and uses other repositories to provide layouts and components along with feature-specific repositories (e.g. Auth UI, Requisition UI) that provide the screens that users interact with for different features of OpenLMIS.
Core technologies used to build the UI are:
- Docker provides environment encapsulation
- NPM is the package manager
- Grunt orchestrates the application build process
- Sass is used to generate CSS
- For unit testing, Karma is the test runner and Jasmine is the assertion and mocking library
- Nginx runs the OpenLMIS-UI within the OpenLMIS micro-services framework
Primary libraries used within the UI are:
- AppCache allows the application run in a browser while offline
- AngularJS v1 is the application framework
- Angular UI-Router provides URL routing
- PouchDB stores data for offline functionality