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.
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:
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.