Link to the plugin page: https://zeroqode.com/plugin/rg-drag-select-1613754705411x115337835481911230
Demo to preview the settings
Introduction
This plugin allows you to implement repeating group cell selection by dragging over cells.
How to use this plugin
To get started, add an instance of the element 'DragSelect' onto your page outside of the repeating group, from the element fields, replace the no value for 'RG is Loading' to (dynamic data) your repeating group is loading then do the same for the 'Count', repeating group's list of items:count.
Configure the Selectable ID on the plugin element, you can leave this as ds-selectable then from your application editor go to Settings->General and make sure the 'Expose the option to add an ID attribute to HTML elements' is checked/turned on.
Choose an element within your repeating group cell that you would like to make selectable, this means when the selector square is drawn over its position it will become selected. On your chosen element add the exact ID from the 'DragSelect' element's field, followed by (dynamic data) Current cell's index. For example: ds-selectable Current cell's index (without any space between the text and the dynamic text).
Next set up some states on the page to reference selected repeating group items, so we can perform actions on the list. Create your first state as a list of numbers with the name 'Selected Cells' & a second state with the name 'Selected Data' and the type of Data that your repeating group uses then make this a list also.
In your workflows add an event 'A DragSelect Element Selected' then add a workflow action to set state on the page (where the states we just created are stored) & set the value of 'Selected Cells' to (dynamic data) This DragSelect's Selected Cells.
Create another workflow with the event 'A DragSelect Empty Selection' and set state action also, here you want to clear both of the state list's, so set both the page's Selected Cells & Selected Data to empty.
Add an instance of the element 'DragSelect Cell' onto your page and place it inside of the repeating group, replace the no value for 'Contains' to (dynamic data) page's Selected Cells contains Current cell's index. page's Selected Cells should be the state you created in prior steps.
If a Cell element is grouped, make sure its parent container has a type of content and a Data type set that refers to the current Cell's item. Read the next two steps as a parent's type of data instead of the current cell's.
Create a workflow with the event 'DragSelected Cell Change', set the only when condition to 'This DragSelectCell's Selected is yes'. Create an Action on the same workflow to set the state of the page's Selected Data to 'page's Selected Data:plus item Current Cell's type of Data and page's Selected Data doesn't contain Current cell's type of data'.
Finally copy and paste the Cell change event workflow from the last step, on the only when condition, replace 'yes' with 'no' and 'doesn't contain' with 'contains' then replace the 'plus item' operator to 'minus item'.
For designing UI when items are selected refer to the page's state, 'Selected Cells contains Current cell's index'. Although the plugin element provides a list of selected cells, we refer to the page's state to allow for modifying the list with other interfaces.
When designing hover UI you can just refer to the plugin element's state 'DragSelect's Hovered Cells contains Current Cells index'. The DragSelect element also has some other states not mentioned here but used in the demo: Selected IDs, Selectable IDs, Selector Visible, and Active.
When you want to perform any workflow actions with the selected items refer to the page's state 'Selected Data'. For example, to delete a list of things set the action's (dynamic data) value to your page's Selected Data.
