0
116
ViewsAdd 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)
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
2 answers
Answer question0
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.
- 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
- 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.
0
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'));
}