# Styling of unpredictable deep nested elements

**URL:** <https://jsonforms.discourse.group/t/styling-of-unpredictable-deep-nested-elements/137>\
**Category:** General\
**Created:** [March 2, 2021, 4:20pm UTC](https://jsonforms.discourse.group/t/styling-of-unpredictable-deep-nested-elements/137 "2021-03-02T16:20:09Z")\
**Posts on this page:** 4\
**Page:** 1

<div class="post-metadata">

**Author:** ![discobot](https://yyz2.discourse-cdn.com/free1/user_avatar/jsonforms.discourse.group/discobot/32/3_2.png) [@discobot](https://jsonforms.discourse.group/u/discobot)\
**Post date:** [March 2, 2021, 4:20pm UTC](https://jsonforms.discourse.group/t/styling-of-unpredictable-deep-nested-elements/137/1 "2021-03-02T16:20:09Z")

</div>

Styling of unpredictable deep nested elements  
I would like to know if there is a possibilty to bind an own type of control to a schema.  
Let me show you with an example what I am talking about:

_[[original thread](https://spectrum.chat/jsonforms/general/styling-of-unpredictable-deep-nested-elements~81b9b022-6015-4cf8-a0d0-2f1fce4f370b) by Seprech]_

---

<div class="post-metadata">

**Author:** ![discobot](https://yyz2.discourse-cdn.com/free1/user_avatar/jsonforms.discourse.group/discobot/32/3_2.png) [@discobot](https://jsonforms.discourse.group/u/discobot)\
**Post date:** [March 3, 2021, 9:00am UTC](https://jsonforms.discourse.group/t/styling-of-unpredictable-deep-nested-elements/137/2 "2021-03-03T09:00:12Z")

</div>

_[Seprech]_

```auto
uischema = {
"type": "ListWithDetail",
"scope": "#/properties/mappings",
"options": {
  "detail": {
    "type": "VerticalLayout",
    "elements": [
      {
        "type": "Control",
        "scope": "#/properties/name"
      },
      {
        "type": "Control",
        "scope": "#/properties/subArray1"
      }
    ]
    }
  }
}

```

---

<div class="post-metadata">

**Author:** ![discobot](https://yyz2.discourse-cdn.com/free1/user_avatar/jsonforms.discourse.group/discobot/32/3_2.png) [@discobot](https://jsonforms.discourse.group/u/discobot)\
**Post date:** [March 3, 2021, 9:01am UTC](https://jsonforms.discourse.group/t/styling-of-unpredictable-deep-nested-elements/137/3 "2021-03-03T09:01:38Z")

</div>

_[Seprech]_

```auto
schema = {
  "definitions": {
    "mapping": {
      "type": "object",
      "properties": {
        "name": {"type": "string"},
        "subArray1": {
          "type": "array",
          "items": {
            "$ref": "#/definitions/subObject"
          }
        }
      }
    },
    "subObject": {
      "type": "object",
      "properties": {
        "name": {"type": "string"},
        "subArray11": {
          "type": "array",
          "items": {
            "$ref": "#/definitions/subObject"
          }
        },
        "subArray12": {
          "type": "array",
          "items": {
            "$ref": "#/definitions/subObjectOthers"
          }
        }
      }
    },
    "subObjectOthers": {
      "type": "object",
      "properties": {
        "name": {"type": "string"}
      }
    }
  },
  "type": "object",
  "properties": {
    "name": {"type": "string"},
    "mappings": {
      "type": "array",
      "items": {
        "$ref": "#/definitions/mapping"
      }
    }
  },
  "required": ["title"]
}

```

---

<div class="post-metadata">

**Author:** ![discobot](https://yyz2.discourse-cdn.com/free1/user_avatar/jsonforms.discourse.group/discobot/32/3_2.png) [@discobot](https://jsonforms.discourse.group/u/discobot)\
**Post date:** [March 3, 2021, 9:01am UTC](https://jsonforms.discourse.group/t/styling-of-unpredictable-deep-nested-elements/137/4 "2021-03-03T09:01:54Z")

</div>

_[Seprech]_

```auto
data = {
  "mappings": [
     {
      "name": "The Name",
      "subArray1": [
        {
          "name": "The Name",
          "subArray11": [
            {
              "name": "The Name11",
              "subArray11": [
                {
                  "name": "The Name111",
                  "subArray11": [
                    {
                      "name": "The Name1111"
                    }
                  ],
                  "subArray12": [
                    {
                      "name": "The Name1112"
                    }
                  ]
                }
              ]
            }
          ],
          "subArray12": [
            {
              "name": "The Name12"
            }
          ]
        }
      ]
    }
  ]
}

```