A cloud based lending platform was developed for small business lenders by vteam #397. In the lending system, there were multiple user roles for example Manager, Sales Person, Referral Source and Business Development Officer etc. Each of these user roles had permissions for widgets specific to the respective role.
Requirement
A Dashboard (screen) was developed for managers and individuals to view their own performance as well as that of their subordinate’s. The main requirement was to display only those widgets for which the user in question had permission.
Note: A widget can be displayed in multiple ways be it a grid view, list view, some sections on the screen or a chart.
Initially the screen was developed to load all the widgets, and then hide the widgets for which the user did not have permissions. It met the basic requirement but was not the ideal solution. Let’s say, there were total 10 widgets and the user had permission to view only 2 of those 10. The remaining 8 widgets were loading unnecessarily.
The client’s requirement was to load only those widgets for which the specific user had permissions instead of redundantly loading all widgets and then hiding the rest.
Implementation
In order to load widgets dynamically based on user permissions, vteams engineers Umer Muhammad and Zeeshan Iqbal had to break each widget’s HTML template and their relevant JavaScript in separate files.
At first, each widget was separated one by one and organized in relevant folders. The directory structure for the widgets was as follows (Note: Highlighted folders are the individual widgets):
After splitting each widget, an API was developed to return the name of each widget based on user roles and permissions. After receiving the required widget name; the widgets were loaded using RequireJS. Below is the code snippet used to load widgets dynamically:
Conclusion
As a result, only the required widgets were loaded and significantly improved the system’s performance. Unnecessary calls and data fetching were avoided for extra widgets. Also, splitting widgets into separate files enhanced code maintainability.