Read Tiles from a Fragment SAP UI5

Question

Below is a fragment of UI5. I have assigned a class="myGreen" is a custom css style I created. I am able to get all the tiles are green which is good. But I wanted to send different styles for each Tile. Like myRed or myYellow. If I try to send these class names through JSON , the tile color does not change. I passed it in the tag {myModel1>className}. How can we read a tile from the fragment and change its color if the below method is not possible ?

 <StandardTile 
    icon="{myModel1>icon}"  
    number="{myModel1>number}"  
    info="{myModel1>info}"
    infoState="{myModel1>infostate}" 
    title="{myModel1>title}" 
    numberUnit="{myModel1>numberunit}"
    press="handleTilePress"
    class="{myModel1>className}"/>

Code without JSON sending the Class name is below:

    <core:FragmentDefinition xmlns="sap.m"
                          xmlns:f="sap.ui.layout.form" xmlns:core="sap.ui.core" xmlns:mvc="sap.ui.core.mvc"
    xmlns:html="http://www.w3.org/1999/xhtml" xmlns:l="sap.ui.layout">
 <Page id="tileInfo" showHeader="false" enableScrolling="true" > 
    <TileContainer    
      id="getTiles"

      tiles="{myModel1>TILECOLLECTION}">    
      <StandardTile 
        icon="{myModel1>icon}"  
        number="{myModel1>number}"  
        info="{myModel1>info}"
        infoState="{myModel1>infostate}" 
        title="{myModel1>title}" 
        numberUnit="{myModel1>numberunit}"
        press="handleTilePress"
        class="myGreen"    
        />   
        </TileContainer>   
       </Page> 
</core:FragmentDefinition>

Does this answer your question? [Binding in Control with "class" Attribute](https://stackoverflow.com/questions/42221962/binding-in-control-with-class-attribute) — Boghyon Hoffmann, Jul 12 '21 at 16:19

techippo.com · Answer 1 · 2017-09-22T13:01:25.793

0

Workaround for this requirement would be using formatter function on any of the properties and use addStyleClass method. Solution2:Not an elegant solution Not dynamic also.You can use css to change the colors of the tile like below.

    .sapMTile:nth-child(1){
  background:red;
}
.sapMTile:nth-child(2){
  background:blue;
}
.sapMTile:nth-child(3){
  background:green;
}

sample jsbin

edited Sep 22 '17 at 13:01

answered Sep 20 '17 at 07:08

techippo.com

245
1
4

Thank you but addStyleClass is possible only after reading each tile by Id. Could you please let me know how to read the tiles from the fragments – Chethan Sep 21 '17 at 17:55
@Chethan I tried with addStyleClass but i was unable to get the tile id's.I have shared another answer.Have a look – techippo.com Sep 22 '17 at 12:57
Thank you. I appreciate the effort in answering this. The solution works for the particular problem but as you said it is not dynamic.... I add few more logics to get the tiles dynamically and attach the style but unfortunately I am yet to retrieve the tiles.... Refer to the link {link}https://stackoverflow.com/questions/46350403/how-to-read-all-the-tiles-in-the-tile-container-sap-ui5/46350517#46350517 – Chethan Sep 22 '17 at 18:38
Why dont you use nested view instead of a fragment.I have shared a plunkr example in the question you mentioned.I think the problem with fragment is it has to be made dependent of the view. – techippo.com Sep 25 '17 at 12:22

score 0 · Answer 2 · answered Sep 20 '17 at 08:48

<StandardTile 
    icon="{myModel1>icon}"  
    number="{myModel1>number}"  
    info="{myModel1>info}"
    infoState="{myModel1>infostate}" 
    title="{myModel1>title}" 
    numberUnit="{myModel1>numberunit}"
    press="handleTilePress">   
        <customData>
            <core:CustomData key="css" value="myGreen" writeToDom="true" />
        </customData>
</StandardTile>

Bind key and value accordingly form your model for customData control

For CSS selector use the following code

div[data-css="myGreen"] { border: 3px solid #000; }

score 0 · Answer 3 · answered Oct 24 '17 at 01:55

Below is the Answer:

    onBeforeRendering: function(oEvent) {
        var fragmentId = this.getView().createId("myFragment");
        var tileContainer = sap.ui.core.Fragment.byId(fragmentId,"getTiles");
        var oTiles = tileContainer.getTiles();
            oTiles.addStyleClass('myGreen');
    },

Read Tiles from a Fragment SAP UI5

3 Answers3