API Example: Color Logic

Modified on Fri, 7 Jun at 5:40 PM

In some cases, basic Gantt color logic may not work for your project, so you decide to use the API approach for additional customization.  In this article, we will describe a few cases.



There are 2 types of colors: static and dynamic. The difference between them is described in the next article:

https://nextedy.freshdesk.com/support/solutions/articles/48001165795-how-to-configure-the-item-colors



  • First case:

Imagine that you have some tasks and you want to change their color to green if they start after today.


So what should we do is perform a little script in the Widget Parameters -> Advanced -> Item Script:

var today = new Date();
if(task.start_date.getTime() > today.getTime()){
    task.taskColor="green"
}


As you can see tasks changed their color to green:




  • Second case:

One condition may not be enough, so you decide that if the task only has the type "workpackage" and started earlier than today it should be green.


Beware: in the example above we were using dynamic coloring, but for the second case it will not work correctly. 

From the article mentioned above you know, that ".taskColor" is used only to change the default blue color and can't affect items that changed their color due to changes in progress. 

As the logic of the second case means that we already changed its color, so for this case, we'll use static coloring.


So we add to Widget Properties > Advanced >Gantt Config Script:

gantt.config.show_progress_colors=false;


And then put a snippet to Item Script:

 var today = new Date();
if(wi.getType().getId()==="workpackage" && wi.getStatus().getId()==="draft"){
    if(task.start_date.getTime() < today.getTime())
        task.color="green"
}


Now you can see that tasks that correspond to the specific conditions are turned green:



  • Third case: Change tasks' color based on assignee;

Of course, this is also possible, but requires a little bit more complex Item script:

var assignee = null;
var aIterator = wi.getAssignees().iterator();
if(aIterator.hasNext()){
   assignee = aIterator.next();
       if(assignee || assignee.id==="yourAssigneeId"){
      task.taskColor="#a9d08e"}
  }


Please note that this exact script will work if your tasks have only one assignee; in case you have multiple assignees you'll need to add an additional loop to count all of them.




We hope this will help you to find a perfect color schema for your project needs.


And of course, you can use not only the standard colors, but you can actually define any special ones by using the HEX color format like: 

task.color= "#bfbfbf"
or
task.taskColor= "#bfbfbf"



In case of issues, please send a message to: [email protected] 



Was this article helpful?

That’s Great!

Thank you for your feedback

Sorry! We couldn't be helpful

Thank you for your feedback

Let us know how can we improve this article!

Select at least one of the reasons
CAPTCHA verification is required.

Feedback sent

We appreciate your effort and will try to fix the article