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. You can explore these with the UT button builder.
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.
Or you could add a declarative true action to hide the triggering element, so the button can't be double clicked by a frustrated user.
Partial Page RefreshMay 2017 - I've added this section in response to a reader comment. I can't believe I neglected this property in the first place.
You'll find a problem if the report is refreshed due to a range of actions such re-sorting, applying filter, or perhaps invoked as a refresh action in yet another dynamic action - the on click dynamic action on our action button no longer works!
This is easily adjusted using the Event Scope property for the on click dynamic action, using the 'Dynamic' option (formerly 'Live').
|Set Dynamic Action Event Scope to Dynamic|
This maps to a jQuery setting that, as the item help describes:
Binds the event handler to the triggering element(s) for the lifetime of the current page, irrespective of any triggering elements being recreated via Partial Page Refresh (PPR).The default option is static perhaps as the lowest common denominator, favouring speed. Most reports would have this adjusted to Dynamic.
The second property allows you to define the surrounding container of what's being refreshed, ie, the region. It's my understanding that you would include the following value.
And this would reduce the search area required to find our particular buttons, but I thought that was the purpose of supplying this as a surrounding ID/repeating class combination.
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>