Trigger Dynamic Actions from a JavaScript Animation in Oracle APEX

Question

Hello fellow developers. I am working with Oracle APEX.

I have found a pretty beautiful JavaScript library about animation and I would like to use it in order to make my application more beautiful and to show the user the path in order to make some configurations in the database. The library that I have found is called JIT (https://philogb.github.io/jit/demos.html) and I would like to use this instance: https://philogb.github.io/jit/static/v20/Jit/Examples/Spacetree/example1.html. After I implement the animation in APEX I would like to add some dynamic actions. For example every time one node is being clicked, a different region underneath the animation is being displayed and the other sub-regions are being hid.

Until now I have uploaded the JIT library and the JavaScript code that contains the Events and the functions about the animated tree in the shared components of my application. Also I have managed to display the animation in the Oracle APEX page, through an HTML code. I caught the Event that is happening whenever one node is being clicked. I have created also one dynamic action on a Region, and with this dynamic action I would like to show this Region. And every time, one different node is being clicked this Region is getting hidden. The dynamic action I have created has the existing attributes:

*Event ='Change'
*Selection Type = JQuery Selector
*JQuery Selector = $("#P5_NAME").val('INAS006E ');

,where P5_NAME is a field that I store in the JavaScript code the name of the node that is being clicked and 'INAS006E' is the name of one specific node.

*Action = Show
*Selection Type = Region
*Region = Test JS

, the name of the region that I want to display.

The biggest problem that I don't know how to overcome is, to pass the variable in the JavaScript code, node.name, in the Oracle APEX in order to trigger the dynamic actions.

Here is the Event that is being triggered where one node is clicked and where I store the node.name.

onBeforeCompute: function(node){
       Log.write("loading " + node.name);
       alert(node.name);
       $("#P5_NAME").val(node.name);
},

In conclusion, I want after one node is being clicked, one region is getting showed after I click one the next node, the previous node is being hid and another one is coming up. But in order to do that, I have to pass the variable from JavaScript code into Oracle APEX.

Diakos Diakos · Accepted Answer · 2019-07-18T12:22:51

I have managed to solve this problem after a lot of testing and searching. The truth is that the answer is simpler than I expected. All I had to do, is to change a little bit the code of the function, that is being triggered. The correct function is:

 onBeforeCompute: function(node){
            Log.write("loading " + node.name);
            alert(node.name);
            $s("P5_NAME",node.name);
        },

The $s("P5_NAME",node.name) sets the value of textfield P5_NAME with the name of the node.

Trigger Dynamic Actions from a JavaScript Animation in Oracle APEX

1 Answers