How to render Collapsible/Expandable sections for objects

[person2713]

It's possible collapsible/expandable sections for objects use angular2-json-schema-form? Example:

{
  "schema": {
  "type": "object",
  "properties": {
      "Integrations": {
          "type": "array",
          "items": {
              "type": "object",
              "properties": {
                  "Integration": {
                      "type": "object",
                      "properties": {
                            "IntegrationId": {
    							"type": "string"
    						},
    						"IntegrationName": {
    							"type": "string"
    						},
                            "Scenarios": {
                        		"type": "array",
                        		"items": {
                        			"type": "object",
                        			"properties": {
                        				"Scenario": {
                        					"type": "object",
                        					"properties": {
                        						"ScenarioId": {
                        							"type": "string"
                        						},
                        						"ScenarioName": {
                        							"type": "string"
                        						},
                        						"": {
                                                  "type": "boolean"
                                                }
                                			}
                                		}
                                	}
                                }
                            }
                        }
                    }
                }
            }
        }
    }
},
  "form": [
      { "key": "Integrations"},
  { "type": "section",
      "title": "Notes",
      "expandable": true,
      "expanded": false,
      "items": [ 
          {"key": "Integration", "type": "object"} 
       ]
    }
    ]
}

I will appreciate for your suggestions.

[stalsma]

This should be working out of the box. You might be missing the type property. Here is a snippet from one of my forms. Note that I'm using the bootstrap-4 module.

 "form": [
    {
      "type": "help",
      "helpvalue": "<div class=\"alert alert-info\">Add an Activity to a Series</div>"
    },
    {
      "title": "Basic Information",
      "labelHtmlClass": "h3",
      "type": "section",
      "expandable": true,
      "expanded": true,
      "items": [
        {
          "key": "activity.activity_title"
        },
        {
          "key": "activity.activity_date",
          "type": "date"
        },
        {
          "key": "activity.description",
          "type": "textarea"
        },
        {
          "label": "Activity Type (select all that apply)",
          "key": "activity.activity_type",
          "type": "checkboxes"
        }
      ]
    },
    {
      "title": "Credit Information",
      "labelHtmlClass": "h3",
      "type": "section",
      "expandable": true,
      "expanded": false,
      "items": [
        {
          "title": "What type of credit are you pursuing?",
          "key": "activity.credit_information.credit_type"
        }
      ]
    },

[person2713]

Does it possible collapse (expand) sub-object with complex structure? Or I can only collapse and expand objects with primitive types?

[catull]

The keyword above is "type": "section".

A section translates to a <div> container, so the collapsing/expanding applies to the entire <div> container.

So, it is up to you how much you pack into that <div> container.

In other words, yes, it is possible to collapse/expand larger portions of your form, not just single items such as input fields.

[person2713]

Catull thanks for your explanation. Can you give me links to docs where you find that information? Or may be you answer on my question? There is way don't describe inner structure of complex sub-object (for example when we use '*' in layout we don't need describe structure).