Dynamic form is a common requirement when building more advanced UIs. With Oracle JET you have all the tools available to build dynamic form. One of the examples of dynamic form requirements - report parameter capture screens. Building fixed forms to capture parameters for each report would be an overkill. A smarter approach is to build one dynamic form, which would handle a set of different UI components and render based on metadata received from the service.
Dynamic form example:
When values are changed, we can capture all changes while submitting the form - value printed in the log:
In the heart of dynamic form logic, we are using JET bind for each tag, it renders form elements from metadata:
Each element is checked and based on the type - UI field is rendered through JET if tag. Input field properties are fetched from metadata.
Example of metadata structure - array. It is important to use Knockout observable for value property. This will allow capturing user input. When we submit the form, we can iterate through the array and read value property:
Sample code available on GitHub.
No comments:
Post a Comment