How to reach upper context in UI5 XML Loops?

user_272839 0
Viewed 105

I wonder how to reach relatively the upper loop context when you are within a loop.

Let's say you have data like this:

{
  items: [
    {
      title: "My Title",
      subItems: [
        {
          name: "My name"
        }
      ]
    }
  ]
}

And a template like this:

  <List
    showSeparators="None"
    items="{path: 'model>/items', templateShareable: false}"
  >
    <items>
      <CustomListItem>
        <List
          showSeparators="None"
          items="{path: 'model>subItems', templateShareable: false}"
        >
          <items>
            <CustomListItem>
              <Text text="HOW TO PRINT 'My Title' HERE ??">
            </CustomListItem>
          </items>
        </List>

      </CustomListItem>
    </items>
  </List>

How can I print My Title in the <Text /> in the middle of both loops?

sapui5 templates xml
2 Answers

AFAIK, there is no way to do this in the XML template, unless the path is static:

<Text text="{model>/items/0/title}">

If it is not, you should consider checking factory functions.

When you use one, you basically override the default 'item cloner' and thus can add arbitrary logic there, e.g you can check if an item matches certain criteria and then bind it's property to the path you wish:

myItemFactory: function(sNewItemId, oBindingContext){
    const oItem = this.byId('myDependentTemplate').clone(sNewItemId);
    const bShouldDisplayTitle = oBindingContext.getProperty('shouldDisplayTitle');

    if(bShouldDisplayTitle){
        oItem.bindProperty('text','model>/my/path/to/prop');
    }

    return oItem;
}
user_131631120

There is no simple solution. Please have a look at Qmarco's answer.

The way around is to use a custom formatter. With custom formatter:

return this.getParent().getBindingContext("sample").getProperty("columnName");

you can access the upper context of the model with:

      <Title text="{
        path: 'sample>name',
        formatter: 'demo.model.formatter'
      }"

Here is the working plnkr code.

In your case, where you have a different control (List with CustomListItem) to access the parent control , you need to use getParent twice:

this.getParent().getParent().getBindingContext("sample").getProperty("columnName");
user_93299650
Related