Modify CSS Style After View Change

[ying0820]

Dear All,

I want to manipulate the tree table and change background color of some rows. However, I found that it works as the following sequence:

1. the background color changes to blue
2. remove column, insert section
3. the background color changes back to white

What should I do?

Below is my code:

this.oTreeTable.removeColumn(4);
this.oTreeTable.removeColumn(3);
this._oSection = sap.ui.xmlfragment(oView.getId(), "sap.ui.scpint.precheck.view.fragment.EditVariantBasic", this);
oView.byId("ObjectPageLayout").insertSection(this._oSection, 0);
var aRows = this.oTreeTable.getRows();
	aRows.forEach(function(row){
	var sPath = row.getBindingContext().getPath();
	var oModel = that.oTreeTable.getModel();
	var oData = oModel.getProperty(sPath);
	if(oData.SELECTED){
		row.$().css('background-color', '#e8eff6 ');
	}
});

[former_member560141]

Hello.

I am sorry, but i dont understand the query. "However, I found that it works as the following sequence:"

What are you trying to do? run that code on view change?

[ying0820]

Hi Nicholas,

I want to make "row.$().css('background-color','#e8eff6 ');" work.

With my code, it becomes blue in the beginning but turns to white in the end.

[former_member560141]

Hello.

this worked for me:

var tableRows = that.getView().byId("supplierResultsTable").getRows();
tableRows.forEach(function(row){
    row.$().css('background-color', "#e8eff6");
});

All the rows became blue. Not sure what is bugging with your solution, but i would check yore if statement and make sure you sett the color after inserting the row.

You can test this by wrapping it in a timeout function

setTimeout(function(){
	var tableRows = that.getView().byId("supplierResultsTable").getRows();
	tableRows.forEach(function(row){
		row.$().css('background-color', "#e8eff6");
	});
}, 1000);

This should solve any async issues, but only for testing purposes, dont do this in a live system unless it is the only solution.

[ying0820]

Hi Nicholas,

After one second timeout, the table turns blue and keep blue.

I guess I must find an API which is called after the view is refreshed and set the background color inside this API...

[former_member560141]

Nice. Then you know it is a async issue. Personally i would do this with a promise if it is not to be used on IE. If you have to use it in IE you need another lib for promise to work. ES6 standard is not supported in IE. Edge is fine. a promise will wait to runn code until it gets the data:

somFuncName: function(){
return new Promise(function(resolve, reject) {
    //make api call eks, missing some code:
    	oModel.read(sPath, null, null, true
		function(oData) {
                    //If we get a 200 we resolve.
		    resolve(oData);
		},
		function(oError) {
                  //If we get a error from server we reject and send the error
		  reject(oError);
	        });
});
}<br>

Then you can call it like this:

 
                    //then will runn after reciving data
this.someFuncName().then(function(oData){
    console.log(oData)
})

A nice way to test this and see how it works is to wrap the oModel.read in a setTimeout