CODEWITHSUNDEEP
javascriptsapui5
Galadriel
Galadriel

Reputation: 369

How to nest two data models in a data binding in sapui5

I want to do something like the following in sapui5, where two lists are nested, but the description is not showed, no matter what I change.

Can anyone help? Is it possible at all?

And what's more, I actually just want to add some text-controls or labels in the inner list (and I need something like a list with path or items to bind it), is there another possibility to do this instead of StandardListItem, so that it fits better to the upper part?

    <List headerText="Events" items="{path: 'model1>/'}" >
       <items>
        <CustomListItem type="Navigation">
             <HBox>
                <VBox>
                    <Label text="{model1>message}"/>
                    <Text text="{model1>date}"></Text>
                    <Text text="{model1>time}"></Text>

                    <List id="MasterAttributeList" items="{ path: 'model2>/' }">
                            <items>
 critical part -->            <StandardListItem title="{model1>description}" 
                                           description="{model2>{= ${model1>key}}}"/>
                            </items>
                       </List>
                </VBox>
                 </HBox>
             </CustomListItem>
        </items>               
    </List>

Best regards!

Upvotes: 0

Views: 500

Answers (2)

Marc
Marc

Reputation: 6190

I would suggest using a formatter.

The function then might look like this:

formatDescription(oItem, sKey) {
    return oItem[sKey];
}

and your XML might look like this

    <StandardListItem 
        title="{model1>description}"
        description="{ 
            parts: [ 'model2>', 'model1>key' ], 
            formatter: '.formatter.formatDescription' 
        }"/>

Explanation: By using model2> as a part of your formatter, you are passing the complete object (and not just a single property) which is bound to the item to the formatter.

For your second question, why don't you use another CustomListItem in your inner list which fits your needs?

Upvotes: 0

Inizio
Inizio

Reputation: 2256

You cant bind they way you did, as it is a aggregation binding. As per your XML view it is a nested list, it means that you need to have nested data to bind.

For example: Nested Data

{ 
  'items': [
    { 
        'message': "ss", 
        'date': "2020-12-12", 
        'time': "12:00",
        'items1': [
            { 'description': "description", 'key': "2141" },
            { 'description': "description", 'key': "2141" },
            { 'description': "description", 'key': "2141" }     
        ]

    }, 
    { 
        'message': "ss", 
        'date': "2020-12-12", 
        'time': "5:00",
        'items1': [
            { 'description': "description", 'key': "2141" },
            { 'description': "description", 'key': "2141" },
            { 'description': "description", 'key': "2141" }     
        ] 
    }, 
    { 
        'message': "fff", 
        'date': "2020-12-12", 
        'time': "8:00",
        'items1': [
            { 'description': "description", 'key': "2141" },
            { 'description': "description", 'key': "2141" },
            { 'description': "description", 'key': "2141" }     
        ]  
    }
  ] 
}

The above data works fine for the nested list and also need to mention the templateShareable: true property as well

<List headerText="Events" items="{path: '/items'}" >
    <items>
       <CustomListItem type="Navigation">
         <HBox>
            <VBox>
                <Label text="{message}"/>
                <Text text="{date}"></Text>
                <Text text="{time}"></Text>
                <List items="{path:'items1', templateShareable: true}">
                    <items>
                        <StandardListItem title="{description}" description="{key}"/>
                    </items>
                </List>
            </VBox>
        </HBox>
    </CustomListItem>
  </items>
</List>

Note: Use formatting as per your requirement.

Upvotes: 0

Related Questions