How to hilight a Tile in SAPUI5 on Page load (not on any press event)

[former_member243729]

Hi,

Have a requirement to highlight a tile (Generic Tile) based on a value in the model at run time (on load of the page and not on any press event). I know we can use CSS file to highlight the tile which I am able to do on press event but how to invoke a javascript function on load of this GenericTile and then add CSS class to it,..is what I am not getting. Below is what I have..

<GenericTile>

<tileContent>

<TileContent>

<Linktext="{path: 'oModel>Description'}"></Link>

</TileContent>

</tileContent>

</GenericTile>

[venkateswaran_k]

Hi

You mean, you want to highlight the Tile on Launch pad?

Or Tile inside an application ?

Regards,

Venkat

[former_member243729]

This is inside my application..not FIORI Launchpad tile.

[former_member243729 · Accepted solution]

I could achieve this using below code.

this.getView().byId("idTile").addEventDelegate({
 onAfterRendering : function (oEvent) 
  {
var oModel = oEvent.srcControl.getAggregation('content').oPropagatedProperties.oBindingContexts.TempModel;
var sPath = oModel.sPath;

    if(oModel.getProperty(sPath).DefaultFlag)
       oEvent.srcControl.addStyleClass("selected");
  }
});

[WouterLemaire]

You could try to use the custom data property like I do in this blog: https://blogs.sap.com/2016/08/02/dynamic-cell-color-of-sapuitabletable-using-xml-views/

but in your case in combination with a tile control

Kr. Wouter

[former_member243729]

In my case, based on the Text value the GenericTile should be highlighted. So if <Link text = "true"/> then the GenericTile should automatically highlighted. If the value is false then those Generic Tiles should not be highlighted.

<GenericTile>

<tileContent>

<TileContent>

<Linktext="{path: 'oModel>Description'}"></Link>

</TileContent>

</tileContent>

</GenericTile>

[catano]

Hi venkatasunil,

• Give id to your tile:

<GenericTile id="myTile">

• On load event in your controller access tile through view:

var oTile = this.getView().byId('myTile');

• Add custom class to highlight tile:

oTile.addStyleClass('myCustomCssClass');

Regards,

Peter

[catano]

Hi @ venkatasunil,
Did this solved your problem?

[venkateswaran_k]

Dear Venkata

Can you try the Generic tile as a KPI - which has some colour and indicator to highlight as below:

Refer to valueColor, Indicator

	<GenericTile class="yourcssclass"  tileLayout" header="Country-Specific Profit Margin" subheader="Expenses" press="onPress">
		<TileContent unit="EUR" footer="Current Quarter">
			<NumericContent scale="M" value="1.96" valueColor="Error" indicator="Up" withMargin="false" />
		</TileContent>
	</GenericTile>

Regards,Venkat

[former_member243729]

I haven't tried this but this will not color the tile, it will only color the NumericContent.