SAPUI5 sap.ui.table XML view
Hi All,
In this blog post, let us see how to create a simple sap.ui.table using XML view and a general controller using SAP Web IDE environment.
All you need is an access to SAP Web IDE environment and a some programming knowledge.
A public free trial is already open for you @ Cloud Cockpit
Register and that’s it. You are ready to enter a new UI experience by SAP.
After everything is good to go you would hopefully be landing at one of the pages where in you could create your applications and start learning.
Supply a name and start editing your application.
The basic file structure of SAP Web IDE looks like this
The next step is to start creating a view with a name – remember every view will have a controller for it.
Once, the view is created in <App Name>/webapp//view folder, a controller for this application will be created in controller folder.
Location of these files can be anywhere throughout the view, controller or out of these both folders. But, specifying the location of controller to view is the important and basic troubleshooting we need to look at in cases we face a view-controller related problems.
You need to take care mostly of files that you create in view, controller folders and index.html
Copy the below code into the View1 view you just created.
View1.view.xml
<mvc:View
controllerName=”UITable.controller.View1″
xmlns:html=”http://www.w3.org/1999/xhtml”
xmlns:mvc=”sap.ui.core.mvc”
xmlns=”sap.m”
xmlns:table=”sap.ui.table”>
<App>
<pages>
<Page title=”{i18n>title}”>
<content>
<table:Table id=”Table1″ rows=”{/}”>
<table:title>
<Text text=”SAPUI5 sap.ui.table XML view”></Text>
</table:title>
<table:columns>
<table:Column sortProperty=”name” filterProperty=”name”>
<Label text=”Employee name”/>
<table:template><Text text=”{name}” ></Text></table:template>
</table:Column>
<table:Column sortProperty=”company” filterProperty=”company”>
<Label text=”Company”/>
<table:template><Text text=”{company}” ></Text></table:template>
</table:Column>
</table:columns>
</table:Table>
</content>
</Page>
</pages>
</App>
</mvc:View>
And now move on to View1.controller.js
sap.ui.define([
“sap/ui/core/mvc/Controller”
], function(Controller) {
“use strict”;
return Controller.extend(“UITable.controller.View1”, {
onInit: function() {
var table1 = sap.ui.getCore().byId(“UITable–Table1”);
var oModel = new sap.ui.model.json.JSONModel();
var datapath=
[{“name”:”Sai Giridhar”,”company”:”SAP”},
{“name”:”Vignesh”,”company”:”TCS”},
{“name”:”Mike”,”company”:”SAP”}];
table1.setModel(oModel);
oModel.setData(datapath);
}
});
});
And index.html looks as below
<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv=”X-UA-Compatible” content=”IE=edge” />
<meta charset=”UTF-8″>
<title>UITable</title>
<script id=”sap-ui-bootstrap”
src=”../../resources/sap-ui-core.js”
data-sap-ui-libs=”sap.m”
data-sap-ui-theme=”sap_bluecrystal”
data-sap-ui-compatVersion=”edge”
data-sap-ui-resourceroots='{“UITable”: “”}’>
</script>
<link rel=”stylesheet” type=”text/css” href=”css/style.css”>
<script>
sap.ui.localResources(“view”)
var app = new sap.m.App({id:”app_UITable”,initialPage:”detail”});
//declaring the View1
var page1 = sap.ui.view({
id:”UITable”,
viewName:”view.View1″,
type:sap.ui.core.mvc.ViewType.XML});
//End declaring the View1
app.addPage(page1);
app.placeAt(“content”);
</script>
</head>
<body class=”sapUiBody” id=”content”>
</body>
</html>
Once the coding part is done. Execute the application and you will see this page opening and working absolutely fine.
Now coming to data binding part:
We used JSON predefined here in the controller.js to project data in the table.
This exercise will give you a chance to try your first simple table application in SAP Web IDE. You can still add seasoning on this to make it work as you want it to be.
Links to refer:
1. sap.ui.table – API : JsDoc Report – SAP UI development Toolkit for HTML5 – API Reference – sap.ui.table.Table
2. sap.m.table – API : JsDoc Report – SAP UI development Toolkit for HTML5 – API Reference – sap.m.Table
For sap.m.table advanced functionality refer here.
Thanks and welcome to SAPUI5. Happy learning !!!
Is there any way to build xml view without pasting your code ? Thanks
Hi Welly Sunarko,
Yes, there is a graphical editor provided too in SAP Web IDE for this. I just gave example of a simple table and its binding. You can explore more features using this editor.
Best
Sai Giridhar
where is the component.js file and css file
can u help me!
Hi Mangesh, component.js file is directly under webapp which is auto generated. Also, css file is under css folder. In this case I left them default. I'm not customizing the UI.
Best,
Giridhar Varanasi
oK, Thanks Sai Giridhar sirji... _/\_
your code is not working for me
it says cannot read property setModel of undefined
I have to change:
var table1 = sap.ui.getCore().byId(“UITable–Table1”);
To
var table1 = this.getView().byId("Table1");
And Finally it's working...