# Multi level presentation of form (schema)

**URL:** <https://jsonforms.discourse.group/t/multi-level-presentation-of-form-schema/2208>\
**Category:** General\
**Created:** [June 29, 2024, 1:16pm UTC](https://jsonforms.discourse.group/t/multi-level-presentation-of-form-schema/2208 "2024-06-29T13:16:10Z")\
**Posts on this page:** 7\
**Page:** 1

<div class="post-metadata">

**Author:** ![clysss](https://yyz2.discourse-cdn.com/free1/user_avatar/jsonforms.discourse.group/clysss/32/996_2.png) [@clysss](https://jsonforms.discourse.group/u/clysss)\
**Post date:** [June 29, 2024, 1:16pm UTC](https://jsonforms.discourse.group/t/multi-level-presentation-of-form-schema/2208/1 "2024-06-29T13:16:10Z")

</div>

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 !]

---

<div class="post-metadata">

**Author:** ![sdirix](https://yyz2.discourse-cdn.com/free1/user_avatar/jsonforms.discourse.group/sdirix/32/1073_2.png) [@sdirix](https://jsonforms.discourse.group/u/sdirix)\
**Post date:** [July 1, 2024, 9:15am UTC](https://jsonforms.discourse.group/t/multi-level-presentation-of-form-schema/2208/2 "2024-07-01T09:15:43Z")

</div>

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`.

---

<div class="post-metadata">

**Author:** ![clysss](https://yyz2.discourse-cdn.com/free1/user_avatar/jsonforms.discourse.group/clysss/32/996_2.png) [@clysss](https://jsonforms.discourse.group/u/clysss)\
**Post date:** [July 1, 2024, 10:03am UTC](https://jsonforms.discourse.group/t/multi-level-presentation-of-form-schema/2208/3 "2024-07-01T10:03:27Z")

</div>

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

---

<div class="post-metadata">

**Author:** ![sdirix](https://yyz2.discourse-cdn.com/free1/user_avatar/jsonforms.discourse.group/sdirix/32/1073_2.png) [@sdirix](https://jsonforms.discourse.group/u/sdirix)\
**Post date:** [July 1, 2024, 6:01pm UTC](https://jsonforms.discourse.group/t/multi-level-presentation-of-form-schema/2208/4 "2024-07-01T18:01:26Z")

</div>

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.

---

<div class="post-metadata">

**Author:** ![clysss](https://yyz2.discourse-cdn.com/free1/user_avatar/jsonforms.discourse.group/clysss/32/996_2.png) [@clysss](https://jsonforms.discourse.group/u/clysss)\
**Post date:** [July 1, 2024, 6:11pm UTC](https://jsonforms.discourse.group/t/multi-level-presentation-of-form-schema/2208/5 "2024-07-01T18:11:47Z")

</div>

hmm not totally sure to have all understood 🙂  
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

---

<div class="post-metadata">

**Author:** ![sdirix](https://yyz2.discourse-cdn.com/free1/user_avatar/jsonforms.discourse.group/sdirix/32/1073_2.png) [@sdirix](https://jsonforms.discourse.group/u/sdirix)\
**Post date:** [July 2, 2024, 3:42pm UTC](https://jsonforms.discourse.group/t/multi-level-presentation-of-form-schema/2208/6 "2024-07-02T15:42:19Z")

</div>

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

```json
{
  "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" }
          }
        }
      }
    }
  }
}

```

```json
{
  "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"
        }
      ]
    }
  ]
}

```

---

<div class="post-metadata">

**Author:** ![clysss](https://yyz2.discourse-cdn.com/free1/user_avatar/jsonforms.discourse.group/clysss/32/996_2.png) [@clysss](https://jsonforms.discourse.group/u/clysss)\
**Post date:** [July 3, 2024, 7:29am UTC](https://jsonforms.discourse.group/t/multi-level-presentation-of-form-schema/2208/7 "2024-07-03T07:29:19Z")

</div>

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/](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…