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 a comment
10|10000 characters needed characters exceeded

Assigned Tags

Related questions

2 Answers

  • Best Answer
    author's profile photo Former Member
    Former Member
    Posted on 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 a comment
    10|10000 characters needed characters exceeded

  • Posted on 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 a comment
    10|10000 characters needed characters exceeded

Before answering

You should only submit an answer when you are proposing a solution to the poster's problem. If you want the poster to clarify the question or provide more information, please leave a comment instead, requesting additional details. When answering, please include specifics, such as step-by-step instructions, context for the solution, and links to useful resources. Also, please make sure that you answer complies with our Rules of Engagement.
You must be Logged in to submit an answer.

Up to 10 attachments (including images) can be used with a maximum of 1.0 MB each and 10.5 MB total.