Skip to Content
avatar image
Ying Wang

Modify CSS Style After View Change

Mar 07 at 10:24 AM | 21 Views

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 ');
	}
});
SAPUI5
Add comment
10|10000 characters needed characters exceeded

  • Ying Wang
    Mar 07 at 11:13 AM

    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.

  • Nicholas Owen O’Malley
    Mar 07 at 11:04 AM

    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?

  • Get RSS Feed

1 Answer

  • avatar image
    Nicholas Owen O’Malley
    Mar 07 at 11:39 AM

    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.

    Add comment
    10|10000 characters needed characters exceeded

    • Nicholas Owen O’Malley
      Mar 08 at 06:55 AM

      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