CODEWITHSUNDEEP
javascriptoracle-databaseplsqloracle-apex
ThomasT
ThomasT

Reputation: 390

Add a Dynamic Action to a button created dynamically

Based on my previous post, I am building some sort of Dashboard on Oracle Apex (v21.1). My dashboard displays the state of the inventory of each department. As you can see, I added a button at the end of my list that display only when the state is "Validated" (the green line)

enter image description here

Here's the code of my Interactive Report :

SELECT 
    PK_DASHBOARD,
    FK_SERVICE_DASHBOARD,
    ETAT_DASHBOARD,
    DATE_DASHBOARD,
  CASE
    WHEN etat_dashboard = 1 THEN '<button>Libérer</button>'
  END as bt_dashboard,
  CASE 
    WHEN etat_dashboard = 0 THEN '<a href="mailto:'||email_dashboard||'?Subject=RAPPEL - Inventaire communal"><span aria-label="Mail"><span class="fa fa-envelope-o" aria-hidden="true" title="Mail"></span></span></a>'
    WHEN etat_dashboard = 1 THEN '<span aria-label="Mail"><span class="fa fa-check-circle-o" aria-hidden="true" title="Mail"></span></span>'
  END as ico_dashboard
FROM inv_tb_dashboard

I would like to add a Dynamic Action when the user is pressing on the Button. I don't know how to link a dynamic action to a button created this way. Is there some sort of javascript function with a getElementById or should I add a onClick="" to my button ?

My Dynamic Action would only be a Server-side code, like UPDATE inv_tb_dashboard SET etat_dashboard = 0, not something too tricky.

If you have any ideas that could lead me in the right path, do not hesitate.

You can ask me more question if you need more details.

Thank you,

Thomas

Upvotes: 1

Views: 3645

Answers (2)

Koen Lostrie
Koen Lostrie

Reputation: 18630

Cleanest way to do this is to use a javascript custom event. I'm going to explain this with a report on the the EMP sample table.

Step 1: create button. Make sure the button has a (1) a custom class to capture the click event and (2) a data attribute to uniquely define the row.Best is to use the button builder in the universal theme application to provide the markup. Use Column Formatting > html expression to put the button markup in. In my case this would be

<button type="button" data-ename="#EMPNO#" class="my-button-js t-Button t-Button--tiny t-Button--success t-Button--stretch">My Button</button>

Step 2: create a (hidden) page item to hold the identifier of the row you clicked, in my case P1_EMPNO.

Step 3. Create a dynamic action to set the value to P1_EMPNO to the value empno of the row button you clicked in the report.

Selection Type: JQuery Selector JQuery Selector: .my-button-js

True Action 1: Action: "Set Value", Set Type: "Javascript Expression", Javascript Expression: this.triggeringElement.dataset['ename'], Affected Element: P1_EMPNO True Action 2: Action: "Execute Javascript Code", Code:

//$(document).trigger('mybuttonclicked');
$.event.trigger("mybuttonclicked");

Step 4: Create a dynamic action to fire on the custom event you fired in True Action 2 of Step 3.

Event: Custom Custom Event: mybuttonclicked Selection Type: "Javascript Expression" Javascript Expression: document

True Action 1: Action: Execute Server-side Code, Language: PL/SQL, Code UPDATE EMP SET sal = sal * 1.1 WHERE empno = :P1_EMPNO;, Items to Submit: P1_EMPNO True Action 2: Refresh the report.

Check a pro (Dan McGhan) explaining it here: https://www.youtube.com/watch?v=DzqFXTnAIr8

Side note. You can also controle the display of the column using this button styling.

  1. Add a column to your report (in this case I want to hide button for employee named BLAKE)
       CASE ename WHEN 'BLAKE' THEN 'none' ELSE 'block' END as DISP_COL_CLASS
  1. Add a style directive to the button, "display"
<button style="display:#DISP_COL_CLASS#" type="button" data-ename="#ENAME#" class="my-button-js t-Button t-Button--tiny t-Button--success t-Button--stretch">My Button</button>

Note that this isn't that secure. It hides the button but anyone with some javascript knowledge could make it reappear. You'll have to add some checks on the serverside too to prevent malicious use.

Upvotes: 1

Asfand Saddiqui
Asfand Saddiqui

Reputation: 21

If you have predefined actions then create an array of actions and depending upon your condition add action to the button this can easily done with javascript Example:

const actions=['delete','update'];

let button=document.getElementByID('btn');

const queryExecutor=action=>{
//run action code

}

//Add Condition for Button
if(user=='admin'){
//add action to button dynamically
button.addEventListener('click',queryExecutor('delete'));
}
if(user=='user'){
//add action to button dynamically
button.addEventListener('click',queryExecutor('update'));
}

Upvotes: 1

Related Questions