Skip to Content

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.

 

/wp-content/uploads/2016/09/2016_09_04_1_37_17_1029241.jpg

Supply a name and start editing your application.

 

The basic file structure of SAP Web IDE looks like this

 

/wp-content/uploads/2016/09/2016_09_04_1_47_42_1029257.jpg

The next step is to start creating a view with a name – remember every view will have a controller for it.

 

/wp-content/uploads/2016/09/2016_09_04_1_45_25_1029258.jpg

/wp-content/uploads/2016/09/2016_09_04_1_50_48_1029259.jpg

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.

/wp-content/uploads/2016/09/2016_09_04_2_08_29_1029260.jpg

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

To report this post you need to login first.

2 Comments

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

    1. Sai Giridhar Varanasi 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.

      Best
      Sai Giridhar

      (1) 

Leave a Reply