Skip to Content

Create Subgroup inside a group in List Items

Hello Experts,

I have a requirement where I need to create a sub group inside a group of list items. I am not able to achieve this. Any lead would be highly appreciated.

The Structure will be like:

List:

Group1:

- Item1

- - item 2

- item3

Group2:

- item1

- - item 2

- item 3

- item 4

Regards,

Gautam

Add comment
10|10000 characters needed characters exceeded

  • Get RSS Feed

6 Answers

  • Mar 05 at 11:02 AM

    Simply write all three items ...Consider following code :

    <List headerText="Products" items="{ path: '/ProductCollection' }" >

    <Text text = "{item1}" />

    <Text text = "{item2}" />

    <Text text = "{item3}" />

    </List>

    or Use VBox

    <List headerText="Products" items="{ path: '/ProductCollection' }" >

    <VBox>

    <Text text = "{item1}" />

    <Text text = "{item2}" />

    <Text text = "{item3}" />

    </VBox>

    </List>

    Add comment
    10|10000 characters needed characters exceeded

  • Mar 05 at 02:59 PM

    Hi Gautam,

    Hope this piece of code helps you.

    <List xmlns="sap.m">
    							<items>
        							<CustomListItem xmlns="sap.m">
                            			<content>
                                			<Label text="Food"></Label>
                                			<List xmlns="sap.m">
                                    			<items>
                                        			<StandardListItem title="Pizza"></StandardListItem>
                                        			<StandardListItem title="Burger"></StandardListItem>
                                    			</items>
                                			</List>
                            			</content> 
        							</CustomListItem>
        							<CustomListItem xmlns="sap.m">
                            			<content>
                                			<Label text="Drinks"></Label>
                                			<List xmlns="sap.m">
                                    			<items>
                                        			<StandardListItem title="Pepsi"></StandardListItem>
                                        			<StandardListItem title="Coca-Cola"></StandardListItem>
                                    			</items>
                                			</List>
                            			</content> 
        							</CustomListItem>
    							</items>
    						</List>
    

    Below is my Output Screen:

    Add comment
    10|10000 characters needed characters exceeded

  • Mar 05 at 10:46 PM

    As creating sub-groups is not supported out-of-the-box, consider using sap.m.Tree instead to emulate groups and sub-groups.

    Tree shares a lot of functionalities with List as it's also extended from sap.m.ListBase (except of "growing").

    Add comment
    10|10000 characters needed characters exceeded

    • Thanks Boghyon for your suggestion, but my requirement is quite different from this one. I am attaching one file here to make you more known to my requirement. Basically I need to achieve this.list.jpg

      list.jpg (82.1 kB)
  • Mar 06 at 12:24 AM

    using a sap.m.List. you can use the sorter like this https://jsbin.com/mibeq/21/edit?html,js,output

    thanks

    Dennis

    Add comment
    10|10000 characters needed characters exceeded

  • Mar 06 at 07:10 AM

    Hi,

    It all depends on how you write the model

    Consider following example :

    UI Code

    <List items="{/data}" headerText="Items">

    <DisplayListItem label="{title}" value="{item1}{item2}{item3}{item4}"/>

    </List>

    JSON Data:

    {

    "data":[ { "title": "Record1", "item1": "Item1", "item2": "Item2" },

    { "title": "Record2", "item1": "Item1", "item2": "Item2", "item3": "Item3" },

    { "title": "Record3", "item1": "Item1", "item2": "Item2", "item3": "Item3", "item4": "Item4" },

    { "title": "Record4", "item1": "Item1", "item2": "Item2", "item3": "Item3", "item4": "Item4", "item5": "Item5" } ]

    }

    Output:

    Add comment
    10|10000 characters needed characters exceeded

  • Mar 06 at 07:52 AM

    Hi Gautam,

    Try below solution.

    Make list as below.

    <List headerText="Products" items="{ path: '/ProductCollection' }" ><Text text = "{item}" /></List>

    Send data in Property "Item" of entity "ProductCollection" as put symbol "\n" between items,

    For example if a group has 3 items the pass data in property "Item" as : "Item1 \n Item 2 \n Item3" .

    If a group has 4 items the pass data in property "Item" as : "Item1 \n Item 2 \n Item3 \n Item4" .

    Thanks

    Add comment
    10|10000 characters needed characters exceeded