How to setup
Prepare data type
Create a data type for the repeating groups. In this example, we'll create a "Card" data type.
To enable sorting, there must be a number field i.e. "Order number". We recommend setting the default value to 1024.
If you need to move items across multiple repeating groups, we recommend you to create an option set of categories. In this example, we'll create a "List" option set.
In order to change categories in the database, there must be a text attribute for the unique ID of each category i.e. "ID".
Create options, each with a unique ID. In this example, we'll create "Active", "Queued", and "Completed" options. The ID should only have alphabets and dashes (i.e. "active-cards").
After creating an option set, add a field in the "Card" data type that points to the "List" option set.
Custom states
There needs to be custom states to hold the data source of each repeating group. In this example, we created custom states on the page.
Create a custom state for all repeating group items regardless of the category i.e. "All cards".
Create a custom state for each of the List i.e. "Active cards", "Queued cards" and "Completed cards".
Create a custom event to load the custom states. We'll name it "Load custom states".
For the first step, add an action to set state of "All cards" to all Cards to be shown, and sort by "Order number" with "Descending" set to "no".
Then for the step step, add an action to set state of each remaining custom state by filtering by the List. In this example, "Active cards" should be set to "All cards:filtered", where the filter is "List = Active", etc.
Create a "Page is loaded" event and add "Trigger a custom event" step to trigger "Load custom states".
Repeating groups
Make sure you enable "Expose the option to add an ID attribute to HTML elements" setting at the bottom of "General" tab in "Settings" page.
Install "Classify" plugin.
If you need to move items across multiple repeating groups, create a parent repeating group where the Data source is all categories to be shown such as "All Lists", and add the ID attribute i.e. "all-lists".
Then create a nested repeating group and add conditions for each custom state. For example, we'll create a "List is Active" condition and set the Data source as "Active cards".
Give the nested repeating group a class name and an ID using this Classify command:
{addClass: "class"}IDSubstitute ID with the ID value of the current repeating group's List.
We'll set it as {addClass: "list"}List's ID.
Under the nested repeating group, create a group that will contain all the elements of each repeating group item.
We need to assign some data using custom code. In "ID Attribute", use this command:
[assign(p, "id", "order", "class")]Substitute id with Current cell's thing's unique id.
Substitute order with Current cell's thing's Order Number.
Substitute class with a class name i.e. "card".
We'll set it as [assign(p, "Current cell's Card's unique id", "Current cell's Card's Order Number", "card")]
Plugin element
Place a "Drag & Drop RG" element in the page.
To hide it, put it inside a group and set the group's width and height to 0px.
Do not change the visibility of the element or the group.
Set up "Drag & Drop RG" element's fields:
Lists ID: This is the ID attribute of the parent repeating group i.e. "all-lists".
List class: This is the class name of the nested repeating group i.e. "list".
List item class: This is the class name of the group that contains all elements of each repeating group item i.e. "card".
List items data type: This is the data type of repeating groups i.e. "Card".
List item order number: This is the number field in the data type i.e. "Order number".
List 1-10 ID: This is the ID of each List option i.e. "Active's ID".
List 1-10 Name: This is the name of each List option i.e. "Active's Display".
Workflows
Create a "A Drag & Drop RG List item is reordered" event.
Create an action "Make changes to thing", and set "Thing to change" as "Search for Cards:first item" where the search is "unique ID = This Drag&Drop RG's item ID".
Change "Order number" to "This Drag&Drop RG's order number".
Create a "A Drag & Drop RG List item is moved to another list" event.
Create an action "Make changes to thing", and set "Thing to change" as "Search for Cards:first item" where the search is "unique ID = This Drag&Drop RG's item ID".
Change "List" to "All List:filtered:first item", where the filter is "Constraint: This List's Display is This Drag&Drop RG's New List".
Creating new repeating group item
When creating a new repeating group item, set the order number higher than the current highest order number. We recommend +1024.
To show the new item in the repeating group without refreshing, we need to do the following:
Create a new custom state to hold the new item i.e. "New card".
After creating a new item, set custom state of "New card" to the new item.
Create a "Do when condition is true" event and set the condition as "Search for Cards:count > All Cards:count and New card is not empty". For the first step, add the "Load custom states" custom event.
For the second step, create "Sort list Drag&Drop RG" action and set "List ID" as "New card's List's ID".
If you want the repeating group to scroll to the new Card, create a third step with "Scroll to bottom Drag&Drop RG" and set "List ID" as "New card's List's ID".
Using popup
If you want to use a popup to display more information about each Card by using page's "Type of content" field, we need to set up additional workflows.
Create an action to go to the same page and set "Data to send" as the clicked item, and check "Send more parameters to the page". Set a key and value i.e. "from = card"
In the "Page is loaded" event, add an action to show the popup and set "Only when" to "Current page's Card is not empty".
Change the "Trigger Load custom states" action's "Only when" to "Get from from page URL is not card".
After "Trigger Load custom states" action, add "Hide parameter Drag&Drop RG" action, and set "Parameter key" as the same key i.e. "from".
Create "When popup is closed" event and create an actino to go to the same page with "Data to send" as empty or a null item (i.e. Search for Card:first item, where the search is Created Date is empty). Check "Send more parameters to the page" and set the same key and value i.e. "from = card".
Last updated