TL;DR: Need to create UI pages dynamically from user provided custom templates. These templates should contain enough information so that front-end as well as back-end can be created dynamically, for all user cases.
Keeping the TLDR on top. Also, I am not sure if this has been asked here before, so sorry if this is a duplicate question.
A little background, I am trying to create a Angular 7 based web application that will serve as a single interface for users to configure network devices (routers, switches, etc.). To cover as many different devices and vendors as possible, I cannot make my UI pages static. They should have the capability to change based on user requirements and specifications.
To achieve something like this, common logic states that we should let users create custom templates for their data and data attributes, and then let them upload it to the portal, so that the UI can be rendered dynamically from there.
For example, user A might need a form with 2 input parameters(device name and IP address), while user B in the same organization might need a form with N input parameters, M dropdowns, etc., for some complex configurations.
So coming to the question finally, What is the best way to generate UI pages in case your pages cannot be static and have to change based on user's requirements? In case we go with user uploaded templates, what information should these templates contain?
I am right now using Angular 7 to build my app but I am flexible in this regard. Here for ideas and brainstorming.
The answer is to implement a Data Driven UI. For beginners such as myself, NPM - Data Driven UI is a good starting point.
To satisfy my use case, I implemented a Java platform to generate my UI metadata based on user-input, which is then fed to UI to generate web-pages revolving around a central schema/theme.