cancel
Showing results for 
Search instead for 
Did you mean: 

UI5 Gantt chart color based on condition

Hi experts,

How can I set the fill color of a Gantt chart shape based on the value of a property in the bound json model?

Here's the code I am using to configure the sap.gantt.config.Shape :-

var oRectangle = new sap.gantt.config.Shape({
    key: "Rectangle",
    shapeDataName: "schedule",
    shapeClassName: "sap.gantt.shape.Rectangle",
    shapeProperties: {
        time: "{startTime}",
        endTime: "{endTime}",
        height: 32,
        fill: "green",
        title: "{name}",
        level: 0
    }
});

The use case I am trying to address is :-

If there are 4 or more schedules, then fill the shape with GREEN else fill YELLOW.

I have already tried expression binding like :

fill: "{= ${data>/schedule}.length > 4 ? 'green' : 'yellow' }"

But that didn't give any result and filled the shape with the default BLACK color.

Is there some other way of getting it possible?

Also, is there a way we can configure Gantt shapes in XML views itself ratherer than doing all these configurations the in controller?

Accepted Solutions (0)

Answers (1)

Answers (1)

iftah_peretz
Active Contributor
0 Kudos

Hey,

You are passing "this" to the config function (which the snippet is from) and if not then you have a direct access to the data. So then all you need to do is something along these lines

var fillColor = "green";
if (some condition based on the data)
   fillColor = "yellow";
...
fill: fillColor,
...
0 Kudos

Hi Iftaz,

But the snippet I have provided here is written in the onInit function and hence called only once and not inside some kind of loop.

What I am looking for is some way of binding the fill property to the result condition.

iftah_peretz
Active Contributor
0 Kudos

So set that variable to be global, such as window.fiilColor. Be aware of all the repercussions of using such method.