Search code examples
sapui5

SAPUI 5 - Aggregated control with two data models


I have a generic tile control that the tile get created base on number of entity available (e.g.: SCARRSet), which is normal. Then in the nested Tile content i need to show the airline logo where the image path is stored in a JSON file. My idea is to use the key in SCARRSet/Carrid to lookup the JSON file to find the image path. So the right image will be displayed for the airline.

Previously i put the image path in Url field which was fine, but that field was meant for something else. Now i want to do it properly.

<l:HorizontalLayout id="hLayout1" allowWrapping="true" content="{flight>/SCARRSet}">
<GenericTile class="sapUiTinyMarginBegin sapUiTinyMarginTop tileLayout" 
    header="{flight>Carrname}"
    subheader="{flight>Carrid}" 
    press="onTilePressed"
    backgroundImage="">
    <TileContent unit="{flight>Currcode}" footer="">
        <ImageContent src="{flight>Url}" />
    </TileContent>
</GenericTile>
</l:HorizontalLayout> 

The JSON file looks like following. Is there a way to iterate through each tile to lookup Key = SCARRSet/Carrid then populate imageContent src=(e.g.:"/image/AA.gif")?

{
  "icon": [
  {
    "Key" : "AA",
    "Path" : "/image/AA.gif"
  },
...
]
}

Solution

  • I would use a formatter function to do the lookup:

    src="{formatter: '.formatter.getIconUrl', path: 'flight>Carrid'}"
    

    In the formatter getIconUrl you get the Carrid as input parameter.

    For performance reasons I would also suggest to reformat the JSON once to have a hash access to the url: jsonData[carrid] returns the url.