CODEWITHSUNDEEP
javascriptsapui5
user3783327
user3783327

Reputation: 626

How to implement a CustomTile that can be consumed by sap.m.TileContainer in SAPUI5?

I extended a "CustomTile" with some other controls and plan to use it in a TileContainer. Example code for the new Tile:

jQuery.sap.declare("xyz.control.MySpecialTile");
jQuery.sap.require("sap.m.CustomTile");
sap.m.CustomTile.extend("xyz.control.MySpecialTile", {

    metadata : {
        properties : {
            "icon" : {
                type : "string",
                defaultValue : "sap-icon://shipping-status"
            }
        },
    },

    // will be called during creation time
    init : function() {
        this.addStyleClass("someStyle");
        var oCont = ... some content build with other controls ...      
        this.setContent(oCont);
    },
    renderer: {},
    onAfterRendering : function() {
    }
});

var oFunctions = new sap.m.TileContainer({
    width : "100%", // sap.ui.core.CSSSize
    height : "100%", // sap.ui.core.CSSSize
    tiles : [oCustomTile1, oCustomTile2, oMySpecialTile], // sap.ui.core.Control
});

Where: oCustomTile1 and oCustomTile2 are some standard CustomTiles and oMySpecialTile is an instance of my own tile.

If I place "oMySpecialTile" somewhere in a page, it will be shown, but if I place it in the TileContainer (as in the code) this tile will be hidden.

The question is, is there any problem in my code or is it a bug in the TileContainer? What I could assume, that the TileContainer checks the type of the elements and it does not know my "new" class?

My general idea is, to build a CustomTile with some defined content structure and some attributes can be defined via binding.

Upvotes: 2

Views: 3646

Answers (1)

Haojie
Haojie

Reputation: 5713

You need to call the base onAfterRendering function of sap.m.CustomTile:

onAfterRendering : function() {
    sap.m.CustomTile.prototype.onAfterRendering.call(this);
}

Please check and run the code snippet.

<script src="https://openui5.hana.ondemand.com/resources/sap-ui-core.js" id="sap-ui-bootstrap" data-sap-ui-theme="sap_bluecrystal" data-sap-ui-libs="sap.m"></script>
<script>
    jQuery.sap.declare("xyz.control.MySpecialTile");
    jQuery.sap.require("sap.m.CustomTile");
    sap.m.CustomTile.extend("xyz.control.MySpecialTile", {

        metadata: {
            properties: {
                "icon": {
                    type: "string",
                    defaultValue: "sap-icon://shipping-status"
                }
            },
        },

        // will be called during creation time
        init: function() {
            sap.m.CustomTile.prototype.init.call(this);
            this.addStyleClass("someStyle");
            var oCont = new sap.m.Button({
                text: "My Custom Tile 2"
            });
            //... some content build with other controls ...      
            this.setContent(oCont);
        },
        renderer: {},
        onAfterRendering: function() {
            sap.m.CustomTile.prototype.onAfterRendering.call(this);
        }
    });

    var container1 = new sap.m.TileContainer({
        width: "100%", // sap.ui.core.CSSSize
        height: "100%", // sap.ui.core.CSSSize
        tiles: [new sap.m.CustomTile({
            content: new sap.m.Button({
                text: "Custom Tile 1"
            })
        }), new xyz.control.MySpecialTile(), new sap.m.CustomTile({
            content: new sap.m.Button({
                text: "Custom Tile 3"
            })
        })],
        

    });




    new sap.m.App({
        pages: new sap.m.Page({
            enableScrolling: false,
            title: "Tile Container",
            content: [container1]
        })
    }).placeAt("content");
</script>

<body id="content">

</body>

Upvotes: 1

Related Questions