Design custom Forms using JSON and API driven

General
1

I am working on a product UI dynamic forms design.Where requirement is :

  1. Develop master forms layout

  2. Store it in DB in JSON format.

  3. Admin use has access to this forms layout and can change the layout add or remove fields for a particular user

  4. it is saved in DB

  5. once User logs UI is dynamically rendered based on what was saved by admin user above.

I would like to know how JSONForms can help in this.

[original thread by pranayag2004]

2

Hi @amitag75, I think JSON Forms is a good fit for your use case. JSON Forms consumes two artifacts to render a UI:

  • A JSON Schema which describes the data the form shall use / produce

  • An optional UI schema which describes how the data shall be rendered. If not provided the form will render a field for all properties defined in the JSON Schema in vertical alignment.

If an admin should only be able to remove fields, the JSON Schema could be the same for all users. The admin could then simply create a UI Schema for each user in which the admin selects which fields shall be rendered and how they shall be layouted.

If an admin should also be able to add fields, they need to adapt the JSON Schema too and describe the field they added (for example to add an address property of type string).

Example:

  1. Specify master JSON Schema for your data and store in DB (optional: together with a default UI schema)

  2. Admin (optionally adapts) master JSON Schema and stores it with a UI schema in DB for each user

  3. User logs in, gets their JSON Schema & UI schema and JSON Forms renders their custom form

3

[pranayag2004]

@sdirix thanks for quick reply. To add to your response : Basically Use case is : I am designing UI for a SAAS product which has around 30 default UI forms Screens for each client. Each client once they subscribe to a Product , will be given admin user role.

Through Admin user Role , a person can configuare layout ( 1. Change the order of fields , Add additional fileds , Remove the field). This layout can be attached to a particular user rather for all.

For that an Admin scrreen will be developed which will give access to these customize features.

in Data base for each user or client a Deafault UI will be there and in addition customize UI in JSON format.

Let me know if it is clear. if JSon Forms is Good Fit - how can i go ahead and Do POC.

4

Yes I think JSON Forms is a pretty good fit here, as your admins can very easily adapt the forms by modifying the JSON and UI schemas (both json) without having to touch any code. To get started you can take a look at our JSON Forms website, JSON Forms react seed and yeoman plugin.

5

[pranayag2004]

@sdirix thanks . We will be using Angular framework . Any reference will be useful for prototype.

6

In case of Angular please check our Angular playground. Note that at the moment we only target Angular 7 but will offer support for Angular 8 with one of the next releases of JSON Forms.