creating dynamic table with data from odata service in ui5

Question

I'm a complete newb on sap ui5.

I'm trying to generating a table on my webpage generated in sap web ide. The data for this table is a .json file accessed via odata service.

I've come this far:

oModel is generated:

function initModel() {
    var sUrl = "/sap/opu/odata/sap/ZGWS_someService/CollectionSet?$format=json";
    var oModel = new sap.ui.model.odata.ODataModel(sUrl, true);
    sap.ui.getCore().setModel(oModel);
}

now I want to generate a table on my html site with the data in the .json file. So I have to create columns based on the properties of the items and then filling the rows with the current data.

.json looks like this:

{
"d": {
"results": [
{
"property1": "123",
"property2": "346"
},
{
"property1": "123",
"property2": "555"
}

I have no solution for this yet - can you help me out?

greetz, simon

Welcome to the UI5 world! First of all, what kind of template did you choose to generate the project? Because every single line in `initModel` is terrible. If you're just starting into UI5, I'd recommend to start with the [Walkthrough](https://ui5.sap.com/#/topic/8b49fc198bf04b2d9800fc37fecbb218) from the documentation (since you're already familiar with JS I guess) instead of using outdated templates. Also [this answer](https://stackoverflow.com/a/42788558/5846045) might help for other learning resources. — Boghyon Hoffmann, Dec 16 '17 at 21:17
hey there. i have used the sap ui5 application template. the initmodel function was generated by clicking on new -> odata service, and i didnt even write it myself. thats not the correct way? — sleepysimon, Dec 17 '17 at 16:41
The initModel() is fine, but it should point to the whole service, not the "CollectionSet" alone -> something like `var sUrl = "/sap/opu/odata/sap/ZGWS_someService/"`. You then have to create a view with a table control and bind the CollectionSet on the table. There are many tutorials out there explaining simple examples like that. The walkthrough has a page on how to use an odata model: https://ui5.sap.com/#/topic/44062441f3bd4c67a4f665ae362d1109 -> I would recommend reading the whole Walkthrough though, as stated by boghyon — luuksen, Dec 19 '17 at 19:00
Why `initModel()` is terrible: [Line 1] As [mentioned by @luuksen](https://stackoverflow.com/questions/47845694/creating-dynamic-table-with-data-from-odata-service-in-ui5#comment82753616_47845694), the service URL is pointing to an entity set. And the query `$format=json"` is redundant as the 2nd argument of `ODataModel` is a flag for getting data in JSON. [Line 2] The model you're using is [deprecated long time ago](https://blogs.sap.com/2017/02/03/stop-using-sap.ui.model.odata.odatamodel-aka-v1-odatamodel-its-deprecated-since-2014/). [Line 3] See https://stackoverflow.com/a/42251431/5846045 — Boghyon Hoffmann, Jan 09 '18 at 16:47
I'd like to know where you got the template from. Was it a template from Web IDE? — Boghyon Hoffmann, Jan 09 '18 at 16:48
**Please**, take some time out for learning from [resources mentioned above](https://stackoverflow.com/questions/47845694/creating-dynamic-table-with-data-from-odata-service-in-ui5#comment82664579_47845694). With templates, you might think you're saving some time but due to the lack of understanding of basics, you'll have to invest much more time in maintenance. — Boghyon Hoffmann, Jan 10 '18 at 10:36

score 0 · Accepted Answer · answered Jan 09 '18 at 19:57

I created the table in the controller and sorted the data via lodash.

Is that good practice?

var oTable = this.byId("table");
        oTable.addColumn(new sap.ui.table.Column({
            label: new sap.ui.commons.Label({
                text: "Info1"
            }),
            sortProperty: "INTST",
            template: new sap.ui.commons.TextView().bindProperty("text", "key")
        }));
        oTable.addColumn(new sap.ui.table.Column({
            label: new sap.ui.commons.Label({
                text: "Count"
            }),
            template: new sap.ui.commons.TextView().bindProperty("text", "value")
        }));
        $
            .ajax({
                url: '/.../ServiceSet',
                jsonpCallback: 'getJSON',
                contentType: "application/json",
                dataType: 'json',
                success: function(data, textStatus, jqXHR) {
                    var oModel = new sap.ui.model.json.JSONModel();
                    oModel.setData(data);
                    sap.ui.getCore().setModel(oModel);
                    //Create a model and bind the table rows to this model
                    //Get the forecastday array table from txt_forecast object
                    var aData = oModel.getProperty("/d/results");
                    var aData2 = _.countBy(_.map(aData, function(d) {
                        return d.VALUE;
                    }));
                    var aData3 = Object.keys(aData2).sort().map(key => ({
                        key,
                        value: aData2[key]
                    }));
                    oModel.setData({
                        modelData: aData3
                    });
                    oTable.setModel(oModel);
                }
            });
        oTable.bindAggregation("rows", {
            path: "/modelData"
        });

creating dynamic table with data from odata service in ui5

1 Answers1