Tree background color

[#1]

We have built a Fiori app (Master/Detail) with a tree in the left pane and a table with details in the right pane. The tree is filled based on the Asset hierarchy. Some assets need actions, which I would like to visualize by coloring the background of that asset in the tree red.

Unfortunately the TreeNode has very little attributes/methods, none related to the background color.

Does anyone have a solution for this?

Regards,

John.

[Former Member · Accepted solution]

Hi,

Are you looking like this?

In below link you will find tree node with background color red(using css) and another node icon in red color using tree node property icon.

I have changed it with CSS, based on your requirement change it with javascript.

Let me know for any queries.

JS Bin - Collaborative JavaScript Debugging</title> <link rel="alternate" type=&q...

[john_heutmekers2 · Accepted solution]

Hi,

This is a good step to the solution, however I can't create a css file like this, because I don't know beforehand which node should be colored Red.

Is it also possible to do this dynamically?

Regards,

John.

[PMarti · Accepted solution]

Hi Heutmekers, you can do that when you are binding the nodes. try something like that:

var oTreeNode = new sap.ui.commons.TreeNode({
    text: {
          path: "bind",
          formatter: function(value){
                                  if(value... /* Condition.. */){
                                        this.addStyleClass("class1");
                                    }...
                            }
          }
}); 

[john_heutmekers2 · Accepted solution]

Unfortunately no result so far, even with this css definition:

.backgroundred {

  background-color: #ff0000;

}

and code like:

	var oNode12 = new sap.ui.commons.TreeNode("node12",{text:"USA"});
	oNode12.addStyleClass("backgroundred");

Still no color visible. Any idea?

Regards,

John.

[Former Member · Accepted solution]

Hi,

Check this example

JS Bin - Collaborative JavaScript Debugging</title> <link rel="alternate" type=&q...

I have declared css .test{background-color: #ff0000;} and added style class to node.

Based on your condition, add declared style class to your node.

Hope it helps.

[john_heutmekers2 · Accepted solution]

See my previous answer, that's exactly what I have done, but I think because the Fiori apps run in the launchpad the link to the css either doesn't work or get overwritten by the framework?

even with this css definition:

.backgroundred {

  background-color: #ff0000;

}

and code like:

	var oNode12 = new sap.ui.commons.TreeNode("node12",{text:"USA"});
	oNode12.addStyleClass("backgroundred");

Still no color visible

Regards,

John.

[Former Member · Accepted solution]

Attached inspect element details. Check it in yours.

Also try to add !important in your css class.

.backgroundred {

  background-color: #ff0000 !important;

}

Message was edited by: Sriram Vaithiyanathan