I have an Interactive Grid (Apex 22.1)
Select emp, bonus, dept from employees;
Now i need to add a button in the grid for each row.
The button would call a procedure that would eventually update the bonus of each employee by 5%.
So if i cluck on Update button for Employee John, for John it would update bonus to 5 % and so on.
How can this be achieved?
I have seen several solutions for adding buttons but going a step further and including the procedure is where i need help with…
I cannot share actual code so just tips/suggestions would also be very helpful.
5
Here is an example on the EMP table. When a user clicks the button, the salary is updated by 1 through sql and the report refreshes.
create report
- IG on EMP table, not editable
- Add a column (using left click > Add Column) of type HTML Expression. Use the button builder to create the markup. For this example, I used the following markup:
<button type="button" data-empno="&EMPNO!ATTR." class="increase-salary-Button t-Button t-Button--icon t-Button--warning t-Button--iconLeft"><span aria-hidden="true" class="t-Icon t-Icon--left fa fa-arrow-circle-up"></span>My Button</button>
Note that there are 2 additional attributes in the button tag:
- the first one
data-empno="&EMPNO!ATTR."adds an html data attribute that references the empno of the current row - the second one
increase-salary-Buttonadds an additional class for the dynamic action click event to listen on.
create page item
Create a page item P132_EMPNO to hold the value of the empno when the button is clicked.
create dynamic action
Create DA with the following attributes:
-
Note the “Event Scope”. This needs to be set to “dynamic” because you want the button to still work after the region refreshes. If it is set to “static” it will only work the first time.
-
Note the jQuery selector. This references the class on the button.
-
Create a DA action of type “Set Value” to set P132_EMPNO
- Note the
this.triggeringElement.dataset['empno']to reference the data attribute - Create a DA action to execute the sql / pl/sql
- Create a DA action to refresh the IG region.
A couple of notes:
- For this button an HTML expression is used. A more modern approach is to use the
cellTemplateproperty and define the button in the “Column Initialization JavaScript Function” of the column. - Instead of the “data-empno” approach, the apex actions framework can also be used. That would make it a bit more “apex native”.
4