Skip to Content
0
Sep 07, 2023 at 10:13 AM

How to use sap:m:Tree with nested items?

36 Views Last edit Sep 07, 2023 at 10:48 AM 4 rev

I am trying to build a Tree from the following JSON structure:

books: [
    {    
         bookTitle: "Book #1",
         bookChapters: [
             {
                 chapterNumber: 1,
                 chapterTitle: "Chapter #1.1"
             },
             {
                 chapterNumber: 2,
                 chapterTitle: "Chapter #1.2"
             }
        ]
    },
    {    
         bookTitle: "Book #2",
         bookChapters: [
             {
                 chapterNumber: 1,
                 chapterTitle: "Chapter #2.1"
             },
             {
                 chapterNumber: 2,
                 chapterTitle: "Chapter #2.2"
             }
        ]
    }
]

The goal is to have the tree main entries represent the books, and by expanding a book, I want to see all chapters of that book.
However, I don't find a way to bind the top-level nodes to the books/bookTitle path, and then to bind the second-level nodes to the books/bookChapters/chapterTitle path.

From the official samples, it seems like all nested nodes only can be bound to the same name. However, there must be a way to specify a path on each level?

My current Code looks as follows:

<m:Tree
    id="booksTree"
    items="{path: '/books'}">
	<m:StandardTreeItem title="{bookTitle}"></m:StandardTreeItem>
</m:Tree>

Thanks for any advice!