0

Trying some simple examples to display ​data in a JSON model before working my way to calling MII queries and transaction data.

I am running MII v15.1.1.8, so SAPUI5 library is about 3 years old. In order to avoid installing NetWeaver updated, etc., I simply downloaded lastest version of OpenUI5 library and I am using that.

I have successfully created a sample page with buttons, input fields, and a drop-down Select list that loads from an MII Illuminator query. Now I am want to display JSON data from a file in a sap.ui.table control.

I copied the sample from OpenUI5 developers web site, Grid table | Basic.
When I launch the page, all I see is the title, but no rows. For a moment when loading I see 7 rows with checkboxes and empty columns next to it, then they disappear.

Using UI5 Inspector in Chrome I see the rows, and drilling into them they are attached to the JSON model, each with a different row, as expected. If I change the number of visible rows, then the number of rows that flash by changes as well.

So I feel like the model is attached properly, and XML view, while simplified, is similar to the code sample.

I am able to write a specific record to the console from the model, another confirmation that the model is not the issue.

As new to UI5, I am sure it is something simple, but I am just stuck.

Here are the various files involved.

myApp.irpt (.irpt is special MII extension similar to HTML)

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<title>QC Adjstments</title>

    <script src="/sapui5/resources/sap/ui/thirdparty/openui5/openui5_1_56_10/resources/sap-ui-core.js"
        id="sap-ui-bootstrap"
        data-sap-ui-libs="sap.m,sap.ui.table"
        data-sap-ui-theme="sap_belize"
        data-sap-ui-compatVersion="edge"
        data-sap-ui-resourceroots='{
            "myApp": "./"
        }'>
    </script>

    <script>
        sap.ui.getCore().attachInit(function () {
            sap.ui.xmlview({
                viewName: "myApp.view.myApp"
            }).placeAt("content");
        });
    </script>
</head>    
<body>
<div id="content"></div>
</body>
</html>

myApp.controller.js

sap.ui.define(
    [
    'jquery.sap.global',
    "sap/ui/core/mvc/Controller",
    "sap/m/MessageToast",
    "sap/ui/model/json/JSONModel"
    ], 
    function ( jQuery, Controller, MessageToast, ODataModel, JSONModel ) 
    {
    "use strict";

    return Controller.extend("myApp.controller.myApp", 
    {
        onInit: function () 
        {
            // JSON model via MII query
            var oModel = new sap.ui.model.json.JSONModel();

            oModel.loadData( "./model/myModel.json" );

            // Assign model to the view
            this.getView().setModel( oModel, "myModel" );
            // Same results attaching model directly to the core        
            // sap.ui.getCore().setModel( oModel );


            // Use this function to write to console    
            oModel.attachRequestCompleted( function()
            {
                var sLineName = oModel.getProperty( "/Rowsets/Rowset/0/Row/5/prodDesc" );
                console.log( "Model product description: " + sLineName );
            });

        },

        onAfterRendering: function () 
        {
        },
    });
});

myapp.view.xml

<mvc:View
    controllerName="myApp.controller.myApp"
    xmlns="sap.ui.table"
    xmlns:mvc="sap.ui.core.mvc"
    xmlns:u="sap.ui.unified"
    xmlns:c="sap.ui.core"
    xmlns:m="sap.m"
    height="100%">
    <m:Page
        showHeader="false"
        enableScrolling="false"
        class="sapUiContentPadding">
        <m:content>
            <Table
                rows="{myModel>/Rowsets/Rowset/0/Row}"
                title="QC Adjustments"
                selectionMode="MultiToggle"
                visibleRowCount="7">
                <columns>
                    <Column width="11rem">
                        <m:Label text="Order Nbr" />
                        <template>
                            <m:Text text="{line}" wrapping="false" />
                        </template>
                    </Column>
                </columns>
            </Table>
        </m:content>
    </m:Page>
</mvc:View>

myModel.json

{ "Rowsets" : { 
    "DateCreated" : "2018-10-26T09:20:58", "Version" : "15.1 SP1 Patch 8 (Apr 19, 2016)", "StartDate" : "2018-10-26T08:20:58-0400", "EndDate" : "2018-10-26T09:20:58-0400", "CachedTime" : "", 
    "Rowset" : [ 
    { "Columns" : { 
        "Column" : [ 
        { "Name" : "cr_id", "SourceColumn" : "cr_id", "Description" : "cr_id", "SQLDataType" : -5, "MinRange" : 1.0, "MaxRange" : 1.0 }, 
        { "Name" : "line", "SourceColumn" : "line", "Description" : "line", "SQLDataType" : 12, "MinRange" : 1.0, "MaxRange" : 1.0 }, 
        { "Name" : "product", "SourceColumn" : "product", "Description" : "product", "SQLDataType" : 12, "MinRange" : 1.0, "MaxRange" : 1.0 }, 
        { "Name" : "prodDesc", "SourceColumn" : "prodDesc", "Description" : "prodDesc", "SQLDataType" : 12, "MinRange" : 1.0, "MaxRange" : 1.0 }, 
        { "Name" : "cookEnd", "SourceColumn" : "cookEnd", "Description" : "cookEnd", "SQLDataType" : 93, "MinRange" : 1.0, "MaxRange" : 1.0 }, 
        { "Name" : "adjMaterial", "SourceColumn" : "adjMaterial", "Description" : "adjMaterial", "SQLDataType" : 12, "MinRange" : 1.0, "MaxRange" : 1.0 }, 
        { "Name" : "adjDesc", "SourceColumn" : "adjDesc", "Description" : "adjDesc", "SQLDataType" : 12, "MinRange" : 1.0, "MaxRange" : 1.0 }, 
        { "Name" : "adjQty", "SourceColumn" : "adjQty", "Description" : "adjQty", "SQLDataType" : 8, "MinRange" : 1.0, "MaxRange" : 1.0 } ] }, 
    "Row" : [ 
        { "cr_id" : 4892534, "line" : "UL01", "product" : "152685", "prodDesc" : "PINEAPPLE", "cookEnd" : "10/23/2018 02:28:14", "adjMaterial" : "9808", "adjDesc" : "WATER", "adjQty" : 100.00 }, 
        { "cr_id" : 4893503, "line" : "UL01", "product" : "163491", "prodDesc" : "BANANA", "cookEnd" : "10/24/2018 03:34:25", "adjMaterial" : "112770", "adjDesc" : "CH SODIUM CITRATE PWD NOP", "adjQty" : 0.50 }, 
        { "cr_id" : 4893503, "line" : "UL01", "product" : "163491", "prodDesc" : "BANANA", "cookEnd" : "10/24/2018 03:34:25", "adjMaterial" : "112770", "adjDesc" : "CH SODIUM CITRATE PWD NOP", "adjQty" : 0.50 }, 
        { "cr_id" : 4894901, "line" : "UL01", "product" : "269320", "prodDesc" : "RASPBERRY", "cookEnd" : "10/25/2018 04:14:42", "adjMaterial" : "9808", "adjDesc" : "WATER", "adjQty" : 100.00 }, 
        { "cr_id" : 4894901, "line" : "UL01", "product" : "269320", "prodDesc" : "RASPBERRY", "cookEnd" : "10/25/2018 04:14:42", "adjMaterial" : "9808", "adjDesc" : "WATER", "adjQty" : 50.00 }, 
        { "cr_id" : 4894903, "line" : "UL01", "product" : "204752", "prodDesc" : "RASPBERRY", "cookEnd" : "10/25/2018 06:33:19", "adjMaterial" : "9808", "adjDesc" : "WATER", "adjQty" : 100.00 }, 
        { "cr_id" : 4894904, "line" : "UL01", "product" : "204752", "prodDesc" : "RASPBERRY", "cookEnd" : "10/25/2018 07:22:00", "adjMaterial" : "9808", "adjDesc" : "WATER", "adjQty" : 100.00 }, 
        { "cr_id" : 4894905, "line" : "UL01", "product" : "209053", "prodDesc" : "RASPBERRY", "cookEnd" : "10/25/2018 08:31:51", "adjMaterial" : "112764", "adjDesc" : "CH MALIC ACID DL GRAN", "adjQty" : 0.50 }, 
        { "cr_id" : 4894905, "line" : "UL01", "product" : "209053", "prodDesc" : "RASPBERRY", "cookEnd" : "10/25/2018 08:31:51", "adjMaterial" : "112764", "adjDesc" : "CH MALIC ACID DL GRAN", "adjQty" : 1.00 }, 
        { "cr_id" : 4894907, "line" : "UL01", "product" : "209053", "prodDesc" : "RASPBERRY", "cookEnd" : "10/25/2018 10:09:22", "adjMaterial" : "112764", "adjDesc" : "CH MALIC ACID DL GRAN", "adjQty" : 1.50 }, 
        { "cr_id" : 4894908, "line" : "UL01", "product" : "209053", "prodDesc" : "RASPBERRY", "cookEnd" : "10/25/2018 10:50:40", "adjMaterial" : "112764", "adjDesc" : "CH MALIC ACID DL GRAN", "adjQty" : 1.50 }, 
        { "cr_id" : 4894909, "line" : "UL01", "product" : "209053", "prodDesc" : "RASPBERRY", "cookEnd" : "10/25/2018 11:37:38", "adjMaterial" : "112764", "adjDesc" : "CH MALIC ACID DL GRAN", "adjQty" : 1.50 }, 
        { "cr_id" : 4894910, "line" : "UL01", "product" : "209053", "prodDesc" : "RASPBERRY", "cookEnd" : "10/25/2018 12:27:15", "adjMaterial" : "112764", "adjDesc" : "CH MALIC ACID DL GRAN", "adjQty" : 2.00 }, 
        { "cr_id" : 4894911, "line" : "UL01", "product" : "209053", "prodDesc" : "RASPBERRY", "cookEnd" : "10/25/2018 13:12:15", "adjMaterial" : "112764", "adjDesc" : "CH MALIC ACID DL GRAN", "adjQty" : 1.50 }, 
        { "cr_id" : 4894912, "line" : "UL01", "product" : "209053", "prodDesc" : "RASPBERRY", "cookEnd" : "10/25/2018 14:11:59", "adjMaterial" : "112764", "adjDesc" : "CH MALIC ACID DL GRAN", "adjQty" : 1.50 }, 
        { "cr_id" : 4894914, "line" : "UL01", "product" : "209053", "prodDesc" : "RASPBERRY", "cookEnd" : "10/25/2018 16:26:32", "adjMaterial" : "112764", "adjDesc" : "CH MALIC ACID DL GRAN", "adjQty" : 1.50 }, 
        { "cr_id" : 4892555, "line" : "UL02", "product" : "229822", "prodDesc" : "STRAWBERRY", "cookEnd" : "10/23/2018 03:33:39", "adjMaterial" : "9808", "adjDesc" : "WATER", "adjQty" : 100.00 }, 
        { "cr_id" : 4892559, "line" : "UL02", "product" : "229822", "prodDesc" : "STRAWBERRY", "cookEnd" : "10/23/2018 06:46:19", "adjMaterial" : "9808", "adjDesc" : "WATER", "adjQty" : 50.00 }, 
        { "cr_id" : 4892560, "line" : "UL02", "product" : "202388", "prodDesc" : "STRAWBERRY", "cookEnd" : "10/23/2018 07:40:57", "adjMaterial" : "9808", "adjDesc" : "WATER", "adjQty" : 100.00 }, 
        { "cr_id" : 4892561, "line" : "UL02", "product" : "202388", "prodDesc" : "STRAWBERRY", "cookEnd" : "10/23/2018 08:32:46", "adjMaterial" : "9808", "adjDesc" : "WATER", "adjQty" : 100.00 }, 
        { "cr_id" : 4892564, "line" : "UL02", "product" : "172510", "prodDesc" : "BLUEBERRY", "cookEnd" : "10/23/2018 11:26:31", "adjMaterial" : "9808", "adjDesc" : "WATER", "adjQty" : 75.00 }, 
        { "cr_id" : 4894950, "line" : "UL02", "product" : "252018", "prodDesc" : "BLUEBERRY", "cookEnd" : "10/26/2018 00:57:33", "adjMaterial" : "112764", "adjDesc" : "CH MALIC ACID DL GRAN", "adjQty" : 2.00 }, 
        { "cr_id" : 4894951, "line" : "UL02", "product" : "252018", "prodDesc" : "BLUEBERRY", "cookEnd" : "10/26/2018 01:46:21", "adjMaterial" : "112764", "adjDesc" : "CH MALIC ACID DL GRAN", "adjQty" : 1.00 }, 
        { "cr_id" : 4894951, "line" : "UL02", "product" : "252018", "prodDesc" : "BLUEBERRY", "cookEnd" : "10/26/2018 01:46:21", "adjMaterial" : "112764", "adjDesc" : "CH MALIC ACID DL GRAN", "adjQty" : 1.00 }, 
        { "cr_id" : 4894968, "line" : "UL03", "product" : "269318", "prodDesc" : "STRAWBERRY", "cookEnd" : "10/26/2018 01:30:32", "adjMaterial" : "115159", "adjDesc" : "STABILIZER", "adjQty" : 100.00 }, 
        { "cr_id" : 4894969, "line" : "UL03", "product" : "269318", "prodDesc" : "STRAWBERRY", "cookEnd" : "10/26/2018 02:21:04", "adjMaterial" : "115159", "adjDesc" : "STABILIZER", "adjQty" : 100.00 }, 
        { "cr_id" : 4895040, "line" : "UL03", "product" : "205553", "prodDesc" : "STRAWBERRY", "cookEnd" : "10/26/2018 08:11:31", "adjMaterial" : "112770", "adjDesc" : "CH SODIUM CITRATE PWD NOP", "adjQty" : 1.00 } ]
         } ]
     }
 }
Improve this question
1
  • 1
    this is difficult to go through the complete thing. Try to mention the issue you are facing precisely and share only relevant code. Commented Nov 2, 2018 at 14:01

1 Answer 1

Reset to default
1

You have to use the model name in the text binding:

<m:Text text="{myModel>line}" wrapping="false" />

Improve this answer
Sign up to request clarification or add additional context in comments.

8 Comments

Thank you for the suggestion. I tried myModel>line, but still, no visible rows. But it was a step forward, now I see the proper line value, like UL01, UL02, etc. in the UI5 Inspector. So I think you solved the binding syntax for the Text element in the XML view. Now to figure out why it is not visible, since it seems the data is now mapped correctly?
With the text binding suggestion, I now see the actual values in each row flash when the screen loads with dev tools open in Chrome. But then all rows are become invisible and I only see the table header.
Is there any chance that you reset the model value in the controller? Can you share the current coding and screenshot after flash?
The Text controls for each row are bound to the model in UI5 Inspector, and the number of rows matches the visiblerows property, so it seems the rows exist, and have the right binding, they are just invisible. I don't know how to attach a screenshot, I know you add a link, but where to put image file? Anyway, screen is blank (white) except for the table header "QC Adjustments". No other visible lines. As for coding after the flash, not sure what you are asking for, as all coding is posted above.
I was able to use the json model to populate a list and an sap.m table successfully, and realized I had the binding wrong. I needed to include the model name like <Text text="{myModel>prodDesc}" for example. The UI5 inspector bindings changed to a single value, and the Text field value showed the data instead of "". Still kicking the ui.core table. It almost behaves as if there is a filter on the table, you can see rows in UI5 inspector, but none are shown. Time to move on.
|

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.