OpenUI5 CustomTile binding does not work

Question

I have created a custom tile , but I´m experiencing some difficulties that I don´t understand. What I have so far

Custom tile:

jQuery.sap.declare("myControls.myMenuTile");
jQuery.sap.require("sap.m.CustomTile");

sap.m.CustomTile.extend("myControls.myMenuTile", {
metadata: {
    properties: {
        "header": {
            type: "string",
            defaultValue: "myMenuTile"
        },
        "icon": {
            type: "string",
            defaultValue: "sap-icon://shipping-status"
        },
        // some more properties here...
    },
},

// will be called during creation time
init: function() {
    sap.m.CustomTile.prototype.init.call(this);

    this.addStyleClass("myMenuTileClass");

    // Header text
    var txt = new sap.m.Text({
        textAlign: "Center"
    });

    txt.addStyleClass("myMenuTile_Text");  
    txt.bindProperty("text", "header");      // --> POINT OF INTERREST <--
    var textFlex = new sap.m.FlexBox({
        fitContainer: true,
        alignItems: "Center",
        justifyContent: "Center",
        items: [txt]
    });
    textFlex.addStyleClass("sapUiTinyMargin");

    // some more code here...

    var flexBox = new sap.m.FlexBox({
        direction: "Column",
        fitContainer: true,
        height: "100%",
        width: "100%",
        class: "sapUiTinyMargin",
        items: [textFlex]
    });

    this.setContent(flexBox);
}

Part of the view:

<TileContainer id="tileContainer"
               tiles="{path: '/Row'}"
               style="width: 100%;"
               >
    <!--<StandardTile icon="{ICON}" 
                      title="{TEXT}" 
                      press="onTilePressed" 
                      />-->
    <ctrl:myMenuTile header="{TEXT}"
                     icon="{ICON}" 
                     press="onTilePressed"
                     class="sapUiTinyMargin"
                     />
</TileContainer>

The bound fields TEXT and ICON are in the sap.ui.model.xml.XMLModel which is loaded from the database. They are upper case, because Oracle makes colums upper case. When I use the StandardTile the TEXT and the ICON are shown correctly. When I use the custom tile no text and no Icon is shown.

But I have found out, that when I change the line (see POINT OF INTERREST)

txt.bindProperty("text", "header");

to

txt.bindProperty("text", "TEXT");

the correct text is shown. As I understand data binding I would like to create the binding on the property header and not on the database field, so that I can bind whatever text column of the model to the header property.

What am I missing? Thanks for your help in advance.

Best regards Jochen

Alan Alan · Accepted Answer · 2016-11-20T05:03:37

Why are you binding the property in your custom title ? When you are binding the model to the control in the view, the control will receive the value. Therefore, it's not necessary to bind it once again.

Just try to replace the following line txt.bindProperty... with txt.setText(this.getHeader()).

OpenUI5 CustomTile binding does not work

1 Answers