UI5 Table is not working

[former_member191267]

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

[kai2015 · Accepted solution]

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>

[former_member191267]

Thank you got it    that was the only Problem.

[former_member182862]

Hi Khabir

Can you kindly mark the question as Answered?

Thanks

-D