Overview

Tree

Archetype for hierarchical data representations.

Screenshot Reference (User Manual)

manual__tree__01.png: route tree rendering example with expandable parent/child nodes.

When to Use It

Tree classifications
Parent/child structures
Expandable node navigation

Operational Notes

Configuration via archetypes.tree
Supports parent/label/icon/leaf fields

md_props_bag: archetypes.tree

Snippet 1JSON

{
  "archetypes": {
    "tree": {
      "advancedFilter": false,
      "parentField": "parent_id",
      "labelField": "name",
      "iconField": "icon",

advancedFilter: when true, shows the wuic-filter-bar for the tree archetype (at data-repeater level).
parentField: parent/child relationship field.
labelField: node label text field.
iconField: node icon field.
leafField: leaf boolean field.
labelFunction: dynamic label JS callback.
itemTemplateString: custom node rendering template.

Template Context (`itemTemplateString`)

The following inputs are available in the custom template:

record: alias of the current node record.
rowData: alias of the current node record.
metaInfo: datasource table/column metadata.
datasource: reference to the associated datasource component.

Runtime context used by the framework:

Snippet 2ts

inputs: { record: item, rowData: item, metaInfo: metaInfo, datasource: datasource }

Events and Subscriptions (Host)

Events available on wuic-tree-list:

onTreeDataBound: emitted when the tree is populated from the datasource.
onTreeNodeExpand: emitted before lazy loading of children.
onTreeNodeExpanded: emitted after lazy loading of children.
onTreeNodeSelect: p-tree onNodeSelect relay.
onTreeNodeUnselect: p-tree onNodeUnselect relay.
onTreeNodeCollapse: p-tree onNodeCollapse relay.

Subscribe example:

Snippet 3ts

@ViewChild(TreeListComponent) tree?: TreeListComponent;
private readonly subs = new Subscription();

ngAfterViewInit(): void {
  if (!this.tree) return;
  this.subs.add(this.tree.onTreeDataBound.subscribe((e) => console.log(e)));
  this.subs.add(this.tree.onTreeNodeExpand.subscribe((e) => console.log(e)));

Import and mount (Angular component)

Import TreeListComponent from 'wuic-framework-lib' and mount it with the framework DataSource:

Snippet 4ts

import { DataSourceComponent, TreeListComponent } from 'wuic-framework-lib';

@Component({
  selector: 'app-esempio',
  imports: [DataSourceComponent, TreeListComponent],
  template: `
    <wuic-data-source #ds [hardcodedRoute]="'<route>'" [autoload]="true"></wuic-data-source>

EXACT names (wuic-framework-lib barrel): class TreeListComponent, selector <wuic-tree-list>. Import that class, not invented variants (e.g. a Lazy prefix where there is none, or vice versa) → otherwise the build fails with has no exported member.

Metadata-driven config: the tag accepts ONLY the standard inputs [hardcodedRoute], [hardcodedDatasource], [autoload], [hideToolbar]. Widget-specific configuration (here: the hierarchy (parent field)) is NOT an HTML input ([groupField], [type], … give NG8002 not a known property) → it goes in the metadata (md_props_bag/archetype) or in-code via metaInfo.