How to define Dynamic Forms using jsonformsio in React

Hello Group,

We are prototyping our use cases of generating dynamic forms for end-users using jsonforms package with React and its really useful and allowing us to checkoff lot of our checkmark for use cases.

However, we need some expert opinion on how we can use jsonforms to generate dynamic forms which allows user to design the form that they need as per following use case.

Use Case: We are trying to generate form which allows user to pick various topics from predefined categories so they can generate their version of forms. Categories which we have is Personal Profiles, Hobbies, Interest and Tell Us About Yourself.

Personal Profiles have fields for First Name, Last Name, Email, Phone Number and DoB. (Where FN and LN are mandatory).

Hobbies: We have various subcategories: Books, Movies and Sports (each subcategory have 5 or more multi select options).

Interest: Allow end user to create customized Questions which could be Yes or No (Boolean) or one line answers.

Tell Us About Yourself: This is multiline text control where we want to use Text Formatter (like Draft.js)

We are able to achieve using Jsonforms to do profile and hobby categories with predefined forms as follow:

Person Profile detail is using String, birthdate, and other controls to build this category.

For Hobbies section we are using various control such as Radio button and array element and Enum to select the categories which are layout with group.

So far so good since it allows us to statically define all categories.

Now we need some guidance on how we can achieve following:

  • Interest section where user can define multiple questions for end user to fill in. However each question will have option to either have boolean choice or short answer. I know we can define array of control but I need help on how to define control of different type.
  • For Text Control we are going to define custom control so it can allow text formatting. Something like Draft.js
  • Our form is currently static type, but now we want user to create dynamic form in any order which means that user can add any category as they linke and they can rearrange them in any order. Once again we don’t know how we can achieve such a requirement with current control
    • Example: We want to have add button which predefine selection of adding Profile, Intrest, Hobby and More about you.
  • Is there any control which allows multiselect options?

Please let us know how we can achieve above use case with current control and any guidance on how to create custom control to achieve these use cases.

Once again Thank you for your consideration and look forward to hear your suggestion.

Thank You.

Hi @full_dev,

JSON Forms shines when you need to render many similar forms, e.g. in your case the resulting forms are a great fit for JSON Forms.

However an editor for forms is a very specialized “form” which is only used once with a lot of embedded domain logic. JSON Forms can be used for that, and in fact we used JSON Forms as a core piece of our jsonforms-editor, but you will need to do much yourself.

Your use case is simple enough (at least for now) that you can rely solely on JSON Forms and implement your requirements via custom renderers. However you could think about writing an own editor “app” in which you use JSON Forms only for the forms while placing all your domain logic in the app.

Interest section where user can define multiple questions for end user to fill in. However each question will have option to either have boolean choice or short answer. I know we can define array of control but I need help on how to define control of different type.

This can be modeled via an array of oneOf items. I like to recommend having a specific “type” attribute on the items to easily identify them. For a good UX experience you will need to write a custom oneOf renderer (or a complete custom array renderer).

For Text Control we are going to define custom control so it can allow text formatting. Something like Draft.js

Sure that’s fine.

Our form is currently static type, but now we want user to create dynamic form in any order which means that user can add any category as they linke and they can rearrange them in any order. Once again we don’t know how we can achieve such a requirement with current control

  • Example: We want to have add button which predefine selection of adding Profile, Intrest, Hobby and More about you.

At the moment rearranging is only supported out of the box in the table renderer. The table renderer is used for arrays when the items are suitable for a table (i.e. they are shallow). This will not be the case here, so you’ll need a custom renderer (for array layout) to fullfill your requirements. This custom renderer can then implement arbitrary logic, e.g. which type of elements, in your case “categories”, can be added.

Is there any control which allows multiselect options.

We have a checkbox renderer which allows for multiselect. See here for an example.

In short: A form editor can definitely be implemented purely in, or with the help of, JSON Forms but some work is required.