12 Replies Latest reply on Feb 6, 2019 11:16 PM by wcaples

    Adding a link (for edit) in Gantt JET Chart in 18.x

    ash0602

      Hi All,

       

      I have a requirement where user would want to edit the record directly from the Gantt Chart, before Oracle's JET Chart, there was Gantt Chart plugin which enables a link (to a modal page for editing the record), but we are using packaged application as a reference point and couldn't find any way to put a link on the chart. 

       

      I looked at Context Menu option (https://www.oracle.com/webfolder/technetwork/jet/jetCookbook.html?component=gantt&demo=contextMenu), but could not get this working.

       

      Does anyone have any idea or suggestion how to implement a link on JET Gantt Chart in 18.x (Sample Chart Packaged Application could be a reference point)?

       

      Thanks,

      Ash

        • 1. Re: Adding a link (for edit) in Gantt JET Chart in 18.x
          Pierre Yotti

          I will create a DA on click of each Task and open a Popup to edit the Task

           

          Bildschirmfoto 2018-10-23 um 16.54.56.png

           

           

          You can download the Demo here

          https://github.com/allipierre/Adding-a-link-for-edit-in-Gantt-JET-Chart-in-18.x

           

          Demo

          https://apex.oracle.com/pls/apex/f?p=2878:3

          • 2. Re: Adding a link (for edit) in Gantt JET Chart in 18.x
            wcaples

            Pierre,

            Could you explain how this page works?  What are the duplicated regions that say, "reference object via javascript code?"  I attempted to just take a fresh copy of the sample charts Gantt page and put a click event DA on the .oj-gantt-task and .oj-gantt-task-progress jquery selectors, but it doesn't fire (I just put an alert statement in the javascript).  What else do I need to do?

            Thanks,

            -warren

            • 3. Re: Adding a link (for edit) in Gantt JET Chart in 18.x
              Hilary Farrell-Oracle

              Hi Warren,

               

              I'm obviously not the author of that example, but as a means of helping you progress, here's what I'm seeing on the page - which is a modified version of the Sample Charts app that we ship with our releases:

               

              1) "Single Task per Row (Referece Object via JavaScript Code)" - this is the Gantt chart, rendering your tasks.  The 'JavaScript Initialization Code' has some code that is applied to the chart at the point of initialization.  Anything relating to the 'Reference Object' is just what I included in the original example, and isn't anything to do with this particular link scenario.  So the JS code can really be cut down to the following, to set the 'selectionMode' to "single" for the chart:

               

              function( options ) {
                  options.selectionMode ="single"  // Setting the JET attribute selectionMode to 'single'
                  options.selection = ["58"];   // Setting the task with ID of 58 to be selected by default when the chart loads
                  console.log(options)    // Emitting options to browser console
                  return options;
              }
              

               

               

              2) "Edit Single Task per Row (Referece Object via JavaScript Code)" - this is an inline dialog, with a static ID of 'popup'.  That is launched upon clicking a task on the gantt.

               

              3) 2 Page-level JavaScript functions: "editSigleTask" and "updateSingleTask".  If you haven't seen these, select the top-level 'Page 3: Gantt' node of the Rendering Tree in Page Designer, and then view the content of the 'Function and Global Variable Declaration' in the JavaScript grouping of Property Editor.  There you'll see the 2 functions in use, and their use of the inline dialog - which is referenced by its static ID 'popup'.

               

              4) 4 Dynamic Actions - "New_1" and "New_1_1" relate to the clicking of a task on the gantt chart, and call the function "editSigleTask" for the selected task element; "New_2" and "New_3" relate to the buttons on the inline dialog, as you'll see - the first to close the popup inline dialog, and the second to call the function "updateSingleTask", to save the updates made in the dialog.

               

              5)  2 Ajax callback processes defined - "getdatavalue" and "editdatavalue".  If you inspect the JS functions, you'll see that "getdatavalue" is called by the "editSigleTask" function, to populate the popup; "editdatavalue" is called by the "updateSingleTask" function, to save the changes to the underlying table.

               

              Hopefully that'll help you to proceed. I'll leave it to Pierre to provide details on the approach he's chosen.

               

              Regards,

              Hilary

              • 4. Re: Adding a link (for edit) in Gantt JET Chart in 18.x
                wcaples

                Hilary-

                I'd like to take a sec to thank you for your considerate, useful and educational responses on this forum (and this post).  It really helps!

                Thanks,

                -warren

                • 5. Re: Adding a link (for edit) in Gantt JET Chart in 18.x
                  Hilary Farrell-Oracle

                  Thanks very much, Warren, for your very kind feedback.  I'm just happy if I can help in some way.

                   

                  Thanks,

                  Hilary

                  • 6. Re: Adding a link (for edit) in Gantt JET Chart in 18.x
                    wcaples

                    Actually, Pierre, could you also update your github link for the demo app?  It doesn't seem as complete as the demo app up on apex website; for example, it doesn't have the "save with callback" button in the popup dialog, only a "save" button, and the application processes aren't there.

                    Thanks,

                    -warren

                    • 7. Re: Adding a link (for edit) in Gantt JET Chart in 18.x
                      3724979

                      Thank you Hilary - very helpful.

                       

                      However, is there anything I need to do to get the click event to actually fire when I click on a task progress bar?  I think I've done everything in Pierre's example, but still can't get the click to register/fire - same problem Warren seems to be having.

                       

                      Thanks,

                       

                      Frank

                      • 8. Re: Adding a link (for edit) in Gantt JET Chart in 18.x
                        Pierre Yotti

                        3724979 wrote:

                         

                        Thank you Hilary - very helpful.

                         

                        However, is there anything I need to do to get the click event to actually fire when I click on a task progress bar?  I think I've done everything in Pierre's example, but still can't get the click to register/fire - same problem Warren seems to be having.

                         

                        Thanks,

                         

                        Frank

                         

                        Update your forum profile with a recognisable username instead of "3724979".

                         

                        Please give us all the details if you asks a question. Oracle database, Oracle APEX version? Backend and frontend details? Web server  and APEX listener?

                        You could try to replicate your use case over on apex.oracle.com and share credentials so that someone could have a look at it and try to find a solution.

                        We can not debug something that we can not see.

                        • 9. Re: Adding a link (for edit) in Gantt JET Chart in 18.x
                          3724979

                          Thank you Pierre - user name updated. I'm using APEX 18.1 as per the context of the question, and will try to replicate on apex.oracle.com as you suggest. 

                          • 10. Re: Adding a link (for edit) in Gantt JET Chart in 18.x
                            3724979

                            Warren - I had the same issue. Note that the event scope for the Dynamic Actions needs to be Dynamic vs. Static. Making this change, (credit to Adrian Png), enabled the click event to fire.

                            • 11. Re: Adding a link (for edit) in Gantt JET Chart in 18.x
                              Hilary Farrell-Oracle

                              Hi Frank,

                               

                              It looks like you Adrian was able to sort you out with getting your DAs working - that's great.  Just in case you didn't see my response to a related thread, Apex 18.2 Gantt chart (Jet), need to make row labels links with info from rowData , the ojGantt API doesn't currently support drilling.  Otherwise we would provide declarative support out of the box.

                               

                              Regards,

                              Hilary

                              • 12. Re: Adding a link (for edit) in Gantt JET Chart in 18.x
                                wcaples

                                In case anyone is interested, I modified Pierre's solution to launch an Apex modal page instead of the inline form like so:

                                1.  commented out everything in the Page-level JavaScript function "editSigleTask" except for the line that modifies the P3_ID page item.

                                2.  added a P3_URL hidden page item, to store the prepared URL for my page link (I guess you have to use an apex function to prepare a special URL for modal page calls).

                                3.  added an "execute PL/SQL code" dynamic action step after the javascript dynamic action step in the "New_1" and "New_1_1" dynamic actions with this code in them (P10 is the modal page I'm calling, and P10_ID is the form item with the task id):

                                :P3_URL := apex_util.prepare_url

                                                      (p_url                     =>    'f?p='

                                                                                    || :app_id

                                                                                    || ':10:'

                                                                                    || :app_session

                                                                                    || ':::10:P10_ID:'

                                                                                    || :P3_ID,

                                                       p_triggering_element      => 'apex.jQuery(''#P3_ID'')'

                                                      );

                                 

                                On those dynamic action steps, I set the "Items to submit" to P3_ID and the "Items to return" to P3_URL

                                 

                                4.  added another "execute javascript code" step after the "execute PL/SQL code" steps I just added with this code:

                                document.location.href = $v('P3_URL');

                                 

                                5.  added a whole new dynamic action with the "Event" set to "Dialog Closed," the "Selection Type" set to "Item" and the "Item" set to P3_ID (since that was the p_triggering_element used in the prepare URL call), with a "Refresh" action where the "selection type" was region and the region is the "Single Task per Row" chart region.

                                 

                                Pierre's solution worked great as it was, but I just like using the modal page forms.

                                 

                                Thanks again, Pierre, for all your help on this forum.  I hope someday to be half the javascript/Apex whiz that you are!