Enable device section folding

[justjam2013]

Feature Description

For plugins using the Accessory Plugin template, when you have an multiple accessories, each accessory section in the configuration can be collapsed, as shown for these Dummy Switches:

This makes it easy to manage a large set of devices.

For plugins using the Platform Plugin template, when you have an array of accessories, each individual accessory section in the configuration is not collapsible, as shown:

This makes it harder to find a device in a large set of devices.

This enhancement suggests adding to the Platform Plugin template the default ability to expand/collapse the section of a singe device in an array.

Using form:

If you try to use the form section in config.schema.json, as specified in the JSON Schema Form spec, you can only expand/collapse the entire configuration, unless you fully manage the form layout, which means that dynamically showing/hiding fields through the use of condition fails completely

    "condition": {
        "functionBody": "return model.devices[arrayIndices].someField === true;"
    }

All collapsed:

All expanded:

Or you get the JSON Schema Form form and the Homebridge layout conflicting. Which means that if the out-of-the-box Homebridge layout changes, it can end up breaking plugin layouts:

[justjam2013]

Adding expandable to array items causes the entire section to disappear and no expand button is displayed:

      "devices": {
        "title": "Accessories",
        "type": "array",
        "items": {
          "expandable": true,
          "type": "object",
          "properties": {

[LukeBurke99]

I would also appreciate this being implemented. After using the '[homebridge-virtual-accessories]' plugin and adding a few devices, you start to lose yourself in the number of fields shown.

Implementing the same functionality as the 'Accessory Plugin template' would be perfect

[justjam2013]

Collapse expand is supported at the platform level in homebridge-config-ui-x/ui/src/app/core/manage-plugins/plugin-config/plugin-config.component.html for multiple platforms, where individual platforms can be extended/collapsed:

    <!-- MULTIPLE CONFIG BLOCKS-->
    <div
      ngbAccordion
      [closeOthers]="true"
      (show)="blockShown($event)"
      (hide)="blockHidden($event)"
      *ngIf="pluginConfig.length && !schema.singular"
    >
    ...
        <div ngbAccordionCollapse>
          <div ngbAccordionBody class="card-body">
            <app-schema-form [configSchema]="schema" [(data)]="block.config"> </app-schema-form>
          </div>
        </div>

Whereas it is not for single platforms:

I doubt that the recommended approach is to create a platform for each single accessory, otherwise there wouldn't be the option to add multiple accessories to a platform.

[justjam2013]

Looking at the code, the multiple platform config section, wraps the individual platform card in an ngbAccordion div, then displays the platform card inside a ngbAccordionCollapse div (plugin-config.component.html - lines: 23, 65):

    <div
      ngbAccordion
      [closeOthers]="true"
      (show)="blockShown($event)"
      (hide)="blockHidden($event)"
      *ngIf="pluginConfig.length && !schema.singular"
    >
    ....
        <div ngbAccordionCollapse>
          <div ngbAccordionBody class="card-body">
            <app-schema-form [configSchema]="schema" [(data)]="block.config"> </app-schema-form>    # Wraps individual platform
          </div>
        </div>
    ....    

So it would be the case of wrapping the individual device card in the same ngbAccordion div and ngbAccordionCollapse div here (plugin-config.component.html - line: 74):

    <div *ngIf="pluginConfig.length && schema.singular" class="card card-body">
      <app-schema-form [configSchema]="schema" [(data)]="pluginConfig[0].config"> </app-schema-form>    # Wrap each accessory in an "ngbAccordion" div
      <app-homebridge-deconz *ngIf="plugin.name==='homebridge-deconz'"></app-homebridge-deconz>
      <app-homebridge-hue *ngIf="plugin.name==='homebridge-hue'"></app-homebridge-hue>
    </div>

[justjam2013]

This functionality is supported for accessories, if the plugin type is accessory (homebridge-config-ui-x/ui/src/app/core/manage-plugins/plugin-config/plugin-config.component.ts), although the accessory plugin is deprecated for HB 2.0:

  public pluginType: 'platform' | 'accessory'

[justjam2013]

This is supported by ajsf by adding "expandable": true, as a property for items array. Using Angular JSON Schema Form — Demonstration Playground with this schema:

{
  "schema":{
    "type": "object",
    "properties":{
      "name":{
        "title": "Platform Name",
        "type": "string",
        "required": true,
        "default": "Virtual Accessories Platform",
        "readonly": true
      },
      "devices":{
        "title": "Accessories",
        "type": "array",
        "orderable": true,
        "uniqueItemProperties": [ "accessoryID" ],
        "items":{
          "title": "Accessory",
          "expandable": true,            <----- this
          "type": "object",
          "properties":{
            "accessoryID":{
              "title": "Accessory ID",
              "description": "Unique ID for the Accessory (do not modify once assigned)",
              "type": "string",
              "required": true,
              "pattern": "^[A-Fa-f0-9\\-]{5,}$"
            },
            "accessoryName":{
              "title": "Accessory Name",
              "description": "Accessory name as it will be displayed in HomeKit",
              "type": "string",
              "required": true
            }
          }
        }
      }
    }
  }
}

This shows the form with expanded items:

and collapsed items:

This functionality is offered out of the box and may be just a question of updating jsonFormOptions in homebridge-config-ui-x/ui/src/app/core/components/schema-form/schema-form.component.html - line: 5:

    [options]="jsonFormOptions"

and homebridge-config-ui-x/ui/src/app/core/components/schema-form/schema-form.component.ts - lines 19-25:

  public jsonFormOptions = {
    addSubmit: false,
    loadExternalAssets: false,
    returnEmptyFields: false,
    setSchemaDefaults: true,
    autocomplete: false,
  }

Per ajsf/projects/ajsf-material/src/lib/widgets/flex-layout-section.component.ts it is looking at options to see if expandable is provided:

      [class.expandable]="options?.expandable && !expanded"
      [class.expanded]="options?.expandable && expanded">

[justjam2013]

See How to display accessory name in header field? as acceptable solution, although the section header would need to be dynamic.

[github-actions]

This issue has been automatically marked as stale because it has not had recent activity. It will be closed if no further activity occurs. Thank you for your contributions.

[justjam2013]

Keeping this open

[justjam2013]

Closing this, as the following is supported:

      "devices":{
        "type": "array",
        ...
        "items":{
          ...
          "expandable": true, 
          ...
        }
      }

[justjam2013]

Just noticed that @donavanbecker pinned this item, so reopened.

[justjam2013]

Expanding and collapsing is supported, but it would be nice to have the cool fold/expand and delete icons.