Skip to Content

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.












  <Page title=”{i18n>title}”>


  <table:Table id=”Table1″ rows=”{/}”>


            <Text text=”SAPUI5 sap.ui.table XML view”></Text>



                        <table:Column sortProperty=”name” filterProperty=”name”>

                                  <Label text=”Employee name”/>

                                        <table:template><Text text=”{name}” ></Text></table:template>


                        <table:Column sortProperty=”company” filterProperty=”company”>

                                  <Label text=”Company”/>

                                        <table:template><Text text=”{company}” ></Text></table:template>










And now move on to View1.controller.js




], 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”},










And index.html looks as below





  <meta http-equiv=”X-UA-Compatible” content=”IE=edge” />

  <meta charset=”UTF-8″>


  <script id=”sap-ui-bootstrap”





  data-sap-ui-resourceroots='{“UITable”: “”}’>


  <link rel=”stylesheet” type=”text/css” href=”css/style.css”>



  var app = new sap.m.App({id:”app_UITable”,initialPage:”detail”});

  //declaring the View1

  var page1 = sap.ui.view({




  //End declaring the View1





  <body class=”sapUiBody” id=”content”>




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 !!!

You must be Logged on to comment or reply to a post.