Skip to content

CUSTOM custom views: support tree (hierarchical) group objects #1672

Description

@AlexKirkouski

Part of #1666 (CUSTOM custom views — phase 4).

Description

Custom views currently support flat grid and panel group objects, but not tree group objects. Add tree support so a custom component can render an interactive hierarchy:

  • project the hierarchy to the component — parent/child relationship, node level, whether a node is expandable and expanded, and the current node;
  • let the component expand / collapse nodes through the controller, with the platform lazily loading children on expand.
FORM departments 'Departments'
    OBJECTS d = Department
    PROPERTIES(d) name, headcount
    TREE departmentTree OBJECTS d PARENT parent(d)
    DESIGN departments { departmentTree { custom = 'OrgTree'; } }
;
// API names illustrative
function OrgTree({ data, controller }) {
  return data.d.list.map(node =>
    <div key={node.value} style={{ marginLeft: node.level * 16 }}>
      {node.expandable &&
        <button onClick={() => controller.expand(node.value, !node.expanded)}>
          {node.expanded ? "▾" : "▸"}
        </button>}
      {node.name} ({node.headcount})
    </div>);
}

Reason

Hierarchical (tree) data cannot be rendered by a custom view today — only flat lists. Projecting the tree structure and exposing node expand/collapse lets custom components present trees with the same lazy-loading behavior as the native tree.

Metadata

Metadata

Assignees

No one assigned

    Labels

    No labels
    No labels

    Type

    No type

    Fields

    Priority

    None yet

    Projects

    Status
    Icebox

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions