Question

0

242

Vistas

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

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}">
  <columns>
    <!-- ... -->
  </columns>
  <ColumnListItem>
    <ObjectIdentifier title="{Bett}" />
    <!-- ... -->
  </ColumnListItem>
</Table>

This is my controller:

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

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];
        self.setIp(ipAddress);
      }
    });
  }

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

setIp: function (ip) {
  this.getView().byId("planta").bindElement({
    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);
      aFilters.push(filterO);
      var filterE = new Filter("Einri", sap.ui.model.FilterOperator.EQ, einri);
      aFilters.push(filterE);
      oBinding.filter(aFilters);
    }
  });
}

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

about 4 years ago · Juan Pablo Isaza

2 Respuestas

Responde la pregunta

0

You could bind you items using bindItems, pass skip,top parameters and wrap the whole thing in a setInterval

var iSkip = 0;
var iTop = 10;
setInterval(function() {

    table.bindItems("/EspCoSet", {
        urlParameters: {
            "$skip": iSkip.toString() // Get first 10 entries
            "$top": iTop.toString()
        },
        success: fuction (oData) {
            iSkip = iTop; // Update iSkip and iTop to get the next set
            iTop+= 10;
        }
        ...
    }, 10000); // Each 10 seconds
)

Almost the same thing, just use oModel.read to read the entities into you viewModel.allEntities, bind your table to the viewModel.shownEntities and use a setInterval to get the next 10 from allEntities to update shownEntities.

about 4 years ago · Juan Pablo Isaza Denunciar

Responde la pregunta

Encuentra empleos remotos

Accepted Answer · 2022-07-12T07:10:51.779Z

Here are some small samples:

OData V4: https://embed.plnkr.co/4zIAH7q2E0lngbyX
OData V2: https://embed.plnkr.co/rNa0TktXiQqSCGJV

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.bindItems(bindingInfo);
    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);
  })(this);
},

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.

0

242

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

2 Respuestas

0

JavaScript part

0

Encuentra empleos remotos

Andres GPT