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.

/wp-content/uploads/2014/11/chrome_587162.jpg

That’s it!!!!

To report this post you need to login first.

2 Comments

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

Leave a Reply