https://paper.dropbox.com/doc/03.-SortableList--BtO8ZjQCLWPO0K3_8pNiOPDvAg-qXJAC1i55RoQ8uA2Yc64D

03. SortableList

The Redactor BlackBox is used to display a portal of records that can be drag-and-dropped to sort. It utilises the jQuery UI library.

https://jqueryui.com/

The following interactions are included:

Display a main title label
Display a secondary description label
Display an image
Drag and drop to sort records

Parameters

The parameters are as follows:

SortableSimple ( DataField1Name ; DataField2Name ; SortFieldName ; IDFieldName ; ImageFieldName )

Parameter	Description
DataField1Name	A field with some text content that will appear as the main title for a row Eg, `"bb_data_planets::name"`
DataField2Name	A field with some text content that will appear as a secondary description for a row (optional) Eg, `"bb_data_planets::description"`
SortFieldName	A field that determines the relative sort order of each row Eg, `"bb_data_schedules::sort"`
IDFieldName	A field with a unique identifier for each row Eg, `"bb_data_schedules::id"`
ImageFieldName	A field that contains an image to display for each row (optional) Eg, `"bb_data_schedules::bar_color"`

Example

SortableSimple (

"bb_data_planets::name" ;

"bb_data_planets::description" ;

"bb_data_planets::sort" ;

"bb_data_planets::id" ;

"bb_data_planets::image_thumb"

)

It’s important to note that when sorting the rows, you are setting the relative sort for the records belonging to the dataset. When you change the sort order for a particular row for one subset of the data, it may have a different sort order for different subset of the data.

You can set multiple properties by separating them with a semicolon. For example:

Relationship

The row records included in the portal will be constrained by the relationship to the table occurrence of your parameter fields. Multi-line keys can be used, but only on the left-hand side of the relationship. In other words, you can use multi-line keys only if they’re on the table that your current context is based on.

Style Customisations

You can customise the CSS of the portal by using Reactor Core to edit the following CSS document:

You will need to recompile the BlackBox to apply any changes you make.

<— Reactor Home