jsonform / jsonform

Build forms from JSON Schema. Easily template-able. Compatible with Bootstrap 3 out of the box.
https://jsonform.github.io/jsonform/playground/index.html
MIT License
2.72k stars 553 forks source link

Documentation for the "questions"-type is missing #411

Closed jis3r closed 1 year ago

sdetweil commented 1 year ago

yes, see it.. in playground https://jsonform.github.io/jsonform/playground/index.html?example=fields-questions

but no doc

sdetweil commented 1 year ago

how about this content

Constructing a Dialog : the questions/question type

Many times you would like to construct a multi-question/answer process to get to a selection, and constructing a nested select list becomes very difficult to structure and manage.

the questions/question type makes this much more convenient

you provide a schema element that will hold the final result and a form structure that starts with Questions, linked to the schema field, and then an array of question fields that provide the choices and the navigation between the question(s)

from the playground example, below

here we see the schema field response and the form structure

the questions form element sets the overall title/purpose and links to the schema element thru the key field it also contains a list (array []) of question elements

each question element should contain a qid field (arbitrary text) which will be used to navigate between the list of question elements

   the `next` property identifies where to go next after this question

   each `question` also has the choices defined in the `options` list([])
      with each question having a logical A/B(or more)  choice(s)..  
          to continue, set the `next` field, 
          to end set `submit:true`, and the  option `value` will be placed the schema field

  there can be as many `question` elements as necessary and the list will end when a
  choice with `submit:true` is selected by the form user
{
  "schema": {
    "response": {
      "type": "string",
      "title": "Search"
    }
  },
  "form": [
    {
      "type": "questions",
      "key": "response",
      "title": "Let's check your mood",
      "items": [
        {
          "type": "question",
          "title": "Are you happy?",
          "activeClass": "btn-success",
          "optionsType": "radiobuttons",
          "options": [
            {
              "title": "Yes",
              "value": "happy",
              "next": "q2",
              "htmlClass": "btn-primary"
            },
            {
              "title": "No",
              "value": "sad",
              "submit": true
            }
          ]
        },
        {
          "type": "question",
          "qid": "q2",
          "title": "Really happy?",
          "options": [
            {
              "title": "Yes",
              "value": "reallyhappy",
              "submit": true
            },
            {
              "title": "No",
              "value": "happy",
              "submit": true
            }
          ]
        }
      ]
    }
  ]
}
sdetweil commented 1 year ago

@jis3r

sdetweil commented 1 year ago

closed, merged, wiki updated

jis3r commented 1 year ago

Hi, please excuse my late reply, I somehow didn't see your answer. I think this documentation should do fine, thanks for adding it!