Multiple instances of a custom tile are copying themselves

[former_member57039]

Dear Community,

I am currently trying to develop new a custom tile SAPUI5 application that lets me change the background image of a tile inside a Fiori Launchpad Portal from SAP Cloud Platform Portal.

I have managed to setup the the custom tile and have it working. However, when I try to reuse the same SAPUI5 app for a different tile, with different properties, they end up being identical. Almost as it is not possible to use the same custom tile application for different purposes/instances.

I have followed the openSAP course "Building Portal Sites on SAP Cloud Platform", where I also have asked the following incident that has helped me: https://open.sap.com/courses/portal1/question/0992fd34-419f-4e27-b822-bc2ff61dc4e9?question_search_s...

The code inside the tile controller is the following:

onAfterRendering: function() {

var viewData = this.getView().getViewData().properties;

var genericTile = this.getView().byId(this.getView().createId("genericTile"));

var newsContent = this.getView().byId(this.getView().createId("newsContent"));

var srcURL = jQuery.sap.getModulePath("es4products") + "/images/" + viewData.tileImage;

genericTile.setBackgroundImage(srcURL); this.sUrl = viewData.sUrl;

newsContent.setContentText(viewData.title);

newsContent.setSubheader(viewData.display_subtitle_text);

},
onPress: function() { window.location.href = this.sUrl;
}

You can see the two tile setups here:

And when I publish and run the portal it looks like this:

Both work separately, if you only have one of them. But with two, it is like one of them overrides the other's properties.

What am I doing wrong? It seems like it is only logical that you can reuse the same SAPUI5 application, with different properties, and therefore I think I am doing something wrong..

I look forward to hearing from you.

Thank you very much.

Best regards,

Emil Stepanian

[Sharathmg]

You are creating the tile in the Hook method - onAfterRendering and IDs will remain the same for both tiles(as per the code).

Try separate methods and create in sequence with a unique id(append title/prefix variable to the id of the tile control).

Regards,

Sharath

[former_member57039]

Hi Sharath!

Thank you very much for your answer.

Although, I am quite new to SAPUI5, so I am not sure how you mean I should create separate methods and create in sequence unique IDs?

Can you please elaborate or give me a code example?

Best regards,

Emil Stepanian

[Sharathmg]

Every control in the HTML is rendered with a unique ID. If you do not provide an ID in your code, then the UI5 framework assigns an ID. This ID is dynamic and you will never be able to use that ID to access the control.

If you provide an ID, then it can be accessed using the code this.getView().byId("<ID provided in your code>").

Check about ID, in https://sapui5.hana.ondemand.com/#docs/guide/91f28be26f4d1014b6dd926db0e91070.html

Regards,

Sharath

[former_member199536]

Hi Emil,

Can you describe what exactly isnt working when you configure 2 custom tiles with the same SAPUI5 app?

Are the tile custom properties from one tile overriding that of the other?

Regrads, Ido

[former_member57039]

Hi Ido,

Sorry for answering this late.

Yes that is exactly what is happening - I was thinking that one usage of the custom tile SAPUI5 app would be independent of another, and therefore I would be able to use the same app, however just specifying different custom properties e.g. the image name.

You can see in the tileImage property it is two different values, but the first overrides the other. And when I swap the imageTile values, the other image is shown on both tiles. Therefore I am pretty sure the issue is that one tile is overriding the other's custom properties.

Best regards,

Emil Stepanian