Technology Blogs by Members
Explore a vibrant mix of technical expertise, industry insights, and tech buzz in member blogs covering SAP products, technology, and events. Get in the mix!
cancel
Showing results for 
Search instead for 
Did you mean: 
ranjit_rao
Participant
14,259

I was having a requirement something as follows:

I was using sap.m.Table. I had a json Model. But what actually was needed was, the model had 10 records, and were required to be shown in splits of 2.

There was direct solution, had i used sap.ui.Table by setting the navigationMode to Paginator. Unfortunately, sap.m.Table doesn’t have any of that sort (if I am not wrong).

So, I had to do a bit of back of the hand bowling to achieve this. I had placed two buttons named “Previous” and “Next”, then some magical code.

So lets get into it. In this example I will be using a model with 7 records to be shown in  splits of 2.

Firstly the Design<View1.view.js>

In the CreateContent of the View paste the following code:

CreateContent of View.js

var oPage = new sap.m.Page({title : "Company Details" });

var oTable = new sap.m.Table({

id : "Countries",

mode : sap.m.ListMode.None,

headerText: "Details of the Countries",

columns :
[
new sap.m.Column({

width: "1em",

header: new sap.m.Label({

text: "Name"

  })

}), new sap.m.Column({

width: "1em",

header: new sap.m.Label({

text: "short"

   })

   })

  ]

  });

      var oButton1 = new sap.m.Button({

text : "Next",

id : "Next"

});

var oButton2 = new sap.m.Button({

text : "Previous",

id : "Previous"

});

  var start = 0;

   var i = 0;

  var rowCount = 2;

oButton1.attachPress(function() {

start =start + rowCount;

oController.populateData(start,rowCount);

});

oButton2.attachPress(function() {

start =start - rowCount;

oController.populateData(start,rowCount);

});

oPage.addContent(oTable);

oPage.addContent(oButton2);

oPage.addContent(oButton1);

  return oPage;

Secondly, the controller.js

In the onInt() method paste the following Code:

onInit() Method of Controller.js

var data = {

                                               "countries" : [ {

                                                     "name" : "India",

                                                     "short" : "In"

                                               },
{

                                                     "name" : "England",

                                                     "short" : "En"

                                               },
{

                                                     "name" : "Australia",

                                                     "short" : "Oz"

                                               },
{

                                                     "name" : "New Zealand",

                                                     "short" : "Nz"

                                               },
{

                                                     "name" : "France",

                                                     "short" : "Fr"

                                               },
{

                                                     "name" : "SouthAfrica",

                                                     "short" : "SA"

                                               },
{

                                                     "name" : "Germany",

                                                     "short" : "Gr"

                                               }
]

                                        };

var view = this.getView();

this.app = view.byId("theApp");

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

sap.ui.getCore().setModel(oModel);

this.populateData(0,2);

Now , the last part: Coding the populateData method.

Paste the following code in the controller.js file after as a method.

populateData Method of Controller.js

populateData : function(start, rowCount) {

             sap.ui.getCore().byId("Previous").setEnabled(true);

             sap.ui.getCore().byId("Next").setEnabled(true);

             sap.ui.getCore().byId("Countries").destroyItems();

             for (i = start; i <start + rowCount; i++) {

                    oTableRow= new sap.m.ColumnListItem({

                           type: "Active",

                           visible: true,

                           selected: true,

                           cells: [

                                        new sap.m.Label({

                            text: sap.ui.getCore().getModel().getProperty("/countries/" + i + "/name")

                                        }),

                                        new sap.m.Label({

                  text: sap.ui.getCore().getModel().getProperty("/countries/" + i + "/short")

                                        })
]

                    });

                    sap.ui.getCore().byId("Countries").addItem(oTableRow);

                    if (i ==sap.ui.getCore().getModel().getProperty("/countries/length") - 1) {

        sap.ui.getCore().byId("Next").setEnabled(false);

                           break;

                    }

             }

             if (start == 0) {

                    sap.ui.getCore().byId("Previous").setEnabled(false);

             }

       }

Save and Run the Application.

That's it!!!!

3 Comments
Labels in this area