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.
1. SAPUI5 Explored
Thanks and welcome to SAPUI5. Happy learning !!!
Bluesky
