CODEWITHSUNDEEP
xmlsapui5northwind
chocolate cake
chocolate cake

Reputation: 2479

How to add dynamic id with sapui5?

I have a page that contains a couple of genericTiles. The tile content have respectively an image. The image comes from the northwind service and I have to get the data in my controller. So, every image tag needs an id. How can I do this? Or is there may a better way?

App.view.xml:

<Page expandable="true" expanded="true" id="categories" title="Categories" class="sapUiStdPage" content="{invoice>/Categories}">
   <content>
        <GenericTile class="tileLayout" header="{invoice>CategoryName}"
                     subheader="{invoice>Description}" press="onPressCategoryTile"> 
            <tileContent>
                <TileContent>
                    <content>
                        <Image id="categoryImage" class="categoryImageStyle"/>
                    </content>
                </TileContent>
            </tileContent>
        </GenericTile>
    </content>
</Page>

controller onInit:

var sUrl, oImg;
sUrl = "http://services.odata.org/V2/Northwind/Northwind.svc/Categories(1)/Picture?$format=json";
oImg = this.byId("categoryImage");

$.get( sUrl, function( data ) {
    var sTrimmedData = data.d.Picture.substr(104);
    oImg.setSrc("data:image/bmp;base64," + sTrimmedData);
});

I want to add another image for every category. Therefore, the image tag needs an id that contains the index of the category.

How can I achieve this?

Upvotes: 0

Views: 2185

Answers (2)

Stephen S
Stephen S

Reputation: 3994

You don't need to get the id of each image & assign the src. A formatter can be used for this. You can trim the base64 text in the formatter and return the text string.

XML:

<GenericTile class="tileLayout" header="{invoice>CategoryName}"
                 subheader="{invoice>Description}" press="onPressCategoryTile"> <!-- class: sapUiTinyMarginBegin sapUiTinyMarginTop -->
        <tileContent>
            <TileContent>
                <content>
                    <Image src="{
                            path: 'invoice>Picture',
                            formatter: '.formatter.formatImage'
                        }" class="categoryImageStyle"/>
                </content>
            </TileContent>
        </tileContent>
    </GenericTile>

Controller:

sap.ui.define([
  "com/sap/app/controller/BaseController",
  "com/sap/app/model/formatter"
], function (BaseController, formatter) {

BaseController.extend("com.sap.app.controller.Detail", {
    formatter: formatter,
    onInit: function () {
        ...
        ...

Formatter: 

sap.ui.define([], function () {
"use strict";
return {

    formatImage : function(data){
        var sTrimmedData = data.substr(104);
        return "data:image/bmp;base64," + sTrimmedData;
    }
}

});

Upvotes: 1

krisho
krisho

Reputation: 1044

Can you access the tile like this? (instead if using the ID)

Inside onInit, to get all the tiles this.getView().getContent().getContent()

Upvotes: 1

Related Questions