Rendering forms based on dynamic JSON schema

Wappler General Need Help
1

Hey Everyone,

I am using an API that returns a JSON schema for a form, and I want to render that form on a page. I cannot use the form generator because the JSON schema returned may differ from time to time.

Does anyone have any idea on how to render forms dynamically from a JSON schema? Is this possible with Wappler or will I have to use external libraries?

The JSON schema returned by the API looks similar to this:

{
  "name": "Cradio",
  "appointmentid": 1,
  "questions": [
    {
      "question": "Are you Sick?",
      "type": "TextBox",
      "options": [
        {
          "value": ""
        }
      ]
    },
    {
      "question": "Are you funny?",
      "isRequired": false,
      "type": "Dropdown",
      "options": [
        {
          "value": "Yes"
        },
        {
          "value": "No"
        }
      ]
    },
    {
      "question": "What music do you like?",
      "isRequired": false,
      "type": "RadioBox",
      "options": [
        {
          "value": "Pop"
        },
        {
          "value": "Rap"
        },
        {
          "value": "None"
        }
      ]
    },
    {
      "question": "Simple Checkboxes",
      "isRequired": false,
      "type": "CheckBoxes",
      "options": [
        {
          "value": "Yes"
        },
        {
          "value": "No"
        },
        {
          "value": "Maybe"
        }
      ]
    }
  ],
  "status": "OK"
}
2

you can check npm packages

and

2 Likes
3

I would do the list of questions as a repeat region, which contains all the question types as separate inputs where one is made visible per question depending on the question type.

Am about to build something almost identical next week!