Table control bound to oData model - "No Data" shows between model refreshes

[former_member182500]

Hi,

Apologies if this has been asked before, searching for "table no data" brings allsorts up.

I have an odata model to which a table control is bound.  Below is an example of the complete URI called to populate the model, and teh view code.

Every 2 seconds I perform an odataModelPilotScoreBreakdown.refresh().  This causes a "No Data" splash image over the table whilst the refresh takes place, not pretty.

I can hide the splash with CSS, but the appearance during refresh is still like a flicker, where table contents disappear momentarily before refreshed with new content. 

I would prefer a more silkily smooth update, possible?  I can imagine why a refresh might be taking a heavy hammer to the whole table update, but I don't know if model.READ() would be lighter, and would work in my example, as collections are not directly accessible via my Hana calculation view.

Welcome any thoughts, many thanks.

Example complete URI to odata service

http://hanaserver/hpl/missioncontrol/services/missionPilotScoreBreakdown.xsodata/InputParams(IP_MISS...

View Code

var missionPilotScoreBreakdownUri = myHplApp.missioncontrol.model.getConfigServicePilotScoreBreakdownUri();

var odataModelPilotScoreBreakdown = new sap.ui.model.odata.ODataModel(missionPilotScoreBreakdownUri, false);

var otblPilotScoreBreakdown  = new sap.ui.table.Table({tableId: "tblPilotScoreBreakdown",

     visibleRowCount: 5,

     columnHeaderVisible: false,

     selectionMode: "None",

     editable: false,

     enableColumnReordering: false

  });

odataModelPilotScoreBreakdown.setCountSupported(false);

oControl = new sap.ui.commons.TextField({value: "{CA_ACHIEVEMENT_KEYFRAME_GROUP}"});

otblPilotScoreBreakdown.addColumn(new sap.ui.table.Column({label: new sap.ui.commons.Label({text:"Keyframe Group"}),

            visible: false,

            template: oControl,

            sortProperty: "CA_ACHIEVEMENT_KEYFRAME_GROUP",

            filterProperty: "CA_ACHIEVEMENT_KEYFRAME_GROUP"

  }));

oControl = new sap.ui.commons.TextField({value: "{CONDITIONID}"});

otblPilotScoreBreakdown.addColumn(new sap.ui.table.Column({label: new sap.ui.commons.Label({text:"Condition ID"}),

    visible: false,

    template: oControl,

    sortProperty: "CONDITIONID",

    filterProperty: "CONDITIONID"

  })); 

oControl = new sap.ui.commons.Image({src: "{VISUALURI}",

  width: "30px",

  height: "30px" });

otblPilotScoreBreakdown.addColumn(new sap.ui.table.Column({label: new sap.ui.commons.Label({text:"URI"}),

                                                        template: oControl,

                                                        width: "30px"

  }));

oControl = new sap.ui.commons.TextField({value: "{NAME}"});

oControl.addStyleClass("lblPilotAchivementName");

otblPilotScoreBreakdown.addColumn(new sap.ui.table.Column({label: new sap.ui.commons.Label({text:"Name"}),

    template: oControl,

    width: "50px"

  }));

oControl = new sap.ui.commons.TextField({value: "{SCORE}"});

oControl.addStyleClass("lblPilotAchivementScore");

otblPilotScoreBreakdown.addColumn(new sap.ui.table.Column({label: new sap.ui.commons.Label({text:"Score"}),

    template: oControl,

    sortProperty: "SCORE",

    filterProperty: "SCORE",

    width: "50px"

  })); 

otblPilotScoreBreakdown.setModel(odataModelPilotScoreBreakdown);

var mdlSort = new sap.ui.model.Sorter("CA_ACHIEVEMENT_KEYFRAME_GROUP");

var pilotScoreBreakdownParams = '/InputParams(IP_MISSIONID=\'' +

  myHplApp.missioncontrol.model.getActiveMissionId() +

  '\',IP_VEHICLEID=\'' +

  myHplApp.missioncontrol.model.getActiveVehicleId() +

  '\',IP_PILOTID=\'' +

  myHplApp.missioncontrol.model.getActivePilotId() +

  '\')/Results';

otblPilotScoreBreakdown.bindRows(pilotScoreBreakdownParams,mdlSort);

omlMission.createRow(otblPilotScoreBreakdown);

otstrMissionControl.createTab("Mission",omlMission);

CSS test to hide the "No Data" splash

sapUiTableShNoDa.sapUiTableEmpty .sapUiTableCtrlEmpty {

     display: none;

}

[former_member182500]

Ok, definitely onto something.

This works - i.e. no flicker between model refresh.  Apologies this code works only with my odata service and server, just wanted to share code.

http://jsbin.com/zucitaxu/1/edit?html,output

If I take this same example, and the only change I make is point the bootstrap to my local version of openUI5, and run as localhost I get the flicker.  If I run as localhost with the bootstrap sourcing openUI5 from ondemand I DO NOT get the flicker.

At minimum something in my version of UI5 is adding the additional class sapUiTableRowHidden during refresh.

Thoughts?

[ChandraMahajan]

at which version your localhost sapui5 is?

[former_member182500]

Yep - Changed my bootstrap in application to source the ondemand version of OpenUI5 and no flicker in application.

Question is, "which is the newer version of OpenUI5 - the version I have, or ondemand"?

and

"Is the introduction of class sapUiTableRowHidden in my local version a bug, or a "fix" of another behaviour during model refresh that is not present in ondemand?"

[ChandraMahajan]

can you type sap.ui.version in the chrome console to check local version? you can then check release notes  SAPUI5 SDK - Demo Kit

[former_member182500]

1.16.8, which I downloaded on the 03/02/2014.  Will try a newer version available.

[former_member182500]

Hi,

My original local version was 1.16.8-SNAPSHOT.

The OnDemand version, and latest available, is 1.18.12.  I have just downloaded and installed, and the flicker issue I had with class sapUiTableRowHidden is now resolved.  This class does not get applied to TR upon model refresh.  Thank-you.

And thanks very much to everyone who contributed both for resolution of issues and correcting the sample northwind jsbin.  Will mark thread as answered to clean up.

Lesson learned - keep my openUI5 installation up-to-date.

[former_member182500]

Perhaps I may be on to something here.

With respect to http://jsbin.com/jujewoca/1/edit?html,output, I inspected a row element of the table and had a look at the html, which stays consistent (no change) through the model refresh.  Here's an excerpt from the first TR, I highlight the class assignment:

<tr id="__table0-rows-row0" data-sap-ui="__table0-rows-row0" class="sapUiTableRowEven sapUiTableTr" data-sap-ui-rowindex="0" role="row">

Note that for the jsbin example I put together calling my AWS service, I get the same classes assigned.

However

During model refresh in my full application I can see the HTML briefly change during refresh.  What changes?  Note the additional class!

<tr id="__table0-rows-row0" data-sap-ui="__table0-rows-row0" class="sapUiTableRowEven sapUiTableTr sapUiTableRowHidden" data-sap-ui-rowindex="0" role="row">

This class is somehow applied, and then removed and ba boom the table content shows.  Now to figure what is applying this class.

[former_member182500]

I set up a new jsbin to call my own oData service from AWS Hana server, using the code first posted to build table/model, and also added a repeating interval for refresh:

1. I get retrieved data.
2. and I DONT get the flicker experienced in model refresh in my full app.

With regard to point 1, I am connection to an anonymous db connection where cross origin is allowed.  Despite having tried disabling web security for Chrome, and also trying FireFox/IE11, I cannot get returned data from the two sample jsbins posted earlier.  Anyone have success with those?

Regarding "flicker" - not sure yet, will continue to investigate.  Of course the jsbin consuming my oData is far lighter in UI complexity than the desktop focused full blown app - performance issue?  If I resolve I will post back.

[former_member182500]

I'll put together a jsbin in the morning to try replicate the issue unless there is something obvious, many thanks.

[former_member195440]

Hi,

Try using the method "setShowNoData(false)" on your table object, or you can add the property "showNoData: false" on the object passed to the constructor. It removes the "No Data" text altogether. There is a similar method "setNoData(...)" which can be used to change the text if you wish.

If this doesn't help with the flicker, share an example of your update/refresh/binding code. I suspect it may be that it has to remove all the objects in the table then recreate them again from the newly read data rather than direct replace that causes your issue.

Hope this helps,

Oli

[former_member182500]

Hi Oliver,

Thanks for the tip on "showNoData", this works for hiding the "No Data" splash. 

In order to replicate with a simpler example I started setting up a simple jsbin (currently without interval ticker for model refresh), getting no data at all.

http://jsbin.com/nuzaw/1/edit?html,output

There are other SAPUI5 odata bins, with the same "No data" result - security issue? (tried on both Chrome and Firefox).

http://jsbin.com/fepud/1/edit

[ChandraMahajan]

Hi,

in windows run "chrome.exe --user-data-dir="c:/temp/chromedev" --disable-web-security". This will open chrome browser by disabling security. there you can run above examples.

regards,

Chandra

[former_member182500]

Hi Chandra,

THanks, however already tried that, and hence why I tried in Firefox too (edit: and IE11 without success).

Did you have any success with the two posted jsbins?

[Former Member]

Hi Jon,

You were getting No-data because of a cross domain issue in the service. I've used JSONP to overcome this cross domain issue. Now the data is retrieved & shown in the table. check the snippet , http://jsbin.com/xuboq/1/edit

Regards

Sakthivel

[former_member182500]

Hey Sakthivel,

Thanks very much for getting that going.  I added the interval:

http://jsbin.com/jujewoca/1/edit?html,output

No flicker that I am experiencing in my full blown app, will continue to investigate.