[SF][ui5-tree]: provide custom tree item

[GongRichard]

Feature Request Description

Our design contains tree pagination function, so we want add a "Show More" button in the last tree item. And we want to only have checkbox on each node text and without checkbox for subtree root node. So we need custom tree item to render the checkbox and need custom tree item to render "Show More" button for pagination. If possible, please provide this feature in version 1.8.0.

Proposed Solution

SAP Ui5 has custom tree item https://sapui5.hana.ondemand.com/#/entity/sap.m.CustomTreeItem/sample/sap.m.sample.CustomTreeItem, please also provide wc custom tree item to let app to customize the tree item.

Additional Context

Priority

• [ ] Low
• [ ] Medium
• [x] High
• [ ] Very High

A clear and concise description of the impact/urgency of the required feature.

Stakeholder Info (if applicable)

• Organization: {SAP SuccessFactors}
• Business impact: {...}

[Todor-ads]

Hello @SAP/ui5-webcomponents-topic-p take a look of this feature request.

Regards, Todor

[dobrinyonkov]

Internal Reference: BGSOFUIPIRIN-5936

[vladitasev]

Hello colleagues,

I'd like to share a few thoughts about this requirement: first, I think it's a valid requirement, other stakeholders might have it too. However, there are some technical challenges due to the tree's current API:

<ui5-tree id="tree" no-data-text="No data" mode="MultiSelect" accessible-name="Tree with accessibleName">
		<ui5-tree-item expanded text="Tree 1" icon="paste" additional-text="Available" indeterminate selected additional-text-state="Information" accessible-name="Tree item with accessibleName">
			<ui5-tree-item expanded text="Tree 1.1" additional-text="Re-stock" additional-text-state="Error" indeterminate selected>
				<ui5-tree-item text="Tree 1.1.1" additional-text="Required" additional-text-state="Warning" selected></ui5-tree-item>
				<ui5-tree-item text="Tree 1.1.2" additional-text="Available" additional-text-state="Success"></ui5-tree-item>
			</ui5-tree-item>
		</ui5-tree-item>
</ui5-tree>

Tree items are currently abstract items and not physical ones, and the content of these items is not slotted to the tree directly. Instead, a flat ui5-list is built internally based on the ui5-tree-item elements.

If we want to have items with truly customizable content, we'll need a flat API for the tree itself, mimicking the flat API of the list. This way each item can be directly slotted to the list. With the current API if there are several levels of nesting, and the user passed some content, the content from the tree item can be slotted to the upper-level tree item, and so on, but finally when it comes to the tree itself, we can only slot the tree items in the template of the tree.

Please explore the following possibilities:

• Is it possible to "trick" the ui5-tree/ui5-list components with "display: contents" and some more advanced ui5-list logic to find the list items recursively

The Tree.hbs would look like this:

<ui5-list
    .mode="{{mode}}"
    .headerText="{{headerText}}"
    .footerText="{{footerText}}"
    .noDataText="{{noDataText}}"
    .accessibleRole="{{_role}}"
    .accessibleName="{{_label}}"
    @ui5-item-click="{{_onListItemClick}}"
    @ui5-item-delete="{{_onListItemDelete}}"
    @ui5-selection-change="{{_onListSelectionChange}}"
    class="ui5-tree-root"
>
    <slot name="header" slot="header"></slot>
    <slot></slot>
</ui5-list>

Note the single default slot Here we'll slot all top-level tree items (physical items with custom content). Each of those will slot its own children (other tree items), etc. recursively, but the list must be able to work with the whole nested structure as a flat structure. Furthermore, we have to be able to tweak the list items in such a way that they don't look bad and look like part of the same list (since now we don't have a list that hosts all items, we have items in items which must look like a list).

This IMO would be difficult to pull off.

• Consider a new ui5-custom-tree component with a flat API:

<ui5-custom-tree>
 <ui5-custom-tree-item>Custom content</ui5-custom-tree-item>
     <ui5-custom-tree-item level="2">Custom content</ui5-custom-tree-item>
     <ui5-custom-tree-item level="2">Custom content</ui5-custom-tree-item>
         <ui5-custom-tree-item level="3">Custom content</ui5-custom-tree-item>
 <ui5-custom-tree-item>Custom content</ui5-custom-tree-item>
</ui5-custom-tree>

I've used indentation to make it easier to understand, but in reality this is nothing more than a flat list where every item has a "level" property to indicate with what indentation the list item should be rendered.

In the above example, the first and last items are top-level tree items (no level property, so 1 by default). The second and third items are children of the first item (have level=2 and are after the first item in the list). The fourth item a child of the third item.

[dobrinyonkov]

Item was planned and work has started with the current sprint.

[akshilverma]

@dobrinyonkov Can you please provide a timeline on when this feature will be available? Our product is live and our customers are already asking for an implementation that requires us to use custom tree item

[dobrinyonkov]

Hi @akshilverma, https://github.com/SAP/ui5-webcomponents/pull/5962 is under code review and I expect it to be merged soon and be part of the next release.

[akshilverma]

@dobrinyonkov I see that the 1.10.0 release is not out yet with these changes. Can you give me a timeline on when this feature will be available?

[akshilverma]

Can anyone give me a timeline on when this feature will be available?

[ilhan007]

Hello @akshilverma we are in the middle of large migration towards Typescript, and after internal discussion we decided to postpone the next stable release (that should have taken place in the beginning of Dec) until we migrate everything to Typescript and make sure everything works as before.

However, we can release a patch to include only this feature, so that you can consume it earlier. Our only question is where would you need it - usually we would make it as patch in the current 1.9, but is it also needed in the 1.7 (that SF also uses for its stable/released apps)?

BR, ilhan

[akshilverma]

Hi @ilhan007, thanks for your response. We are using version 1.9 right now, so a patch in the current 1.9 would suffice for us. Could you also give a timeline on when this patch will be available?

[ilhan007]

Hi @akshilverma, I see, we will release a patch by the end of this week

[akshilverma]

Hi @ilhan007, I don't see a new patch released for 1.9. Are you still releasing the patch or did something happen?

[akshilverma]

Hi @ilhan007, any update on this?

[ilhan007]

1.9.2 and the latest 1.9.3 includes it