SAP UI5, MII, & JSON

[Former Member]

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!

[former_member185280 · Accepted solution]

This is the bind syntax I used to bind rows with a JSON data set from MII:

oTable.bindRows('/Rowsets/Rowset/0/Row');

I think the gotcha is that Rowset is an array and the right bind syntax for that may not be obvious.

Regards,
Christian

[Former Member · Accepted solution]

Hi Christian,

I fugured it had to be in the bind expression...

Thanks for the help.

[Former Member]

This message was moderated.

[swaroop_anasane]

Hi Allan,

The data structure changes when your content type is JSON hence you cannot map rowsets/rowset/row structure and get the desired output.

Generally, MII 14.0 onwards is capable of giving JSON result that can be directly mapped to ui5 components.

What is miiUtils.createRequestURL retur ning you here. I suspect a mapping issue here as everything else looks good.

See is below example helps you. This is referring to UI5 Charts but atleast can give you some idea on model and data binding.

Table - SAPUI5 Demo Kit

Best Regards,

Swaroop