furo-ui5-tree #

@furo/ui5 v1.18.0
import '@furo/ui5/src/furo-ui5-tree.js';
exports FuroUi5Tree js
exports <furo-ui5-tree> custom-element-definition
superclass LitElement
mixes FBP

Summary: tree navigation menu

Description #

furo-tree renders a tree structure

Data signature #

1
2
3
4
5
6

- type: 'tree.Tree #Navigation tree type with recursive navigation nodes'
  fields:
    root: 'tree.Navigationnode:1 #Root node of the tree'
    id: 'string:2 #[optional] Id of the tree'
    display_name: '- string:3 #[optional] String representation of the tree'
    description: 'string:4 #[optional] description of the tree'

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12

- type: 'tree.Navigationnode #Item of the navigationtree'
  fields:
    id: 'string:1 #Id of the node'
    display_name: '- string:2 #String representation of the node'
    children: '[] tree.Navigationnode:3 #Children of this node'
    open: 'bool:4 #node is open or not'
    secondary_text: 'string:5 #[optional] Secondary text of the node'
    description: 'string:6 #[optional] Searchable description of the node'
    icon: 'string:7 #[optional] icon of the node'
    key_words: 'string:8 #[optional] searchable key words of the node'
    has_error: 'bool:9 #[optional] error indicator'
    is_group_label: 'bool:10 #[optional] Mark node as group label'

Minimalistic Example #

Source for the tree part with keyboard navigation

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14

  <furo-ui5-tree
    fn-bind-data="--entityObj(*.data)"
    @-node-selected="--nodeSelected" 
    fn-trigger-navigation="--navigation"
  >
    <!-- add the furo-navigation-pad for keyboard navigation -->
    <furo-navigation-pad @-navigated="--navigation"></furo-navigation-pad>
  </furo-ui5-tree>

<furo-data-object
  type="tree.TreeEntity"
  fn-inject-raw="--data"
  @-object-ready="--entityObj"
></furo-data-object>

Example with deep link and root node set as header #

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29

<furo-ui5-tree
  slot="master"
  root-as-header
  fn-bind-data="--entityObj(*.data)"
  qp="panel"
  fn-location-in="--qp"
  @-node-selected="--nodeSelected"
  @-qp-change-requested="--qpchangerequest"
  fn-trigger-navigation="--navigation"
>
  <!-- add the furo-navigation-pad for keyboard navigation -->
  <furo-navigation-pad @-navigated="--navigation"></furo-navigation-pad>
</furo-ui5-tree>

<!-- update the location -->
<furo-location-updater fn-set-qp="--qpchangerequest"></furo-location-updater>
<!-- track location changes -->
<furo-location @-location-query-changed="--qp"></furo-location>

<furo-data-object
type="tree.TreeEntity"
fn-inject-raw="--data"
@-object-ready="--entityObj"
></furo-data-object>
<furo-fetch-json
fn-fetch="--entityObj"
src="/mockdata/trees/1/testdata.json"
@-data="--data"
></furo-fetch-json>

Attributes and Properties #

tabindex #

tabindex reflects number default: 0

Sets the tabindex

expandDepth #

expand-depth number default: 2

Sets the maximal expand level relative from the current node.

Expanding is a expensive operation.

depth #

depth Number

Maximal depth for the tree. Default is infinite.

qp #

qp String

Query param to watch. Set qp to have a deep linkable tree.

If you set this attribute, the node-selected event will only be fired on fn-qp-in or fn-select-by-id.

If you select an item the qp-change-request will be fired instead. With the qp-change-request event, you should update the url. A furo-location should watch the url and update the location on the tree, which will trigger a node-selected event.

1
2
3
4
5
6

<furo-location at-location-query-changed="--qp"></furo-location>
<furo-ui5-tree
   qp="panel"
   fn-location-in="--qp" at-qp-change-requested="--qpchangerequest"></furo-ui5-tree>
<!-- update the location with the selected tree item -->
<furo-location-updater fn-set-qp="--qpchangerequest"></furo-location-updater>

rootAsHeader #

root-as-header Boolean

Set this flag if you do not want a header-text section.

hideRootNode #

hide-root-node Boolean

Set this flag if you do not want to see the root node

headerText #

header-text String

Override display name from root object

secondaryText #

secondary-text String

Override description from root object.

focused #

focused reflects Boolean

indicates that the element is focused

Events #

node-focused #

at-node-focused → focused field

Fired when

branch-focused #

at-branch-focused → focused field

Fired when

leaf-focused #

at-leaf-focused → ``

Fired when

node-selected #

at-node-selected → selected field

Fired when the item gets selected, does not fire when you work with query params

qp-change-requested #

at-qp-change-requested → Object {"this.qp": this._selectedField.id._value}

Fired when qp mode is enabled. Nodes are only selectable with qpIn or selectById

branch-selected #

at-branch-selected → selected field

Fired when

leaf-selected #

at-leaf-selected → selected field

Fired when

node-opened #

at-node-opened → ``

Fired when a node is opened

node-closed #

at-node-closed → ``

Fired when a node is closed

nodes-expanded #

at-nodes-expanded → ``

Fired when nodes are expanded recursive

nodes-collapsed #

at-nodes-collapsed → ``

Fired when nodes are collapsed recursive.

Methods #

collapseFocused #

collapseFocused() ⟹ void

* → fn-collapse-focused

collapses the focused element. If it is closed the parent will be focused.

expandFocused #

expandFocused() ⟹ void

* → fn-expand-focused

expands the focused node, if it is opened the first child will be focused

expandFocusedRecursive #

expandFocusedRecursive() ⟹ void

* → fn-expand-focused-recursive

expands the focused node recursive

collapseFocusedRecursive #

collapseFocusedRecursive() ⟹ void

* → fn-collapse-focused-recursive

collapses the focused node recursive

selectFocused #

selectFocused() ⟹ void

* → fn-select-focused

selects the focused element.

search #

search(term `` ) ⟹ []

`` → fn-search

Search in the visible nodes

• term
  
  

searchOpenTree #

searchOpenTree() ⟹ void

* → fn-search-open-tree

resetSearch #

resetSearch() ⟹ void

* → fn-reset-search

Disables the search mode and clears the term

focusParent #

focusParent() ⟹ void

* → fn-focus-parent

Focuses the parent tree node without selecting it.

The tree item will also scrollIntoViewIfNeeded() (on all platforms which support this method).

focusPrevious #

focusPrevious() ⟹ void

* → fn-focus-previous

focus the previous visible node.

The tree item will also scrollIntoViewIfNeeded() (on all platforms which support this method).

qpIn #

qpIn(qpObject `` ) ⟹ void

`` → fn-qp-in

Selects the node which is defined on qp

Use this, if you do not have a location object.

• qpObject
  
  

locationIn #

locationIn(locationObject `` ) ⟹ *|boolean

`` → fn-location-in

Inject a location object, which contains a query param property to select the current node.

• locationObject
  
  

selectById #

selectById(nodeID `` ) ⟹ void

`` → fn-select-by-id

• nodeID
  
  

selectPrev #

selectPrev() ⟹ void

* → fn-select-prev

select the previous visible item

expandNodeRecursive #

expandNodeRecursive() ⟹ void

* → fn-expand-node-recursive

expands the currently selected node recursive

expandAll #

expandAll() ⟹ void

* → fn-expand-all

collapseAll #

collapseAll() ⟹ void

* → fn-collapse-all

collapseNodeRecursive #

collapseNodeRecursive() ⟹ void

* → fn-collapse-node-recursive

expands the currently selected node recursive

toggle #

toggle() ⟹ void

* → fn-toggle

toggles the currently selected node

addSubNode #

addSubNode(rawNode `` ) ⟹ void

`` → fn-add-sub-node

• rawNode
  
  

deleteNode #

deleteNode() ⟹ void

* → fn-delete-node

selectNext #

selectNext() ⟹ void

* → fn-select-next

select the next visible item

triggerNavigation #

triggerNavigation(key `` ) ⟹ void

`` → fn-trigger-navigation

• key
  
  

focusFirst #

focusFirst() ⟹ void

* → fn-focus-first

Focuses the first node in the tree without selecting it.

Use selectFocused to select the focused node.

The tree item will also scrollIntoViewIfNeeded() (on all platforms which support this method).

focusLast #

focusLast() ⟹ void

* → fn-focus-last

Focuses the last node in the tree without selecting it.

Use selectFocused to select the focused node.

The tree item will also scrollIntoViewIfNeeded() (on all platforms which support this method).

focusNext #

focusNext() ⟹ void

* → fn-focus-next

focuses the next visible tree node.

The tree item will also scrollIntoViewIfNeeded() (on all platforms which support this method).

focus #

focus() ⟹ void

* → fn-focus

focuses the tree itself. You can use this in combination with keyboard navigation (furo-navigation-pad)

bindData #

bindData(treeNode NavigationNode|Tree ) ⟹ void

NavigationNode|Tree → fn-bind-data

Binds a FieldNode.

Supported types: everything with a tree.Tree or tree.Navigationnode signature.

• treeNode Fieldnode
  
  

focusSelected #

focusSelected() ⟹ void

* → fn-focus-selected

Focuses the currently selected tree item.

The tree item will also scrollIntoViewIfNeeded() (on all platforms which support this method).

Styling #

The following custom properties available for styling: