Skip to Content
0

SAPUI5 Table not showing data

May 24, 2017 at 08:43 AM

654

avatar image

Hello,

I am trying to display a table in sapui5, but the problem is that neighter sap.m.table, nor sap.ui.table is showing any data, despite the fact that in the developer tools I can see that the items and the cells (for sap.m) are there and filled, and the columns and rows are filled (for sap.ui).

The table is in a block from a ObjectPageSection. The columns are shown, but a "no Data"-Text is displayed instead of the actual data.

Does anybody have any idea, why the rows wouldn't be displayed?

Also if I add a column in the Controller with the method addColumn, the column is added to the table in the developer tools, but is not shown in the app.

10 |10000 characters needed characters left characters exceeded
* Please Login or Register to Answer, Follow or Comment.

5 Answers

Mantri Shekar May 24, 2017 at 08:57 AM
0

Hi Cristina,

For better understanding of your issue please share the code snippet(Binding and Model Setting).So that we can help you in resolving your issue.

Regards,

Shekar

Show 11 Share
10 |10000 characters needed characters left characters exceeded

For the sap.m.table, I have set the columns directly in the view:

<columns>
<Column
width="12em">
<Text text="Description" />
</Column>
<Column
width="12em">
<Text text="Unit" />
</Column>
<Column
width="12em">
<Text text="Normal Value" />
</Column>
</columns>

In the controller, if I try adding a new column by using the method addColumn, that column isn't showing.

The binding in the controller is the following, where oListRows is an array of objects:

  1. Object
    1. desc:"GFR"
    2. normal_value:""
    3. unit:"ml/min"
var oDataModel = new sap.ui.model.json.JSONModel();
oDataModel.setData({
rows: oListRows
});
oTable.setModel(oDataModel);

oTable.bindItems("/rows", new sap.m.ColumnListItem({
cells: [
new sap.m.Label({
text: "{desc}"
}),
new sap.m.Label({
text: "{unit}"
}),
new sap.m.Label({
text: "{normal_value}"
})
]
}));
0

Hi ,

can you try putting your template (items) in the view only like this :

<items>

<ColumnListItem>

<cells>

<Label text="{desc}" />

<Label text="{unit}" />

<Label text="{normal_value}" />

</cells>

</ColumnListItem>

</items>

And on the table definition you need to add another property items

<Table items="{/rows}" >

Note :

1. And also can you also please check in the networks tab of developers option that your service is giving data back successfully or not

2. If 1 is correct than also check if oListRows is an array of objects(data rows) not a object which contains array of objects(data rows)

thanks

Viplove

0

Hi,

1. is correct and 2 also. The problem is the control above it, "blocks" if I change the Object Page Section to just a Page and content, the table is displayed.

blocks have to contain a sap.ui.core.Control. One of these controls is sap.m.ListBase, which contains my sap.m.Table. So I don't understand why the table isn't showing.

Thanks!

0

Hi Cristina ,

Actually in one my application i am also using the tables inside the object page subsection and its working fine for me. Are you saying that table is displayed and it shows no data or table is not even rendering ?

Can you just confirm are you using the object page section like this :

<uxap:ObjectPageLayout id="objectPage" enableLazyLoading="false">

<uxap:sections titleUppercase="false">

<uxap:ObjectPageSection title="General Info" titleUppercase="false">

<uxap:subSections>

<uxap:ObjectPageSubSection>

<uxap:blocks>

Your table here

</uxap:blocks>

</uxap:ObjectPageSubSection>

</uxap:subSections>

</uxap:ObjectPageSection>

</uxap:sections>

</uxap:ObjectPageLayout>

thanks

Viplove

0

Hello Viplove,

yes, the table is exactly like this in the blocks of the ObjectPageSubSection. The table is not renderiing at all. Do I have to do something here?

Thanks

Cristina

0

Hi Cristina ,

This is the working example i am pasting here ... just check step by step where are you missing(its a sample)

view :

<core:View xmlns:core="sap.ui.core" xmlns="sap.uxap" xmlns:layout="sap.ui.layout" xmlns:m="sap.m" controllerName="sap.uxap.sample.ObjectPageSection.ObjectPageSection" xmlns:sample="sap.uxap.sample.AnchorBar.block" xmlns:blockcolor="sap.uxap.sample.SharedBlocks" height="100%" >

<ObjectPageLayout id="ObjectPageLayout" enableLazyLoading="false">

<headerTitle>

<ObjectPageHeader objectTitle="Section sample">

</ObjectPageHeader>

</headerTitle>

<headerContent>

<m:ObjectAttribute title="" text="This example explains the rules for the rendering of sections"/> </headerContent>

<sections>

<ObjectPageSection title="Section 1">

<subSections>

<ObjectPageSubSection title="Subsection 1.1 ">

<blocks>

<m:Table items="{objectPage>/ModelSet}">

<m:columns>

<m:Column width="12em">

<m:Text text="Product" />

</m:Column>

<m:Column minScreenWidth="Tablet" demandPopin="true">

<m:Text text="Supplier" />

</m:Column>

<m:Column minScreenWidth="Tablet" demandPopin="true" hAlign="Right">

<m:Text text="Dimensions" />

</m:Column>

<m:Column minScreenWidth="Tablet" demandPopin="true" hAlign="Center">

<m:Text text="Weight" />

</m:Column>

<m:Column hAlign="Right">

<m:Text text="Price" />

</m:Column>

</m:columns>

<m:items>

<m:ColumnListItem>

<m:cells>

<m:ObjectIdentifier title="{objectPage>key}" text="{objectPage>value}"/>

<m:Text text="{SupplierName}" />

<m:Text text="{Width} x {Depth} x {Height} {DimUnit}" />

</m:cells> </m:ColumnListItem>

</m:items>

</m:Table>

</blocks>

</ObjectPageSubSection>

<ObjectPageSubSection title="Subsection 1.2 ">

<blocks>

<m:Text text="Viplove 1.2" />

</blocks>

</ObjectPageSubSection>

</subSections>

</ObjectPageSection>

<ObjectPageSection title="Section 2">

<subSections>

<ObjectPageSubSection title=" ">

<blocks>

<m:Text text="Viplove 2" />

</blocks>

</ObjectPageSubSection>

</subSections>

</ObjectPageSection>

<ObjectPageSection title="Section 3">

<subSections>

<ObjectPageSubSection title=" ">

<blocks>

<m:Text text="Viplove 3" />

</blocks>

</ObjectPageSubSection>

</subSections>

</ObjectPageSection>

<ObjectPageSection title="Section 4">

<subSections>

<ObjectPageSubSection title="Subsection 4.1 ">

<blocks>

<m:Text text="Viplove 4.1" />

</blocks>

</ObjectPageSubSection>

</subSections>

</ObjectPageSection>

<ObjectPageSection title="Section 5">

<subSections>

<ObjectPageSubSection title=" ">

<blocks>

<m:Text text="Viplove 5" />

</blocks>

</ObjectPageSubSection>

</subSections>

</ObjectPageSection>

</sections>

</ObjectPageLayout>

</core:View>

Controller :

sap.ui.define(['sap/ui/core/mvc/Controller','sap/ui/model/json/JSONModel'],

function(Controller, JSONModel)

{ "use strict"; var PageController = Controller.extend("sap.uxap.sample.ObjectPageSection.ObjectPageSection",

{

onInit:function(){

var model = new JSONModel();

model.loadData("content.json");

this.getView().byId("ObjectPageLayout").setModel(model,"objectPage"); this.getView().byId("ObjectPageLayout").bindElement("objectPage>/");

}

});

return PageController;

});

content.json


{

"ModelSet" :

[

{ "key" : "GENESIS COUPE", "value" : "Genesis Coupe" },

{ "key" : "GENESIS SEDAN", "value" : "Genesis Sedan" }

]

}

You can even copy paste this ... this is full fledged working code ... So just compare with your code ..And also if you still face than can you share your code in jsbin and I will take a look

thanks

Viplove

0
Show more comments

Hi ,

Not able to reply on your last comment ... so replying here ..

Just thinking might be this could be a issue .. just give a try ..

Actually what happens sometimes that as the binding is dynamic for both column and rows so if the binding takes time than the container (here object page layout . section , subsection) thinks that there is no content and makes the content section height 0 , can you just check in F12 (developers tool) by picking the element where the table needs to be render and try to increase the height of that element ..by providing some height in pixels

i face such a issue once a way long back ago. Just let me know your response so accordingly i will proceed for any other solution.

thanks

viplove

0

Have you seen in console are you able to see any error.Please let me know.

From the below code am able to render table with respective data.

http://www.w3.org/1999/xhtml" xmlns:mvc="sap.ui.core.mvc" displayBlock="true" xmlns="sap.m">

<App>

<pages>

<Page title="{i18n>title}">

<content>

<Table id = "table">

<columns>

<Column>

<Label text="Description" />

</Column>

<Column>

<Label text="Value" />

</Column>

<Column>

<Label text="Unit" />

</Column>

</columns>

</Table> </content> </Page> </pages> </App> </mvc:View>

sap.ui.define([ "sap/ui/core/mvc/Controller" ], function(Controller) { "use strict"; return Controller.extend("Table.controller.Table", {

onInit : function() {

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

var oListRows = [{desc:"GFR",normal_value:"Val1",unit:"ml/min"}];

oDataModel.setData({rows : oListRows});

this.getView().setModel(oDataModel);

var oTable = this.getView().byId("table");

oTable.bindItems("/rows", new sap.m.ColumnListItem({

cells: [ new sap.m.Label({ text: "{desc}" }),

new sap.m.Label({ text: "{unit}" }),

new sap.m.Label({ text: "{normal_value}" }) ] }));

} }); });

0

Hello Mantri,

thank you for your answer. Now I see, that the only difference between your code and mine is that above the Table-element, I don't have a Page with content, but a ObjectPageSection with a SubSection, whitch contains a block. This block is the one that contains my table. If I change the xml-view to a Page with content, then the data is displayed. However, I really need the Object Page Section. Do you have any idea, why the table isn't showing in the block?

Thanks!

0

Hello Cristina,

Could you Please post whole view and controller code so that we can get exact idea what actually you are trying to do.So that i can help you.

Please share the demo output what exactly you need in form of excel as prototype

0
arun j May 26, 2017 at 06:23 PM
0

sample Code

var oModel = new sap.ui.model.json.JSONModel();
oModel.loadData("json/Item.json");

//Create an instance of the table control
var oTable = new sap.ui.table.Table({
title: "Table Example",
visibleRowCount: 2,
firstVisibleRow: 5,
selectionMode: sap.ui.table.SelectionMode.Single
});

//Define the columns and the control templates to be used
var oColumn = new sap.ui.table.Column({
label: new sap.ui.commons.Label({text: "First Name"}),
template: new sap.ui.commons.TextView().bindProperty("text", "key"),
width: "100px"
});
oTable.addColumn(oColumn);

oTable.setModel(oModel);//Bind with model
oTable.bindRows("/mData");//Bind with data

Share
10 |10000 characters needed characters left characters exceeded
Sharath M G May 28, 2017 at 08:34 AM
0

If the data is in the debugger and not appearing on the screen, it should be a problem with the binding of the right paths/variables ot the controls on Views.

Regrds,

Sharath

Share
10 |10000 characters needed characters left characters exceeded
Steve Guo
May 28, 2017 at 11:29 AM
0

For using table control correctly, you should know how to do the databinding and aggregation binding.

From your describe, I guess the aggregation binding is not correct.

Here are some turtois for you.

https://sapui5.netweaver.ondemand.com/sdk/#docs/guide/bf71375454654b44af01379a3c3a6273.html

Show 1 Share
10 |10000 characters needed characters left characters exceeded

This is the 20th step of this series of tutorials, if you can not fully understand, you can start from the 1st.

0
Meenakshi Raina May 29, 2017 at 03:02 AM
0

Hi,

The issue is with your data binding connection with the backend.

1st check if you are passing the backend Service URL correctly to the IDE.

Once, I had faced this issue and I was passing the column name is upper case, while when I checked my metadata, the column name was a mix of upper and lower case. So, please check if the issue is due to case sensitivity.

If you are still not able to resolve it, let me know I will share my code snippets. May be that will help you.

Thanks

Meenakshi

Share
10 |10000 characters needed characters left characters exceeded