Skip to content

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

@AlexKirkouski

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
    No fields configured for issues without a type.

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions