Skip to Content

UI5 Table is not working

Hello every body,

I am learning to develop UI5 applications but I am stuck with UI5 Tables. I tried to create different tables simple and complected on both

SAP Web IDE and on Eclipse but none of them is displayed on web page. other UI5 controls are working good ie. Label, Button, TextField.

following is the code snippets of the table that I copied from SAP UI5 Demo Kit. but it is also not working.

var aData = [

{lastName: "Dente", name: "Al", checked: true, linkText: "www.sap.com", href: "http://www.sap.com", src: "images/person1.gif", gender: "male", rating: 4},

{lastName: "Friese", name: "Andy", checked: true, linkText: "www.sap.com", href: "http://www.sap.com", src: "images/person2.gif", gender: "male", rating: 2},

{lastName: "Mann", name: "Anita", checked: false, linkText: "www.sap.com", href: "http://www.sap.com", src: "images/person1.gif", gender: "female", rating: 3},

{lastName: "Schutt", name: "Doris", checked: true, linkText: "www.sap.com", href: "http://www.sap.com", src: "images/person1.gif", gender: "female", rating: 4},

{lastName: "Turner", name: "Paige", checked: true, linkText: "www.sap.com", href: "http://www.sap.com", src: "images/person1.gif", gender: "female", rating: 3}

];

//Create an instance of the table control

var oTable2 = new sap.ui.table.Table({

title: "Table with fixed columns Example",

visibleRowCount: 7,

firstVisibleRow: 3,

selectionMode: sap.ui.table.SelectionMode.Single,

navigationMode: sap.ui.table.NavigationMode.Paginator,

fixedColumnCount: 2

});

//Define the columns and the control templates to be used

oTable2.addColumn(new sap.ui.table.Column({

label: new sap.ui.commons.Label({text: "Last Name"}),

template: new sap.ui.commons.TextView().bindProperty("text", "lastName"),

sortProperty: "lastName",

filterProperty: "lastName",

width: "200px"

}));

oTable2.addColumn(new sap.ui.table.Column({

label: new sap.ui.commons.Label({text: "First Name"}),

template: new sap.ui.commons.TextField().bindProperty("value", "name"),

sortProperty: "name",

filterProperty: "name",

width: "200px"

}));

oTable2.addColumn(new sap.ui.table.Column({

label: new sap.ui.commons.Label({text: "Checked"}),

template: new sap.ui.commons.CheckBox().bindProperty("checked", "checked"),

sortProperty: "checked",

filterProperty: "checked",

width: "200px",

hAlign: "Center"

}));

oTable2.addColumn(new sap.ui.table.Column({

label: new sap.ui.commons.Label({text: "Web Site"}),

template: new sap.ui.commons.Link().bindProperty("text", "linkText").bindProperty("href", "href"),

sortProperty: "linkText",

filterProperty: "linkText",

width: "400px"

}));

oTable2.addColumn(new sap.ui.table.Column({

label: new sap.ui.commons.Label({text: "Image"}),

template: new sap.ui.commons.Image().bindProperty("src", "src"),

width: "200px",

hAlign: "Center"

}));

oTable2.addColumn(new sap.ui.table.Column({

label: new sap.ui.commons.Label({text: "Gender"}),

template: new sap.ui.commons.ComboBox({items: [

new sap.ui.core.ListItem({text: "female"}),

new sap.ui.core.ListItem({text: "male"})

]}).bindProperty("value","gender"),

sortProperty: "gender",

filterProperty: "gender",

width: "400px"

}));

oTable2.addColumn(new sap.ui.table.Column({

label: new sap.ui.commons.Label({text: "Rating"}),

template: new sap.ui.commons.RatingIndicator().bindProperty("value", "rating"),

sortProperty: "rating",

filterProperty: "rating",

width: "200px"

}));

//Create a model and bind the table rows to this model

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

oModel2.setData({modelData: aData});

oTable2.setModel(oModel2);

oTable2.bindRows("/modelData");

//Initially sort the table

oTable2.sort(oTable2.getColumns()[0]);

//Bring the table onto the UI

oTable2.placeAt("content");

Please help me to solve the problem!

Thank you

Add a comment
10|10000 characters needed characters exceeded

Assigned Tags

Related questions

2 Answers

  • Best Answer
    Posted on Jan 07, 2015 at 01:54 PM

    Have you added sap.ui.table to be loaded?

    i.e.:

    <script src="https://sapui5.hana.ondemand.com/resources/sap-ui-core.js" id="sap-ui-bootstrap" data-sap-ui-theme="sap_bluecrystal" data-sap-ui-libs="sap.ui.commons, sap.ui.table"> </script>

    Add a comment
    10|10000 characters needed characters exceeded

  • Posted on Jan 07, 2015 at 02:00 PM

    Thank you got it 😊 that was the only Problem.

    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.