Skip to Content
0
Former Member
Mar 13, 2015 at 07:19 PM

SAP UI5, MII, & JSON

258 Views

I've been using jQuery ajax calls to fetch MII JSON data and display it in various ways for some time now when I want to display data in something other than an MII applet. My client wants to transition to using SAP UI5 in their web reports and so I've been doing some prototyping.

I've found that I cannot get a UI5 table to bind to an MII Rowsets result set when the content type is JSON.

Some example code...

// This works fine...
     function buildTableAjax() {
            "use strict";

            var q = miiUtils.miiGet(queryTemplate, {}); // (wrapper function around $.ajax)
            q.done(function (data, status, xhr) {
                var model = new sap.ui.model.json.JSONModel();
                // if I setData to the returned "Rowsets" object I can 
                // not figure out a bindRows expression that works so 
                // I use the 0th rowset instead
                model.setData(data.Rowsets.Rowset[0]);
                var str = model.getJSON();
                var table = new sap.ui.table.Table({
                    title: "Water Samples",
                    visibleRowCount: 20

                });
                var cols = data.Rowsets.Rowset[0].Columns.Column;
                $.each(cols, function (i, col) {
                    if ($.inArray(col.Name, hideColumns) === -1) {
                        table.addColumn(new sap.ui.table.Column({
                            label: new sap.ui.commons.Label({
                                text: col.Name
                            }),
                            template: new sap.ui.commons.TextView().bindProperty("text", col.SourceColumn),
                            sortProperty: col.SourceColumn,
                            filterProperty: col.SourceColumn,
                            width: "75px"
                        }));
                    }
                });
                table.setModel(model);
                table.bindRows("/Row");
                table.placeAt("tableHolder");
            });
        }

I know that this isn't the preferred way to do this and I would like to use the whole UI5 stack sometime soon, so I came up with the following.

  function buildTableUI5() {
            "use strict";

            var requestUrl = miiUtils.createRequestURL(queryTemplate, {
                "Content-Type": "text/json"
            });
            var model = new sap.ui.model.json.JSONModel();
            var table = new sap.ui.table.Table({
                title: "Water Samples",
                visibleRowCount: 20,
            });

            // maybe add columns based on result set later...
            table.addColumn(new sap.ui.table.Column({
                label: new sap.ui.commons.Label({
                    text: "Description"
                }),
                template: new sap.ui.commons.TextView().bindProperty("text", "Description"),
                sortProperty: "Description",
                filterProperty: "Description",
                width: "75px"
            }));

            model.attachRequestCompleted(function () {
                // do something with data if required...
                //var str = model.getJSON();               
            });
            model.loadData(requestUrl);
            table.setModel(model);
            table.bindRows("/Rowset/Row");
            table.placeAt("tableHolder");
        }

buildTableUI5 will always display "No Data". If I simply change the url's Content-Type to text/xml and change the model type to XMLModel, the function works as expected and data is bound.

I would prefer to use JSON if possible, Can it be done through model.loadData()? What would I put in the bindRows call to get it to work? (The value of the commented out str variable in attachRequestCompleted is the expected json result, so the data is being returned just fine).

Thanks!