As we have previously announced in our news blog post, we are proud of our collaboration with a prominent IT company Primetek.
Specifically, our collaboration is based on FIYU’s usage of Primetek UI components through its PrimeNG product – an open-source rich library for Angular.
In this post I will explain the technicalities of this collaboration and the business logic behind it.
Unveiling the Power of FIYU’s UI Module and PrimeNG Components
The FIYU platform is composed of multiple main modules, with separate modules for the backend and frontend. One of the modules on the frontend is the UI module, which is an npm package published on a private Gitlab registry.
That allows us to integrate it within the starter project created for the user during the provisioning process.
The UI module contains components that are basically “wrapper” components for the PrimeNG components.
This enables us to dynamically generate forms and tables based on the configuration of DTO models that we define according to the technical specification.
Exploring PrimeNG Themes in FIYU
Through the application and with the help of PrimeNG themes, it is also possible to define the appearance of the components themselves by modifying CSS variables and styles.
All integrated PrimeNG themes come in 2 variants, light and dark, and are made by the rules for accessible color contrast ratio.
The model is defined as a Typescript class with variables (properties). The configuration of the model is done by adding annotations to properties using the decorators.
For a dynamic generation of forms, we use FormEntity decorator, which defines the type of control (input, drop-down, checkbox, date picker, upload, …), validations, labels, etc.
Here is an example of model configuration from one of the pages that contain a form:
For a dynamic generation of tables, we use the PresentationEntity decorator, which defines the filtering, sorting, and visibility of a specific column in the table itself. It is also possible to define the type of component we want to show (thumbnail for files, chips for lists, etc.) when we need to show data more pleasingly.
A common case for showing data in the table would be to show a list of strings as a chip component, where each string from the list is shown within the chip.
Here is an example of model configuration from one of the pages that contain a table (we are using chips and image preview components):
Conclusion
The question here is why we used the PrimeNG components in the first place instead of developing our own components.
The PrimeNG components are open-source components developed by Primetek under the MIT license, and they follow all the latest standards in the development of UI components with an emphasis on “accessibility” (WCAG – Web Content Accessibility Guidelines), allowing users a unique design and UX throughout the whole application, which in turn makes development drastically faster since now our clients can focus on business logic.
