Multi level presentation of form (schema)

I need to have [tabs]; category and sub category of questions
as in the following “screen” example :

FamilyTree | Personal adress | Employer
Your Family (Category)
You (sub category)
Name : […]
LastName : […]

Children (category)
Child 1 (sub category)
Name : […]
LastName : […]
Child 2 (sub category)


considering the schema :

of course i’ll will use categorization for tab
Should I use some schema like
option 1 :

Tab1FamilyTree: {
FamilyCategory {
YousubCategory {
Name : xxx
LastName : xxx
}

or option 2:
Tab1FamilyTree: {
Label 1{ FamilyCategory
}
Label 2{ YousubCategory
}
{
Name : xxx
LastName : xxx
}
the option1 seems more “beautiful” but I don’t see how it can be easily rendered
if I’ve understood well, in the option2 i just need to add labels and find a way to style them differently (should i create a custom renderer for that?)
so my question is what is the best type of schema to use to minimize the efforts !
Thx

[i’ll have different basic questions during the following days to be sure to use in the best way jsonforms. I’ve prefer to ask them separately ; as is, other persons will be more easily be able to reuse the replies !]

Hi @clysss,

With custom renderers you can support any kind of structure as you have full control over the rendering.

Generally speaking it’s always easier if the grouping within the UI also exists within the schema, e.g. if the UI shows a “Personal adress” section then it’s convenient if there is also a (sub) object for it it in the schema.

thanks for your advice, I haven’t imagine it could be an option to have both schema and schemaui with sub :slight_smile:
I imagine in this case, that schemaUI scope will look something like
scope:“#/tabName/categorie/subcategorie/properties/name”
?

Hi @clysss,

The scope is a JSON Pointer and always needs to resolve against the JSON Schema. So usually it would not contain any categorie elements in the path, except if they are also in the JSON Schema. But then they would need to be objects or arrays, so they would be followed for example by a properties segment.

hmm not totally sure to have all understood :slight_smile:
do you have a example of schema and ui schema with sub categories that we “should” follow ?..
(don’t hesitate to send “real” large samples ! if it’s in PM, I’ll make a shortest version for this post)
Thx a lot

See this example on how the JSON Schema and the UI Schema could reflect each other’s structure:

{
  "type": "object",
  "properties": {
    "familyTree": {
      "type": "object",
      "properties": {
        "parents": {
          "type": "array",
          "items": {
            "type": "object",
            "properties": {
              "name": { "type": "string" },
              "age": { "type": "integer" }
            }
          }
        },
        "siblings": {
          "type": "array",
          "items": {
            "type": "object",
            "properties": {
              "name": { "type": "string" },
              "age": { "type": "integer" }
            }
          }
        }
      }
    },
    "personalAddress": {
      "type": "object",
      "properties": {
        "street": { "type": "string" },
        "city": { "type": "string" },
        "state": { "type": "string" },
        "zipCode": { "type": "string" }
      }
    },
    "employer": {
      "type": "object",
      "properties": {
        "companyName": { "type": "string" },
        "position": { "type": "string" },
        "address": {
          "type": "object",
          "properties": {
            "street": { "type": "string" },
            "city": { "type": "string" },
            "state": { "type": "string" },
            "zipCode": { "type": "string" }
          }
        }
      }
    }
  }
}
{
  "type": "Categorization",
  "elements": [
    {
      "type": "Category",
      "label": "Family Tree",
      "elements": [
        {
          "type": "Control",
          "scope": "#/properties/familyTree"
        }
      ]
    },
    {
      "type": "Category",
      "label": "Personal Address",
      "elements": [
        {
          "type": "Control",
          "scope": "#/properties/personalAddress"
        }
      ]
    },
    {
      "type": "Category",
      "label": "Employer",
      "elements": [
        {
          "type": "Control",
          "scope": "#/properties/employer"
        }
      ]
    }
  ]
}

OK :))))))))))
Thanks a lot @sdirix I’ve now understood !

ok, it takes me a while !
as my brain is not really able to consolidate jsons in live, I used the https://jsonforms-editor.netlify.app/ for that.
if like me you’re not sure to understand 100%, Simply copy/paste the 2 jsons and you’ll be immediatly see what it looks and be able to modify…