[SOLVED] Change the cells of a table in an interval time using OData model

Table of Contents


I have this code and I need my table to show the first 10 patients and, after 10 seconds, show the next 10 without touching any button (automatically).

I’m looking for something similar to this: https://embed.plnkr.co/ioh85m5OtPmcvPHyl3Bg/

But with an OData model (as specified on my view and controller).

This is my view:

<Table id="tablaPacientes" items="{/EspCoSet}">
    <!-- ... -->
    <ObjectIdentifier title="{Bett}" />
    <!-- ... -->

This is my controller:

onInit: function () {
  var oModel = this.getOwnerComponent().getModel("zctv");

onBeforeRendering: function () { // method to get the local IP because I need it for the OData
  var ipAddress;
  var RTCPeerConnection = window.webkitRTCPeerConnection || window.mozRTCPeerConnection;
  var self = this;

  function grepSDP (sdp) {
    var ip = /(192\.168\.(0|\d{0,3})\.(0|\d{0,3}))/i;
    sdp.split('\r\n').forEach(function (line) {
      if (line.match(ip)) {
        ipAddress = line.match(ip)[0];

  if (RTCPeerConnection) {
    (function () {
      var rtc = new RTCPeerConnection({
        iceServers: []
      rtc.createDataChannel('', {
        reliable: false
      rtc.onicecandidate = function (evt) {
        if (evt.candidate) {
      rtc.createOffer(function (offerDesc) {
      }, function (e) {
        console.log("Failed to get Ip address");

setIp: function (ip) {
    path: "/CenTVSet('" + ip + "')"
  var oModel = this.getView().getModel();
  var that = this;
  oModel.read("/CenTVSet('" + ip + "')", {
    success: function (oData, oRes) {
      var einri = oData.Einri;
      var orgpf = oData.Orgpf;
      var oTable = that.getView().byId("tablaPacientes");
      var oBinding = oTable.getBinding("items");
      var aFilters = [];
      var filterO = new Filter("Orgna", sap.ui.model.FilterOperator.EQ, orgpf);
      var filterE = new Filter("Einri", sap.ui.model.FilterOperator.EQ, einri);

I searched some functions like IntervalTrigger but I really don’t know how can I use it for this example.


Here are some small samples:

startList: function(listBase, $skip, $top, restInfo) {
  let startIndex = $skip;
  let length = $top;
  let totalSize;
  (function repeat(that) {
    const bindingInfo = Object.assign({ startIndex, length }, restInfo);
    listBase.data("repeater", event => {
      totalSize = event.getParameter("total"); // $count value
      startIndex += $top;
      startIndex = startIndex < totalSize ? startIndex : 0;
      setTimeout(() => repeat(that), 2000);
    }).attachEventOnce("updateFinished", listBase.data("repeater"), that);

stopList: function(listBase) {
  listBase.detachEvent("updateFinished", listBase.data("repeater"), this);

The samples make use of startIndex and length in the list binding info which translates to $skip and $top system queries of the entity request URL. I.e. appending those system queries to the request URL (e.g. https://<host>/<service>/<EntitySet>?$skip=3&$top=3), should return the correct set of entities like this.

Additional options for the list binding info can be found in the UI5 documentation as I explained here.

JavaScript part

The interval is implemented with an IIFE (Immediately Invoked Function Expression) in combination with setTimeout instead of setInterval.

setInterval has the following disadvantages:

  • The callback is not immediately invoked. You’d have to wait 10 seconds first to trigger the 1st callback.
  • Does not wait for the data response to arrive. This may cause skipping a batch or showing it for a too short period of time because the delay simply continues regardless of the server response.

setTimeout instead offers a better control when the next batch should be requested.

Answered By – Boghyon Hoffmann

Answer Checked By – Jay B. (BugsFixing Admin)

Leave a Reply

Your email address will not be published.