Skip to Content

Archived discussions are read-only. Learn more about SAP Q&A

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

Tags:
Former Member replied

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>

0 View this answer in context

Helpful Answer

by
Not what you were looking for? View more on this topic or Ask a question