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"
},
...
]
}
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.