-1

I'd like to use sap.m.TileContainer to display tiles with some info. The SAP sample is not really useful as it does not follow the guidelines such as using manifest.json etc...

So I built an app in SAP Web IDE from scratch. I am using TileContainer to display tiles. Its tile aggregation is bound to a local JSON data file.

The data file contains an array with three items. However, only two are displayed after rendering. Any suggestions why?

This is my data.json:

{
    "TileCollection": [{
        "title": "Slovenská Republika",
        "info": "support for SR",
        "flag": "",
        "icon": "sap-icon://inbox"
    }, {
        "title": "Deutschland",
        "info": "support for DE",
        "flag": "",
        "icon": "sap-icon://inbox"
    }, {
        "title": "Ceska Republika",
        "info": "support for CZ",
        "flag": "",
        "icon": "sap-icon://inbox"
    }]
}

This is my XML view:

<mvc:View
    controllerName="com.support_page.controller.App"
    height="100%"
    xmlns:mvc="sap.ui.core.mvc"
    xmlns:core="sap.ui.core"
    xmlns:tnt="sap.tnt"
    xmlns="sap.m">
    <Page
        showHeader="true"
        enableScrolling="false">
        <TileContainer
            id="container"
            tileDelete="handleTileDelete"
            tiles="{/TileCollection}">
            <StandardTile
                icon="{icon}"
                title="{title}"
                info="{info}"
                activeIcon="{flag}"/>
        </TileContainer>
    </Page>
</mvc:View>
Boghyon Hoffmann
  • 17,103
  • 12
  • 72
  • 170
Michal Vanicky
  • 1
  • 2
  • Hmm, I don't see why it should display only two tiles from the current code. Any error message in the browser console? Are you [disabling the cache](https://developers.google.com/web/tools/chrome-devtools/network-performance/reference#change_loading_behavior) when updating the page? What does `yourTileContainer.getBinding("tiles").getLength()` return? – Boghyon Hoffmann Oct 31 '17 at 09:50
  • Btw. [`sap.m.TileContainer`](https://openui5nightly.hana.ondemand.com/#/api/sap.m.TileContainer/overview) as well as all the Tiles except of `sap.m.GenericTile` are deprecated as of version 1.50. Just as a side note.. – Boghyon Hoffmann Oct 31 '17 at 09:54
  • no error in console, cache is not disabled. yourTileContainer.getBinding("tiles").getLength() = 0 in onInit or onBeforeRendering or even onAfterRendering – Michal Vanicky Oct 31 '17 at 11:28
  • if tileContainer is to be deprecated, what should be used instead? also, where did you get that info from? – Michal Vanicky Oct 31 '17 at 11:30
  • I meant, it's better to disable the cache so that the browser doesn't display outdated data when it's updated. About the deprecation: You can see the notice in the current nightly version of the API Reference that I linked to in the previous comment. It says "Deprecated since 1.50. replaced by a container of your choice with [sap.m.GenericTile](https://openui5nightly.hana.ondemand.com/#/api/sap.m.GenericTile) instances". – Boghyon Hoffmann Oct 31 '17 at 11:33
  • so how do i manage to populate my view with tiles based on json ? i do not wish to do it manually one by one, but tilecontainer somehow doesnt work. for the future how would you use the generic tile? as an aggregation of what exactly? – Michal Vanicky Oct 31 '17 at 12:14

2 Answers2

0

many thanks for your suggestion

in the meantime i solved it with tile container as well.

what i did is that i used NOT a default model. i initialised the model in component.js then used model>/TileCollection and it worked though i am still a bit confused. nevertheless, thanks for you answer as well.

Michal Vanicky
  • 1
  • 2
  • Glad you could solve the problem. You can also accept your own answer to inform others about it. But what was the part that was a bit confusing? – Boghyon Hoffmann Oct 31 '17 at 13:34
-1
I solved this issue , even i was facing same issue , If you dont use local model you will not face issue or if you define your model in controller you will not face the issue.
sap.ui.define([
    "sap/ui/core/mvc/Controller",
    "sap/ui/model/json/JSONModel"
], function(Controller,JSONModel) {
    "use strict";

    return Controller.extend("SmartPurchaseReq.controller.Home", {

        /**
         * Called when a controller is instantiated and its View controls (if available) are already created.
         * Can be used to modify the View before it is displayed, to bind event handlers and do other one-time initialization.
         * @memberOf SmartPurchaseReq.view.Home
         */
            onInit: function() {
                var that = this;
                var data = {
    "TileCollection" : [
        {
            "icon" : "sap-icon://hint",
            "type" : "Monitor",
            "title" : "Tiles: a modern UI design pattern for overview & navigation."
        },
        {
            "icon" : "sap-icon://inbox",
            "number" : "89",
            "title" : "Approve Leave Requests",
            "info" : "Overdue",
            "infoState" : "Error"
        },
        {
            "type" : "Create",
            "title" : "Create Leave Requests",
            "info" : "28 Days Left",
            "infoState" : "Success"
        },
        {
            "icon" : "sap-icon://travel-expense-report",
            "number" : "281",
            "numberUnit" : "euro",
            "title" : "Travel Reimbursement",
            "info" : "1 day ago"
        },
        {
            "icon" : "sap-icon://loan",
            "number" : "2380",
            "numberUnit" : "euro",
            "title" : "My Salary",
            "info" : "8 days ago"
        },
        {
            "icon" : "sap-icon:`enter code here`//lab",
            "number" : "1",
            "numberUnit" : "Invention",
            "title" : "Test Lab Reports",
            "info" : "8 Days Ago"
        },
        {
            "icon" : "sap-icon://inbox",
            "type" : "Monitor",
            "title" : "Leave Request History"
        },
        {
            "type" : "Create",
            "title" : "Create Purchase Order",
            "info" : "890€ Open Budget",
            "infoState" : "Success"
        },
        {
            "icon" : "sap-icon://stethoscope",
            "number" : "3",
            "title" : "Yearly Health Check",
            "info" : "3 year overdue",
            "infoState" : "Error"
        },
        {
            "icon" : "sap-icon://meal",
            "type" : "Monitor",
            "title" : "Meal Schedule"
        }

    ]
};
                 var DummyModel = new JSONModel(); 
                 DummyModel.setData(data);
                // var sPath = jQuery.sap.getModulePath("model", "/Dummy.json");
                // var DummyModel = new JSONModel(sPath);
                that.getView().byId("container").setModel(DummyModel);
            },
            OnTilePress: function(evt) {
                var idj = evt.getSource();
                var d =5;
            }

        /**
         * Similar to onAfterRendering, but this hook is invoked before the controller's View is re-rendered
         * (NOT before the first rendering! onInit() is used for that one!).
         * @memberOf SmartPurchaseReq.view.Home
         */
        //  onBeforeRendering: function() {
        //
        //  },

        /**
         * Called when the View has been rendered (so its HTML is part of the document). Post-rendering manipulations of the HTML could be done here.
         * This hook is the same one that SAPUI5 controls get after being rendered.
         * @memberOf SmartPurchaseReq.view.Home
         */
        //  onAfterRendering: function() {
        //
        //  },

        /**
         * Called when the Controller is destroyed. Use this one to free resources and finalize activities.
         * @memberOf SmartPurchaseReq.view.Home
         */
        //  onExit: function() {
        //
        //  }

    });

});
Sudip Ghosh
  • 51
  • 1
  • 2