Discussion
How to add a 'select all' functionality to the optimized table
The optimized table is the preferred approach for rendering read-only and editable tables. It has a lighter markup, it more accessible and has improved performance. Having said that it does not have all the functionality of the legacy table component. One of the most requested feature is the ability to select all the rows in a page. This is particularly useful when you use paging and want to quickly select all the rows in the page.
Here is a demo of the functionality
This document is going to explain how to implement such functionality with a little bit of custom javascript.
1/ Configure the optimized table to use an editable DP
Make sure that your optimize table is using an editable DP - For this example, we will use the data page called 'D_pxUnFollowCases' which is used to follow / unfollow cases.
Here is the configuration of this table using Theme-Cosmos
Make sure to disable column grouping in the 'presentation' tab for this functionality to work. The recommended settings would be:
2/ Add a checkbox on the first column
add a checkbox using the .pySelected property and configure the click action to 'post value' - This will allow the setting to be persisted in the editable DP - If you do not configure the click action, the row selection will be lost when changing to the next page
3/ Add a checkbox in the header of the first column
add a checkbox in the header of the column - this will be used for the 'select all' action - on click, add a runscript action that will call a function called selectAllCheckbox.
Note: You don't need to set a property on this checkbox - it will automatically set to the pyDefaultTemplate property. The property will not be stored in the editable DP and does not have to be sent to the server.
4/ Implement the function selectAllCheckbox
There are several ways to implement a JS function - the recommended approach is to create a new JS file and reference the file in your portal harness. If you want to get this function available everywhere, you can also load the JS file using the userworkform fragment.
For this document, we will implement directly the function in UserWorkform using the following snippet
<script>
function selectAllCheckbox(event) {
var el = event.target;
$(el).closest("table").find(".checkbox").each(function() {
if(el !== $(this)[0] && $(this)[0].checked != el.checked) {
pega.control.actionSequencer.fireTopPriorityEvent($(this)[0], "click")
}
});
}
</script>
The function will find all the checkbox visible in the table and trigger the click action on each individual checkbox. Note that if you have other checkboxes in the table, they might be triggered too - you will need to implement some additional filtering in the if condition above.
5/ Implement business logic for selected rows
If you are rendering the table in a modal dialog, the last step is to create a DT or activity and configure it in the post processing of the flow action - On submit of the modal, the pro-processing work will look for the rows with .pySelected set to true
@RichardMarsot
You can do this with OOTB.
Call a DT with Section refresh for Select All Check box. This will select all the rows, when select all is checked or true.
For each row check boxes, it will have same config as above. But this time, it will see IndexInPageList of False for the each check boxes. When any False is present, then select will be unchecked.