cancel
Turn on suggestions
Auto-suggest helps you quickly narrow down your search results by suggesting possible matches as you type.
Showing results for 
Search instead for 
Did you mean: 

Simple UI Table Not Loading From JSON Model

dan_kellackey
Explorer

on ‎10-29-2018 8:27 PM

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, 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. All ideas welcome.

Here are the various files involved. Sorry JSON model is so long, didn't want to snip-it wrong and have someone get hung up on it.

myApp.irpt
----------
<!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.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="{cr_id}" wrapping="false" />
						</template>
					</Column>
				</columns>
			</Table>
		</m:content>
	</m:Page>
</mvc:View>

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 () 
		{


			var oModel = new sap.ui.model.json.JSONModel();


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


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


			// Assign model to the view
			this.getView().setModel( oModel, "myModel" );
//			sap.ui.getCore().setModel( oModel );
		},


		handleDetailsPress : function(oEvent) 
		{
			MessageToast.show("Details for product with id " + this.getView().getModel().getProperty("Product", oEvent.getSource().getBindingContext()));
		},


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

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" : "FP PINEAPPLE OIKOS 2% DCA", "cookEnd" : "10/23/2018 02:28:14", "adjMaterial" : "9808", "adjDesc" : "WATER", "adjQty" : 100.00 }, 
		{ "cr_id" : 4893503, "line" : "UL01", "product" : "163491", "prodDesc" : "FP BANANA PC CREAMY DCA", "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" : "FP BANANA PC CREAMY DCA", "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" : "FP RASPBERRY CREAMY DCA", "cookEnd" : "10/25/2018 04:14:42", "adjMaterial" : "9808", "adjDesc" : "WATER", "adjQty" : 100.00 }, 
		{ "cr_id" : 4894901, "line" : "UL01", "product" : "269320", "prodDesc" : "FP RASPBERRY CREAMY DCA", "cookEnd" : "10/25/2018 04:14:42", "adjMaterial" : "9808", "adjDesc" : "WATER", "adjQty" : 50.00 }, 
		{ "cr_id" : 4894903, "line" : "UL01", "product" : "204752", "prodDesc" : "FP RASPBERRY SALLY LIB", "cookEnd" : "10/25/2018 06:33:19", "adjMaterial" : "9808", "adjDesc" : "WATER", "adjQty" : 100.00 }, 
		{ "cr_id" : 4894904, "line" : "UL01", "product" : "204752", "prodDesc" : "FP RASPBERRY SALLY LIB", "cookEnd" : "10/25/2018 07:22:00", "adjMaterial" : "9808", "adjDesc" : "WATER", "adjQty" : 100.00 }, 
		{ "cr_id" : 4894905, "line" : "UL01", "product" : "209053", "prodDesc" : "FP RASPBERRY ACTIVIA DCA", "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" : "FP RASPBERRY ACTIVIA DCA", "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" : "FP RASPBERRY ACTIVIA DCA", "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" : "FP RASPBERRY ACTIVIA DCA", "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" : "FP RASPBERRY ACTIVIA DCA", "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" : "FP RASPBERRY ACTIVIA DCA", "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" : "FP RASPBERRY ACTIVIA DCA", "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" : "FP RASPBERRY ACTIVIA DCA", "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" : "FP RASPBERRY ACTIVIA DCA", "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" : "FP STRAWBERRY PREMIUM PAR", "cookEnd" : "10/23/2018 03:33:39", "adjMaterial" : "9808", "adjDesc" : "WATER", "adjQty" : 100.00 }, 
		{ "cr_id" : 4892559, "line" : "UL02", "product" : "229822", "prodDesc" : "FP STRAWBERRY PREMIUM PAR", "cookEnd" : "10/23/2018 06:46:19", "adjMaterial" : "9808", "adjDesc" : "WATER", "adjQty" : 50.00 }, 
		{ "cr_id" : 4892560, "line" : "UL02", "product" : "202388", "prodDesc" : "FP STRAWBERRY CHAMONIX LIB", "cookEnd" : "10/23/2018 07:40:57", "adjMaterial" : "9808", "adjDesc" : "WATER", "adjQty" : 100.00 }, 
		{ "cr_id" : 4892561, "line" : "UL02", "product" : "202388", "prodDesc" : "FP STRAWBERRY CHAMONIX LIB", "cookEnd" : "10/23/2018 08:32:46", "adjMaterial" : "9808", "adjDesc" : "WATER", "adjQty" : 100.00 }, 
		{ "cr_id" : 4892564, "line" : "UL02", "product" : "172510", "prodDesc" : "FP BLUEBERRY STAR YCA", "cookEnd" : "10/23/2018 11:26:31", "adjMaterial" : "9808", "adjDesc" : "WATER", "adjQty" : 75.00 }, 
		{ "cr_id" : 4894950, "line" : "UL02", "product" : "252018", "prodDesc" : "FP BLUEBERRY ACTIVIA DCA", "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" : "FP BLUEBERRY ACTIVIA DCA", "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" : "FP BLUEBERRY ACTIVIA DCA", "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" : "FP STRAWBERRY CREAMY DCA", "cookEnd" : "10/26/2018 01:30:32", "adjMaterial" : "115159", "adjDesc" : "NON-BOM ADJUSTMENT MATERIAL", "adjQty" : 100.00 }, 
		{ "cr_id" : 4894969, "line" : "UL03", "product" : "269318", "prodDesc" : "FP STRAWBERRY CREAMY DCA", "cookEnd" : "10/26/2018 02:21:04", "adjMaterial" : "115159", "adjDesc" : "NON-BOM ADJUSTMENT MATERIAL", "adjQty" : 100.00 }, 
		{ "cr_id" : 4895040, "line" : "UL03", "product" : "205553", "prodDesc" : "FP STRAWBERRY ACTIVIA DCA", "cookEnd" : "10/26/2018 08:11:31", "adjMaterial" : "112770", "adjDesc" : "CH SODIUM CITRATE PWD NOP", "adjQty" : 1.00 } ]
		 } ]
	 }
 }
Show replies
Show replies
agentry_src
Active Contributor
‎10-30-2018 12:44 PM

Hi Dan,

I do not know the solution and leave that to Jun Wu and Mahesh (or others), but your question was stated better than 99% of those posted in the SAP Community. Excellent lead-in, clear presentation of the environment was provided, and all the necessary coding displayed in a clear and comprehensive manner. Wish more of the questions were of this high degree of clarity and quality!!

Cheers, Mike Appleby

Answer

Accepted Solutions (0)

Answers (2)

Answers (2)

junwu
Active Contributor
‎10-29-2018 10:22 PM 
<Tablerows="{myModel>/Rowsets/Rowset/0/Row}"title="QC Adjustments"
				selectionMode="MultiToggle"
				visibleRowCount="7"><columns><Columnwidth="11rem"><m:Label text="Order Nbr" /><template><m:Texttext="{myModel>cr_id}" wrapping="false" /></template></Column></columns></Table>

for the column, you also need the model name.

Show replies
Show replies
maheshpalavalli
Active Contributor
‎10-30-2018 4:46 AM

Hi Dan,

You have mentioned the below binding in the table

<Table
				rows="{myModel>/Rowsets/Rowset/0/Row}" 
				title="QC Adjustments"

But your json model is mentioned with different name value pairs

{ "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" : [

Here, i dont see the "Row" name anywhere, I can only see "Columns"...

so you need to update the rows binding as below:

rows="{myModel>/Rowsets/Rowset/0/Columns/Column}"    
" This way you can access the data, not sure if you have pasted a different model

Also like Jun Wu mentioned, you need to mention the model name as well in the column template binding as below:

<m:Text text="{myModel>cr_id}" />

Best Regards,

Mahesh

Show replies
Show replies
Ask a Question