Conversational type form requires multiple rules per field?

General
1

I have a form where it asks a series of questions and at the end there is a report/summary of the answers with additional information. I would like the form to follow a conversational type flow. E.G What is your name?, Where do you live [name] etc. I want only one question per page or view so as each question is answered it’s hidden and the next one is presented.

I know I can do this in other frameworks but I want to see if it can be done in jsonforms as this framework provides more of what I need outside these requirements. I have a form built but I cannot add multiple rules/conditions per field. I want to show a field for one condition (previous field completed) and hide the same field for another condition (field completed). Currently I can show all fields and hide each one as it’s completed or hide all and show the next one as the previous one is completed. Neither of these satisfy the requirement to show one field per page/view.

I’m wondering if this all can be done in a custom renderer or even if I created a universal page/view count field where each question field could query it to know if it should be shown or not. Any opinions on the way to go would be welcome.

[original thread by Johnny]

2

If I understand you correctly you’d like to render a flow with one or more inputs per step. We don’t support this out of the box, however you can extend JSON Forms very easily to achieve your desired result.

I would recommend adding a new type of element to your UI schema, for example called Workflow. A Workflow could have steps, consisting of a title and a uiSchema property. In the uiSchema you could specify one control or a whole layout of controls, depending on your needs.

Example:

{
  type: 'Workflow',
  steps: [
    {
      title: 'Name',
      uiSchema: {
        type: 'Control',
        scope: '#/properties/name'
      }
    },
    {
      title: 'Other personal information',
      uiSchema: {
        type: 'HorizontalLayout',
        elements: [
          {
            type: 'Control',
            scope: '#/properties/personalData/properties/height'
          },
          {
            type: 'Control',
            scope: '#/properties/nationality'
          }
        ]
      }
    },
    {
      title: 'Professional information',
      uiSchema: {
        type: 'Control',
        scope: '#/properties/occupation'
      }
    }
  ]
}

Once this is done you can register an own renderer for Workflow which renders the title and navigation buttons (back, forward, etc.) of the current step. For rendering the uiSchema you can just dispatch again to JSON Forms. As this is basically a layout renderer, this tutorial might get you kick started: https://jsonforms.io/docs/custom-layouts

I hope this is helpful to you. If I misunderstood your use case or you have further question please let me know :wink:

3

[Johnny]

Hi Stefan, It’s exactly what I need. A bit of work to do to get this flow going but I’m very grateful for the guidance. Thanks again.

4

Generally speaking it would make sense to add support for (basic) flows to JSON Forms. So if you come up with a good solution and want to contribute parts of it back to JSON Forms we would definitely welcome that :wink: