Select multiple checkboxes from a list in a Pega application

General
1

Requirement: Select multiple checkboxes from a list in a Pega application

Objective: Enable users to select multiple checkboxes from a list in a Pega application using the Shift key, similar to the behavior seen in file selection within operating systems.

Details:

  • When a user holds the Shift key and clicks on a second checkbox in the list, all checkboxes between the first selected item and the second clicked item should automatically be selected.
  • This functionality should mimic the familiar “range selection” behavior, enhancing usability especially in cases with large datasets.
  • The implementation should be compatible with Pega’s section rules and repeat grid configurations.
2

@Neeraj_Singh

By default, Pega does not support Shift+Click multi-selection behavior for checkboxes (similar to file selection in operating systems). However, this functionality can be implemented using custom JavaScript and Pega’s section rules.

:puzzle_piece: Objective

Enable users to select multiple checkboxes in a list (e.g., in a table or repeating layout) by holding the Shift key, selecting a start checkbox, and then selecting an end checkbox—resulting in all checkboxes in between being selected automatically.

:hammer_and_wrench: Implementation Steps#### 1. Create and Attach a Custom JavaScript File

  • Create a JavaScript file containing the logic for handling Shift+Click selection. PFA - ShiftClickCheckbox.txt

  • Attach this JavaScript file to your Harness using the “Scripts & Styles” tab or by referencing it in the UserWorkForm.

2. Configure Table Section

  • Open the section containing your table or repeating layout.

  • Go to the table properties > Actions tab > Events and add a Click event:

    • Action: Run Script

    • Function Name: selectRows

    • Event: javascript:event

    • Section Name: [Insert the name of the section where this logic should apply]

3. Set Action on Checkbox

  • Select the checkbox used for row selection.

  • Under Actions, add an On Click event with the action Refresh This Section.

    • This ensures that changes made to the selection are reflected on the clipboard (.pySelected property or equivalent).

4. Update JavaScript File

  • Open your custom JavaScript file and replace the Section Name with your actual section name where you want the functionality applied.

ShiftClickCheckbox.txt (3.38 KB)