Skip to Content
Author's profile photo Sai Giridhar Varanasi

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

Assigned Tags

      You must be Logged on to comment or reply to a post.
      Author's profile photo Former Member
      Former Member

      Is there any way to build xml view without pasting your code ? Thanks 

      Author's profile photo Sai Giridhar Varanasi
      Sai Giridhar Varanasi
      Blog Post Author

      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.

      Sai Giridhar

      Author's profile photo Mangesh Bartakke
      Mangesh Bartakke

      where is the component.js file and css file


      can u help me!

      Author's profile photo Sai Giridhar Varanasi
      Sai Giridhar Varanasi
      Blog Post Author

      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.


      Giridhar Varanasi

      Author's profile photo Mangesh Bartakke
      Mangesh Bartakke

      oK, Thanks Sai Giridhar sirji...   _/\_

      Author's profile photo Yash Sharma
      Yash Sharma

      your code is not working for me

      it says cannot read property setModel of undefined

      Author's profile photo Jose Milan
      Jose Milan

      I have to change:

      var table1 = sap.ui.getCore().byId(“UITable–Table1”);


      var table1 = this.getView().byId("Table1");


      And Finally it's working...