7 Replies Latest reply on Mar 13, 2020 11:50 AM by Mike Chew

    Setting JET 4.2 Gantt Chart task color by CSS class

    BRB91

      APEX 18.2 in compatibiity mode for 4.2 and using Theme 26 "PRODUCTIVITY_APPLICATIONS".

       

      Setting colours of OJ Gantt Tasks using CSS classes defined by the Gantt SQL causes the same classes to be appended rather than overwritten each time the Gantt region is refreshed. (It also remembers old task classes which cause conflicts when trying to change colour).

      In this example I am returning either "blue" or "grey" from the MY_COLOUR item and applying it to a Gantt Task.

      Rather than the Gantt Task CSS class overwriting the old value, it is appended like so.

      Here the task started off as blue, then set to grey however the blue class remained (which overrides the grey colour making it stay blue) and each refresh or resize of the gantt region (which triggers a refresh) caused the current value of MY_COLOUR to be applied to the Gantt Task again resulting in some very long strings of CSS class names which conflict with eachother.

       

      Does anyone know of any way to prevent this from happening so that on the region refreshing, only the current value of MY_COLOUR is applied to the Task?

       

      Thanks in advance,

       

      BRB

        • 1. Re: Setting JET 4.2 Gantt Chart task color by CSS class
          John 'JB' Brock-Oracle

          What does the JavaScript look like that you are using to add that css class?

          • 2. Re: Setting JET 4.2 Gantt Chart task color by CSS class
            BRB91

            What does the JavaScript look like that you are using to add that css class?

             

            It's just a simple class name passed in from the Apex appearance setting (shown below)

            The classes are defined by the following with &MY_COLOUR. returning either "green" or "red":

            .green {
                fill:#006400;
                stroke: #000000;
                stroke-width: 1px;
            }
            .red {
                fill:#CC0000;
                stroke: #000000;
                stroke-width: 1px;
            }
            

             

            Since posting this, i've managed to figure out a way to update all the Tasks through a javascript loop and ajax callback in an after Refresh trigger on the Gantt region but its very hacky given I cant access the Task ID's directly.

            The sched_hc_arrary just returns a list of "ID" and "MY_COLOUR" which is a number and either "green" or "red". The loop then overwrites whatever class attribute each Task has with a single "red" or "green".

            apex.server.process
              ('SCHEDULED_HEADCOUNT_REFRESH'
              ,{}
              ,{
                    success: function (pData) {
            
            
                    var sched_hc_array = JSON.parse(pData);   
            
            
                    for (var x in sched_hc_array) {
                        if (sched_hc_array.hasOwnProperty(x)) {
                            if (sched_hc_array[x].my_colour == "red") {
                              //Gets the "g" element for the Scheduled Headcount Row (which starts at 0) and loops through each Task in that row updating the class colour with the value from the sched_hc_array.my_colour value (using id-1 because the ID starts at 1).
                              document.getElementById("db_outer").childNodes[0].childNodes[1].childNodes[sched_hc_array[x].id-1].childNodes[0].setAttribute("class","oj-gantt-task oj-gantt-task-bar red");
                            }
                            else if (sched_hc_array[x].my_colour == "green") {
                              document.getElementById("db_outer").childNodes[0].childNodes[1].childNodes[sched_hc_array[x].id-1].childNodes[0].setAttribute("class","oj-gantt-task oj-gantt-task-bar green");
                            }
                        }
                    }
               }
               ,dataType: "text"
              }
              );
            
            • 3. Re: Setting JET 4.2 Gantt Chart task color by CSS class
              John 'JB' Brock-Oracle

              All of that process is defined by the APEX product and isn't really part of the JET Gantt component.  I would reach out to the APEX team and possibly file a bug since it appears that it's appending instead of replacing classes when the APEX UI is used.

              1 person found this helpful
              • 5. Re: Setting JET 4.2 Gantt Chart task color by CSS class
                Mike Chew

                Hi,

                I don't know if this will help, but I was able to dynamically set the colour of a standard APEX Gantt Chart using the following method.  I had been searching all over the internet to find an answer to this, but after piecing together bits and pieces I found, I developed this solution.  I had come across your question on my search so I thought I'd return and pass on what I determined as a solution.  I'm not particularly knowledgeable on CSS, but this has worked for what I needed to achieve........

                 

                This example will show how to dynamically change the colours of the 'progress' part of an APEX standard gantt chart based upon a condition in the SQL statement that is used to provide the gantt chart data as per in the example below.  This example shows that if the start date of the task in the gantt chart is before the current system date it'll be red, otherwise it'll be green

                 

                 

                 

                The first part is to specify some custom CSS classes, (if that's the correct terminology???), to use.  Upon inspecting the element for the progress part of the task without introducing any changes it'll look like this:

                 

                 

                The CSS attribute that changes the background colour of the task is 'fill'.  Therefore, for the APEX page that has this gantt chart in it, navigate to CSS > Inline.  Enter the following which will create a new CSS classes of myRed and myGreen for the 'oj-gantt-task-progress' class:

                .oj-gantt-task-progress.myRed {

                        fill:red;

                }

                 

                .oj-gantt-task-progress.myGreen {

                        fill:green;

                }

                 

                Next, in my example I added a CASE clause in my SQL statement to return a new column PROG_COL to either return a value of 'myRed' or 'myGreen' depending upon whether the column TASK_START_DATE is less than SYSDATE:

                case

                when task_start_date < sysdate then 'myRed'

                else 'myGreen'

                end prog_col

                 

                The final part is to specify the 'Progress CSS Classes' that we've just created.  Navigate to the Gantt Chart 'Series' > Appearance > Progress CSS Classes.  Enter &PROG_COL.

                 

                 

                Save your changes and that's it!!!

                 

                Now, after applying these changes, if you inspect the element for the progress part of the gantt chart task that is red, it'll look like this:

                I hope that helps.

                Regards,

                Mike

                • 6. Re: Setting JET 4.2 Gantt Chart task color by CSS class
                  BRB91

                  Hi Mike,

                   

                  Thanks, that's essentially what I did, you'll probably notice that your "myRed" class has appeared in your task 3 times and will add another one every time you refresh the region (even by resizing it), this is the problem I was having.

                  • 7. Re: Setting JET 4.2 Gantt Chart task color by CSS class
                    Mike Chew

                    Hi BRB,

                    After re-reading your question, I understand what you were asking.

                    My mistake.