Product Lifecycle Management Blogs by Members
Get insider knowledge about product lifecycle management software from SAP. Tap into insights and real-world experiences with community member blog posts.
Showing results for 
Search instead for 
Did you mean: 
Former Member

Here in this space, we will see to make use of UI5 table control on a MII page. Here let us focus on the UI5 table with the dummy json object data. And in the upcoming section, we will see how we can bind the data from a BLS to this table.

  • Go to MII workbench, WEB, right click on folder, create a new irpt page save it with “FirstPage.irpt”.
  • Add the reference to the libraries.

               <script src=""





  • In BODY element, create one div.

                    <div id="uiArea"></div>

  • Add the script elements to define json dataobject, create table and place it on the div area.


  • Inside script tags, define the json data object

               var dataObject = [{

                    "EmployeeID" : "123210",

                    "Name" : "James Ad",

                    "Designation" : "SSE",

                    "Location" : "Delhi",

                    "Hierarchy" : "6"


                    "EmployeeID" : "123218",

                    "Name" : "Rick Hui",

                    "Designation" : "Manager",

                    "Location" : "Mumbai",

                    "Hierarchy" : "2"


  • Create a ui5 table using sap.ui.table control.

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

                    visibleRowCount: 10,

                    selectionBehavior: "Row"


  • Add column to this table:

                    oTable.addColumn(new sap.ui.table.Column({

                    label: new sap.ui.commons.Label({

                    text: "Employee Number",

                    wrapping: true


                    template: new sap.ui.commons.TextField().bindProperty("value", "EmployeeID"),

                    sortProperty: "EmployeeID",

                    filterProperty: "EmployeeID",

                    width: "80px"


               Similarly add more columns depending upon the requirement.

  • Now instantiate the json data model, set it our dataobject defined earlier. Bind the data and place it on the div.

               var model = new sap.ui.model.json.JSONModel();





  • Save the page and test it using Chrome browser. The page will look like this: