Sort records using jQuery UI Sortable

Introduction

Sortable is a feature of jQuery UI, a jQuery-based JavaScript library for developing interactive websites. Sortable allows the user to reorder items in a list or grid by dragging and dropping.

 

This article will explain how to use Sortable to enable records in the record list to be able to be sorted and reordered by dragging and dropping, and then save the new sort order.

The Customization Result

Records in the Kintone App will be displayed in formatted rows as shown below. Clicking on a row and dragging it will change the sort order and dropping it will save the new order in place.


Note that Alabama is above Alaska in the screen shot below.

US_02.png

Dragging Alaska above Alabama will drop Alaska into the first row as shown in the gif below.


US.gif

The result is then saved with Alaska above Alabama as shown in the screen shot below.

US_03.png

About jQuery UI's Sortable

The Sortable feature of jQuery allows users to rearrange items with a drag-and-drop interface. This is perfect to use on Kintone's record list screen, to rearrange the display order of records.

 

For a general idea of what Sortable looks like in use, visit the jQuery website below.

Sortable can be used by simply specifying the class of an item (such as a li or tr element), or the parent (such as ul or tbody) to rearrange. An example is shown below.

$(".row").sortable();

Implementation

Set Up the App

Create a new Kintone App with the following field settings.

Field Type

Field Name

Field Code

Remarks

Record number

Record number

recordId

 

Number

Sort order

orderNum

Initial value: 0

Text

State

state

 

 

From the View settings, create a new View and select Custom View. Make sure that the Enable Pagination option is checked. Finally, type the following code into the HTML Code box.

The completed Custom View settings page should look as follows.

 

custom_view_settings.png

 

Save the View settings and apply the changes to the App. The record list should be displayed as follows.

list_view.png

Implement the JavaScript Files

This customization uses the jQuery and jQuery UI libraries in addition to the sample code. Save the following sample code as an optional name with the .js extension. This tutorial has named the file sample.js

 

 

The following versions of jQuery and jQuery UI have been tested with this sample. From the JavaScript and CSS Customization settings, add all three files in the listed order. Refer to the Customizing an App with JavaScript and CSS article from the Kintone Help Center for more information on uploading JavaScript and CSS files to an App.

The uploaded files should look as follows within the App. Make sure that the two jQuery links are positioned above the customization file.

 

js_settings.png

Code Explanation

SortableRecordsManager

The first section of the code creates a constructor function called SortableRecordsManager that is used to display the Sortable enhanced custom view. This constructor function is then given three methods: update, createTableRecords, and destroyTableRecords.

 

The update method takes an array of sorted element IDs as its argument and compares the sorted element IDs array with the previous array of IDs and order numbers to get an array of objects with each row's record number and ordering pair. The image below explains this process.

 

sortable_article.png

 

The createTableRecords method references the HTML table in the custom view called sortable_tbody and creates a row in the table for each record.

 

Finally, the destroyTableRecords method replaces the HTML table contents with an empty string to delete all of the rows in the table.

KintoneRecordManager

The second section of the code creates another constructor function called KintoneRecordManager. This constructor function is used to organize the functions that utilize Kintone APIs to retrieve and update data. This constructor function also has three methods: updateOrderNums, getSortedRecords, and getRecords.

 

The updateOrderNums method takes the array of objects created by  the update method of the SortableRecordsManager constructor function as its argument. It then uses the Update Records REST API to update the values of the Sort order field with the sort order values from the array.

 

The getSortedRecords method takes a callback function as its argument. It uses the Get Record List Query JavaScript API to retrieve the filter settings for the current view and then adds the specification to order the records by ascending orderNum, and sets the value into this.query. It then passes the callback function to the getRecords method explained next.

 

Finally, the getRecords method also takes the callback function that was passed as the getSortedRecords argument, as its own argument. It uses the query that was created in the getSortedRecords method to call the Get Records REST API. If the number of retrieved records is less than the set limit of 100, the callback function is executed. If the number of retrieved records is exactly 100, the getRecords method is called again and continues to be called until the number of retrieved records is less than 100.

Record List Onload Event

The last section of the code uses the previously created SortableRecordsManager and KintoneRecordManager constructor functions when the record list is loaded.

 

The Record List Onload Event is declared so that the code within the event declaration is automatically executed when the record list is loaded. First, a new instance of KintoneRecordManager is created and passed to the variable called kintoneRecordManager. A variable called sortableRecordsManager is also prepared, but passed null as its value.

 

Next, the getSortedRecords method is executed with the callback function creating a new instance of SortableRecordsManager and passes the value to the prepared sortableRecordsManager variable. The destroyTableRecords method is used to reset the table, and then the createTableRecords method is used to rebuild the table with the necessary number of rows.

 

Finally, jQuery UI's sortable method is called on the element with the ID of sortable_tbody. With the sortable method, a function is given to the update property, which is an event that is triggered when the rearrangement of the sortable element has ended. In this case, sortable's toArray method is used to get an array of the sorted ID elements. The array is then passed to the update method of the sortableRecordsManager instance to create the updated result. To update the Sort order field values in the actual Kintone records, the updateOrderNums method of the kintoneRecordManager instance is called at the very end and the new sort order will be maintained even when the page is refreshed.

Finally

This article explained how to re-order Kintone records by drag and drop using jQuery UI's Sortable. There are many other features of jQuery UI that can be used to customize the user interface for specific business needs. Try visiting the jQuery UI website and testing out the other features.

Was this article helpful?
0 out of 0 found this helpful
Do you have any questions or issues related to this article?
Please share your views with us in the Community forums!