Skip to Content

Empty columns without data is displayed in sap.m.table

Hi all,

I am trying to display data in a table using XML views in SAPUI5.

It do not show any errors related to binding but it displays empty columns.

please find my code below,

Manifest.json:

"sap.ui5": {
		"_version": "1.1.0",
		"rootView": {
			"viewName": "com.test.ui5.view.Products",
			"type": "XML"
		},
		"dependencies": {
			"minUI5Version": "1.30.0",
			"libs": {
				"sap.ui.core": {},
				"sap.m": {},
				"sap.ui.layout": {}
			}
		},

		"contentDensities": {
			"compact": true,
			"cozy": true
		},
		"models": {
			"i18n": {
				"type": "sap.ui.model.resource.ResourceModel",
				"settings": {
					"bundleName": "com.test.ui5.i18n.i18n"
				}
			},
			"products": {
				"type": "sap.ui.model.json.JSONModel",
				"uri": "model/products.json"
				
			}
		
		},
		"resources": {
			"css": [{
				"uri": "css/style.css"
			}]
		}
	}

XML view:

<mvc:View controllerName="com.test.ui5.controller.Products" xmlns:html="http://www.w3.org/1999/xhtml" xmlns:mvc="sap.ui.core.mvc"
	displayBlock="true" xmlns="sap.m">
	<App>
		<Table id="table" 
		width="auto" 
		items="{products>/d/results}" 
		mode="MultiSelect"
		growing="true"
		growingScrollToLoad="true"
		>
			<headerToolbar>
				<Toolbar>
					<Title id="tableHeader"/>
					<ToolbarSpacer/>
					<SearchField id="searchField" search="onSearch" width="auto"></SearchField>
				</Toolbar>
			</headerToolbar>
			<columns>
				<Column id="nameColumn">
					<Text text="ProductID"/>
				</Column>
				<Column>
					<Text text="Pname"/>
				</Column>
				<Column>
					<Text text="Product Price"/>
				</Column>
			<Column >
					<Text text="Unit"/>
				</Column>
			</columns>
			<items>
				<ColumnListItem>
					<cells>
						<Text text="{ProductID}"/>
						<Text text="{ProductName}"/>
						<Text text="{UnitsInStock}"/>
						<Text text="{UnitPrice}"/>
					</cells>
				</ColumnListItem>
			</items>
		</Table>
	</App>
</mvc:View>

products.json:

{
  "d": {
    "results": [
      {
	"ProductID": 1,
    "ProductName": "Chai",
    "UnitsInStock": 39,
    "UnitsOnOrder": 10,
    "UnitPrice": 8,
    "SupplierID": 1,
    "Discontinued": false,
      },
      {
     "ProductID": 2,
    "ProductName": "Chang",
    "UnitsInStock": 0,
    "UnitsOnOrder": 7,
    "UnitPrice": 6,
    "SupplierID": 1,
    "Discontinued": true,
      } 
    ]
  }
}

Please find the attached error image.

Please help me..

prod.png (7.3 kB)
Add comment
10|10000 characters needed characters exceeded

  • Get RSS Feed

2 Answers

  • Best Answer
    avatar image
    Former Member
    Dec 15, 2016 at 01:22 PM

    You are using a named model. Try changing your binding to:

    <cells>
    <Text text="{products>ProductID}"/>
    <Text text="{products>ProductName}"/>
    <Text text="{products>UnitsInStock}"/>
    <Text text="{products>UnitPrice}"/>
    </cells>
    Add comment
    10|10000 characters needed characters exceeded

  • Dec 15, 2016 at 02:22 PM
    -1

    Write this code in View Controller.

    onAfterRendering: function() {
    var oModel = this.getView().getModel("products");

    sap.ui.getCore().setModel(oModel,"oModel");
    }


    Add comment
    10|10000 characters needed characters exceeded