Skip to Content

This document describes you about how to create a simple table with JSON object in SAPUI5 from the scratch.


UI5 is implemented in JavaScript, so for loading UI5, its bootstrap just needs to be included with a <script> tag. The last two attributes select the visual design to apply initially (other choices would be “sap_hcb” or “sap_platinum” or “sap_goldreflection”) and the UI control library/libraries to use (“sap.ui.dev” would be another one). In your scenario you need to make sure the URL points to a SAPUI5 installation.


          <!– 1.) Load SAPUI5, select theme and control library –>

                  <script src=“resources/sap-ui-core.js”

                      id=“sap-ui-bootstrap”

                      data-sap-ui-libs=“sap.ui.commons,sap.ui.table “

                      data-sap-ui-theme=“sap_goldreflection”>

                     //themes : sap_platinum, sap_goldreflection

                 </script>


Now, you have included the library file & theme for visual design.

Create a JSON object “vData” to hold the contents of an employee such as Associate ID, Associate Name, Company Name associated with weblink, gender, mobile & rating.

   <!– 2.) Create a UI5 Table and place it onto the page –>

// define some sample data using JSON

var vData=[

           {assID:“EM123456”, name:“Bharath S”, linkText:“Cognizant Technology Solutions”, href:http://www.cognizant.com, gender:“Male”, mobile:“9934307162”, rating:5},

           {assID:“EM263521”, name:“Arun M”, linkText:“Cognizant Technology Solutions”, href:http://www.cognizant.com, gender:“Male”, mobile:“9786721460”, rating:3},

           {assID:“EM323455”, name:“Anitha”, linkText:“Cognizant Technology Solutions”, href:http://www.cognizant.com, gender:“Female”, mobile:“9524396759”, rating:4},

           {assID:“EM237652”, name:“Ganesh”, linkText:“Cognizant Technology Solutions”, href:http://www.cognizant.com, gender:“Male”, mobile:“9876543210”, rating:1},

           {assID:“EM398454”, name:“Ajai”, linkText:“Cognizant Technology Solutions”, href:http://www.cognizant.com, gender:“Male”, mobile:“9576113218”, rating:4},

           {assID:“EM348092”, name:“Pranav”, linkText:“Cognizant Technology Solutions”, href:http://www.cognizant.com, gender:“Male”, mobile:“9576113218”, rating:5}

          ];

Now, we are created 6 sample rows in JSON then define a table to place the contents created via JSON

// Define a table [Note: you must include the table library to make the Table class work]

var oTable = new sap.ui.table.Table({

    title: “Employee Details”,                                   // Displayed as the heading of the table

    visibleRowCount: 3,                                           // How much rows you want to display in the table

    selectionMode: sap.ui.table.SelectionMode.Single, //Use Singe or Multi

    navigationMode: sap.ui.table.NavigationMode.Paginator, //Paginator or Scrollbar

    fixedColumnCount: 3,                     // Freezes the number of columns

    enableColumnReordering:true,       // Allows you to drag and drop the column and reorder the position of the column

    width:“1024px”                              // width of the table

  });

// Use the Object defined for table to add new column into the table

    oTable.addColumn(new

    label: new sap.ui.commons.Label({text: “Associate ID”}),             // Creates an Header with value defined for the text attribute

    template: new sap.ui.commons.TextField().bindProperty(“value”, “assID”), // binds the value into the text field defined using JSON

    sortProperty: “assID”,        // enables sorting on the column

    filterProperty: “assID”,       // enables set filter on the column

    width: “125px”                  // width of the column

}));

    oTable.addColumn(new

    label: new sap.ui.commons.Label({text: “Associate Name”}),

    template: new sap.ui.commons.TextField().bindProperty(“value”, “name”),

    sortProperty: “name”,

    filterProperty: “name”,

    width: “125px”

}));

    oTable.addColumn(new

    label: new sap.ui.commons.Label({text: “Company”}),

    template: new sap.ui.commons.Link().bindProperty(“text”, “linkText”).bindProperty(“href”, “href”),

    sortProperty: “linkText”,

    filterProperty: “linkText”,

    width: “200px”

}));

     oTable.addColumn(new

     label: new sap.ui.commons.Label({text: “Gender”}),

     template: new sap.ui.commons.ComboBox(

                    {items: [new sap.ui.core.ListItem({text: “Female”}),

                    new sap.ui.core.ListItem({text: “Male”})]}).bindProperty(“value”,“gender”),

     sortProperty: “gender”,

     filterProperty: “gender”,

     width: “75px”

    }));

    oTable.addColumn(new

    label: new sap.ui.commons.Label({text: “Contact Number”}),

    template: new sap.ui.commons.TextField().bindProperty(“value”, “mobile”),

    sortProperty: “mobile”,

    filterProperty: “mobile”,

    width: “75px”

}));

    oTable.addColumn(new

    label: new sap.ui.commons.Label({text: “Rating”}),

    template: new sap.ui.commons.RatingIndicator().bindProperty(“value”, “rating”),

    sortProperty: “rating”,

    filterProperty: “rating”,

    width: “100px”

}));


Now, create a model to bind the table rows.

     //Create a model and bind the table rows to this model

     var oModel = new sap.ui.model.json.JSONModel();        // created a JSON model      

     oModel.setData({modelData: vData});                              // Set the data to the model using the JSON object defined already

     oTable.setModel(oModel);                                                                                  

     oTable.bindRows(“/modelData”);                              // binding all the rows into the model

     //Initially sort the table

     oTable.sort(oTable.getColumns()[0]);                

After binding the table into the model, bring the table into the UI(i.e., to display in the web)

//Bring the table onto the UI

     oTable.placeAt(“EmpTbl”);

Place the table inside the <DIV> tag.

     <div id=”EmpTbl”> </div>

Here is your full code :

Code.png

Sample Outputs (After executing the code):

Output screen 1:

/wp-content/uploads/2013/09/output1_275657.png

Output Screen2 :


Shows the Sorting & filtering features in the table.

/wp-content/uploads/2013/09/output2_275658.png

You can also customize the code as per your requirement to display more than 3 rows and having scrollable option instead of pagination to view the data.

Hope the comments I used in the code will help in understanding the functionality of the code(line by line).

To report this post you need to login first.

11 Comments

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

  1. Bhanu Malik

    Well explained document.

    I am a newbie and was wondering if you could refer on any document or explain on how we can get data from ECC in your above example and set it in table control without hardcoding?

    (0) 
  2. Rufat Gadirov

    Hi Jaya,

    thanks for sharing this amazing tutorial.

    Is it possible that you share the code via jsbin oder github? This would be great as I am unfortunately not able to run it properly. I don´t know is missing. Besides, the code from your screenshot is a little bit different from your code you pasted here in scn..

    Another question:

    What is the easiest way to bind external JSON Data into a table?

    I think the most relevant use case would be that someone uploads a JSON file on an external server and binds the data into the model…

    Best regards,

    Rufat

    (0) 
    1. Jaya Bharath S Post author

      Hi Rufat,

      I hope you would have sorted out the best way to bind data into a table in UI5.

      You can easily do this via binding OData.

      1) OData with hard coded column

      2) OData with dynamically deriving the table columns using its Metadata.

      it is also possible if you use the CRUD functionality to read/update/delete data from UI5 & synchronize with your HANA DB.

      Bharath

      (0) 
  3. Kaan Ozdogan

    Hi,

    How can I data bind from var

    url = “/sap/opu/odata/SAP/ZF4_HELP_SRV/”;

    query = “path: “/zsem_result?CONSIGNEE=”&MATNR=’10094627’&SATISBELGESI=”&SATISBELGETURU=’ZSMA'”

    (0) 
    1. Michael Appleby

      Unless you are asking for clarification/correction of some part of the Document, please create a new Discussion marked as a Question.  The Comments section of a Blog (or Document) is not the right vehicle for asking questions as the results are not easily searchable.  Once your issue is solved, a Discussion with the solution (and marked with Correct Answer) makes the results visible to others experiencing a similar problem.  If a blog or document is related, put in a link.  Read the Getting Started documents (link at the top right) including the Rules of Engagement. 

      NOTE: Getting the link is easy enough for both the author and Blog.  Simply MouseOver the item, Right Click, and select Copy Shortcut.  Paste it into your Discussion.  You can also click on the url after pasting.  Click on the A to expand the options and select T (on the right) to Auto-Title the url.

      Thanks, Mike (Moderator)

      SAP Technology RIG

      (0) 
    1. Mohit Chandwani

      Esakki,

       

      To add the new row, give a add row button and add an event to handler to it.

      Get the object of the table and then create the coulmnlistItem Array and add it to the table.

       

      addRow: function(oEvt) {
      
      			var addItem = new sap.m.ColumnListItem({
      				cells: [
      					new sap.m.Input({
      						value: "",
      						width: "60px"
      					}),
      					new sap.m.Input({
      						value: "",
      						submit: [this.onEnter, this]
      
      					}),
      					new sap.m.Input({
      						text: ""
      					}),
      					new sap.m.Input({
      						text: ""
      
      					}),
      					new sap.m.Input({
      						value: ""
      					})
      				]
      			});
      			var oTable = this.getView().byId("idItem");
      			oTable.addItem(addItem);
      		}
      (0) 

Leave a Reply