In this example I click on a button in a report to add the row to collection, without submitting the page.
Prepare pageAdd Static id to your report region:
Add hidden page item: P2_ADD
Set protected = No if you need to submit the page for other processes.
Create before header process to initialise collection
APEX_COLLECTION.TRUNCATE_COLLECTION(p_collection_name => 'EMPS');
Add link columnDefine a new column in your report that will serve as the link button, it only returns null. For classic reports you could create a virtual column for the purposes of a link.
My report on emp uses this SQL
select e.*, null add_btn from emp e
Modify the new column and set the column type to 'Link'.
Link text: Add
Link Attributes: data-id="#EMPNO#" class="add t-Button t-Button--warning t-Button--simple t-Button--stretch"
The data tag creates an attribute that we can interrogate easily with jQuery, returning the ID of the record.
The classes represent the same classes that would be applied when choosing relevant template options. The 'add' class is added for our dynamic action.
Create dynamic actionCreate a new dynamic action that will respond to button press, using on click of a jQuery selector.
Use the following selector to identify add button clicks on your report.
Don't forget to set this to not Fire on Page Load. this.triggeringElement represents the button pressed, which is generated as the following HTML.
If you were defining a remove function, then a second statement could be added to immediately hide the row from view without needing to refresh the report by locating the surrounding tr tag.
Though this may make pagination feel a little strange, as the number of rows displayed won't add up.
Execute the PL/SQLYou could then define a second action that executes PL/SQL, including P2_ADD in 'Page Items to Submit', so you can then refer to :P2_ADD as a bind variable in the PL/SQL. Note, you should always explicitly convert any value from session state that is not a string.
Alternatively, you could define an onChange event on P2_ADD which does the same thing. This would allow different UI on the page to invoke the same action.
The onChange dynamic action should only execute when the item is not null, and an action after the PL/SQL should clear the item. This allows the same value to be selected successively, otherwise the value wouldn't 'change' the second time around.
In the screenshot & example below I also refresh the region containing the collection.
OutcomeSo that describes a pattern I use frequently, and some variation of which is asked on the forums all the time. I plan to extend this example to include the collection report as a modal dialog with the ability to add & remove.
|Run the demo to see it in action.|
If you want to explore this further, you might like my book on jQuery with APEX. </shameless-plug>