ui5-tree: new component

[Hubery-Shen]

Hi UI5 WebComponent Team ,

I am from Web Experience Team in SAP SuccessFactors.

Feature Request
There is no a tree component available in ui5 web component library.
We need a tree component to go on our development.
The tree component is looks like:

https://sapui5.hana.ondemand.com/#/entity/sap.m.Tree/sample/sap.m.sample.Tree

Addition
And we can define the DOM structure that will be displayed in tree. ( for example: CheckBox )

Thank you.

[vladitasev]

Hi @Hubery-Shen

We'll implement this component sometime next month, hopefully in the next 2 weeks.

[vladitasev]

Consider sample API:

<ui5-tree show-checkboxes>
	<div slot="header">Optional header<div>
	
	<ui5-tree-item expanded text="Tree 1" icon="paste" checked>
		<ui5-tree-item expanded text="Tree 1.1">
			<ui5-tree-item text="Tree 1.1.1"></ui5-tree-item>
			<ui5-tree-item text="Tree 1.1.2"></ui5-tree-item>
		</ui5-tree-item>
	<ui5-tree-item>
	
	<ui5-tree-item text="Tree 2"></ui5-tree-item>
	
</ui5-tree>

New component ui5-tree in the main package:

• show-checkboxes or similar in meaning property
• supports header slot for info toolbar (as per Fiori design)
• has busy or loading property (make it consistent with what we have for others): the user can set to true when they need to fetch subnodes from the database f.e. This property sets a block layer on the whole tree and shows a busy indicator.
• supports ui5-tree-items (default slot)

ui5-tree-item:

• checked property that only has effect if the tree is in checkbox mode. Clicking this does not do anything out of the box (it's up to the app f.e. to select all subnodes if that's their logic)
• expanded property that tells if the node is expanded (collapsed by default). This property may be changed by user interaction (clicking the arrow).
• text property specifying the node value
• icon property to show an icon (only visual, non-interactive)
• may slot multiple other tree items recursively
• toggle event that is fired whenever the user collapses/expands the tree

Drag n drop support will be added subsequently. Not targeted for the initial version.

Nice to have public methods, relevant for both ui5-tree and ui5-tree-item:

• expandAll
• collapseAll
• checkAll
• uncheckAll
• walk (method that accepts 2 parameters - callback to be executed for each node and alogorithm - depth or width first search) that the user can easily use to go over all nodes and do some work.

[Hubery-Shen]

Hi @vladitasev
Thank you for your quick reply and strong support.
The ui5-tree component looks cool and will meet our needs.

I read the sample api and have some questions:
for this code:

<ui5-tree-item text="Tree 1.1.2"></ui5-tree-item>

can we define the content of ui5-tree-item ?
for example :

<ui5-tree-item text="Tree 1.1.2">
     <ui5-checkbox text="Chocolate" checked></ui5-checkbox>
</ui5-tree-item>

[vladitasev]

@Hubery-Shen We are going to provide another API for the checkbox, we'll demonstrate it tomorrow. If this is not enough, they we can surely make one more slot for the content.