Sortable RG

file:///home/slimecube98/Pictures/overlap2.pngIntroduction

This plugin allows you to sort and change the database using repeating group and drag-n-drop, as well as simply interact with the repeating group.

How To Setup

Place repeating group on the page

Set it ID Attribute

Place plugin element to the page and set RG id in the first field

For work with database you need to check if data type privacy allows creating and modify via API ( see in: Base -> Privacy -> Your data type -> Define a new rule ) and in app settings is enabled Data API ( see in: Settings -> API -> check Enable Data API -> check Your data type ). https://bubble.io/reference#API.get_api

Plugin Element proprieties

Element Fields

Title	Description	Type	Format
Repeating Group ID	The ID of the repeating group	Required	text
Sort	Enable sort in a repeating group. Sorting allows drag-n-drop between items	Required	yes\no
Animation Time (ms)	Animation time of dropping the item in the group	Required	number
Swap	Enable swaps of elements	Required	yes\no
Handle	The ID of the handle element. Handler, which is an area of every list element that allows it to be dragged around.	Optional	text
Easing	Type of easing.	Required	enum
Background Color of draggable element	Background Color of the draggable element	Required	color
Background color of ghost element	Ghost element remaining on the initial position while is not dragged to another location	Required	color
Background color of new position of dragged element	The background color of the new position of the dragged element	Required	color
Group Name	Then is indicated allow dragging between RG with the same group name	Optional	text
Title of table	Title of the table from database which represents items in the list	Optional	text
Things	List of unique_id of items in RG	Optional	List of text
Sort data	List of sort field of items in RG	Optional	List of numbers
Enable Deleting	Then is checked, will cause the dragged item to be removed from the base	Required	yes/no
Enable empty area	When the RG is empty shows an area to make it easier to transfer items to an empty RG	Required	yes/no
Height of empty area	Height of displayed empty area in pixels	Required	number
Background color	The background color of the empty area	Required	color
Border style	The border style of the empty area	Required	enum
Border color	The border color of the empty area	Required	color
Border width	The border width of the empty area in pixels	Required	number
Text color	Color of the text in the empty area	Required	color
Element text	Inner text of the empty area	Required	text

Element Actions

Title	Description
Toggle sortable	Enable or disable drag-n-drop in RG
Refresh RG	Redraw RG

Element Events

Title	Description
Out Of Container	Is triggered when an element is dropped out of the container
Dropped In Another Group	Is triggered when an element is dropped in another group
Delete Success	Is triggered when an element is deleted from the database
Delete Fail	Is triggered when an element is failed to delete
Item moved	Is triggered when an element is moved inside of the RG

Element States

Title	Description	Type
Plugin Message	Returns the status of deleting an item	text
Item unique_id	Returns item unique_id	text
From Table	Returns title of the table from where to get an item	text
To Table	Returns title of the table from where to put an item	text
Is Enable	Return information if the element is enabled	yes/no
New Sort Of Item	Return new value for sort field of an item	number

Plugin actions

Move in Base

This action move item between database tables via API call.

Action fields

Title	Description	Type	Format
From	Title of your data table from where will be copied an item	Required	text
To	Title of your data table to where will be copied an item	Required	text
ID	Item's unique_id	Required	text
Delete Item From Table	If is checked item will be deleted from the initial table	Required	yes/no
New index of element	Position of element in new data table	Optional	number
Previous element sort	Sort value of previous element in new table	Optional	number
Next element sort	Sort value of next element in new table	Optional	number
Title of sort field	Title of sort field in data	Optional	number

Example of tables

Workflow example

check the demo

Troubleshooting

In Firefox, handle doesn't work on icon. In order to avoid problems, you need to overlap the icon with a group and use the id of this group as a handle.