Tree View
Overview
Use the tree view pattern to display hierarchical data, where one item is the parent of another item. Each item has 1 parent unless it’s at the root level of the tree. Each data item can have 0 or more child items.
The tree view allows the user to interactively expand and collapse the child items beneath any item. The application can initially display the tree fully expanded, fully collapsed, or with some items expanded and some collapsed, depending on what makes the most sense.
In keyboard environments, each item in the tree view should be capable of accepting keyboard focus.
In some cases a tree view displays a checkbox next to each item, allowing the user to check and uncheck individual nodes.
A tree view can support selected nodes when it is used as a master list.
Development
Web component development
Component reference
p-tree
Displays hierarchical data in a tree, showing parent/child relationships
If you're adding PrimeNG to your solution for the first time, reference their setup documentation. It's important to note that the inclusion of the nova-light theme css is not necessary to work with Responsive UI. Styling for the PrimeNG components is provided by Responsive UI's theming.
Implementation
Add primeng and primeicons to your package.json file and use npm to install the modules.
"primeicons": "x.y.z",
"primeng": "x.y.z",
Import TreeModule from primeng/tree in your app.module.ts.
mport { TreeModule } from 'primeng/tree';
@NgModule({
declarations: [...],
imports: [
...
TreeModule
],
providers: [...],
bootstrap: [AppComponent]
})
export class AppModule { }
Add a p-tree element to the location in the view where you would like the tree view to display.
<p-tree [value]="treeData></p-tree>
In the Typescript file, import TreeNode from the PrimeNG/api and build the data tree on ngOnInit.
import { TreeNode } from 'primeng/api';
@Component({
...
})
export class TreeViewComponent implements OnInit {
public treeData: TreeNode[] = null;
ngOnInit(): void {
// Tree data for PrimeNG Treeview
this.treeData = [
{
'label': 'General',
'children': [{
'label': 'Accessibility'
},
{
'label': 'Restrictions'
},
{
'label': 'Language and Region'
}
]
},
{
'label': 'Notifications',
'children': [
{'label': 'Internal Notifications'},
{'label': 'External Notifications'}
]
},
{
'label': 'Control Center'
},
{
'label': 'Privacy'
}
];
}
}
If your tree view displays checkboxes, add the selectionMode property to the p-tree element with a value of ‘checkbox’. View the PrimeNG Tree documentation on how to capture the selections.
<p-tree [value]="treeCheckboxes" selectionMode="checkbox" [(selection)]="selectedCheckboxes"></p-tree>
Angular component development
Component reference
p-tree
Displays hierarchical data in a tree, showing parent/child relationships
If you're adding PrimeNG to your solution for the first time, reference their setup documentation. It's important to note that the inclusion of the nova-light theme css is not necessary to work with Responsive UI. Styling for the PrimeNG components is provided by Responsive UI's theming.
Implementation
Add primeng and primeicons to your package.json file and use npm to install the modules.
"primeicons": "x.y.z",
"primeng": "x.y.z",
Import TreeModule from primeng/tree in your app.module.ts.
mport { TreeModule } from 'primeng/tree';
@NgModule({
declarations: [...],
imports: [
...
TreeModule
],
providers: [...],
bootstrap: [AppComponent]
})
export class AppModule { }
Add a p-tree element to the location in the view where you would like the tree view to display.
<p-tree [value]="treeData></p-tree>
In the Typescript file, import TreeNode from the PrimeNG/api and build the data tree on ngOnInit.
import { TreeNode } from 'primeng/api';
@Component({
...
})
export class TreeViewComponent implements OnInit {
public treeData: TreeNode[] = null;
ngOnInit(): void {
// Tree data for PrimeNG Treeview
this.treeData = [
{
'label': 'General',
'children': [{
'label': 'Accessibility'
},
{
'label': 'Restrictions'
},
{
'label': 'Language and Region'
}
]
},
{
'label': 'Notifications',
'children': [
{'label': 'Internal Notifications'},
{'label': 'External Notifications'}
]
},
{
'label': 'Control Center'
},
{
'label': 'Privacy'
}
];
}
}
If your tree view displays checkboxes, add the selectionMode property to the p-tree element with a value of ‘checkbox’. View the PrimeNG Tree documentation on how to capture the selections.
<p-tree [value]="treeCheckboxes" selectionMode="checkbox" [(selection)]="selectedCheckboxes"></p-tree>
Design
Figma design
| Dev Component | Design Component Name |
|---|---|
| Tree view node text | Add a text element for each cell and apply the “rui-regular” text style and the “rui-pacific/text-regular” color style. |
| Tree view expand/collapse button | RUI / Tree View / Expand-Collapse Button |
| Selected node background | RUI / Tree View / Selected Background |
| Checkbox | RUI / Forms / Checkbox |
If your tree view will support selected nodes, which is the case when using a tree view as a hierarchical master list, add a selected node background behind one of the nodes to indicate that it is selected.
Adobe XD design
- Sample App - Tree View
| Dev Component | Design Component Name |
|---|---|
| Tree view node text | Add text and apply the “JHA / Text / Regular” character style. |
| Tree view expand button | JHA / Tree View / Expand Button |
| Tree view collapse button | JHA / Tree View / Collapse Button |
| Selected node background | JHA / Tree View / Selected Background |
| Checkbox – checked | JHA / Forms / Checkbox / Checked |
| Checkbox - unchecked | JHA / Forms / Checkbox / Unchecked |
If your tree view will support selected nodes, which is the case when using a tree view as a hierarchical master list, add a selected node background behind one of the nodes to indicate that it is selected.