Sorting line items (records) via drag-and-drop

(oh wow, honoured to start the first custom extension topic)

I am developing an extension to manage orders based on an ‘Orders’ table and a (linked) ‘Order Line Items’ table. My next objective is to allow line items to be re-ordered by the user via drag-and-drop.

I assume I can achieve this by adding a integer field to the table which gets updated by the drag event (?), but since this actually also is a native Airtable UI functionality and you can order records via drag-and-drop when your table/view isn’t sorted – I’m wondering whether someone knows anything of a custom order index being accessible or anything?

I’m guessing not, since I can’t find anything like that in the API docs…
But maybe you have other ideas to achieve this other than the one I mentioned? Or experience with a similar feat and you’ve got a js library you’d like to suggest or something?

Thanks in advance!
(And btw, I’m so glad I found this Discourse forum just now, because the new Airtable community thing truly isn’t it. Thanks guys!)

Welcome to the community, @Tom_Keysers! Glad to have you here! :smiley:

I actually don’t have personal experience with developing custom extensions, so unfortunately I don’t have an answer to your question — but I just wanted to welcome you here!

We do have several custom extension developers in our forums here — hopefully one of them will be able to chime in to help you out! :slight_smile:

Welcome!

I’ve written scripts that sort a linked record field based on how a user drag-and-drops to arrange the child records in the linked table. The main reason why I didn’t turned it into a marketplace extension is because I didn’t have a solution that I liked in case some of the child records were filtered out of the current view. I have a few ideas, such as sorting those last or warning the user and not performing the sort, but it takes time to work out those kinks and time is always in limited supply.

I have also written a script and marketplace extension for sorting linked records based on a field in the child record, such as a date field or a numeric field.

1 Like

Does that mean there is a way to programmatically get the “custom order” index of records? Because that’s essentially what I’m looking for.

So, just to be extra clear (because maybe I wasn’t): I am talking about letting users sort line items (which are records) via drag-and-drop purely through the custom extension I’m developing. Per this screenshot:
Screenshot 2023-03-10 at 11.13.18
So this is mainly a UI and react related matter, but since there is the “native” functionality of custom sorting records in Airtable, I was hoping to be able to use that data instead of implementing an extra integer field to store and reflect the sequence/index that users made in the custom extension via drag-and-drop. But I’m afraid Airtable has never opened the “custom order” index of records in any API…

The order of the records in the view is inherent in the view. When you select the records in a view without specifying a different sort, you get them in view order.

If you want drag-n-drop in your extension, there are react libraries for drag-and-drop. I don’t recall exact names but I remember that there were several to pick from.

Yess exactly, this “view order” is actually what I was digging for. Would be cool if it was open to the API, but apparently isn’t.

Meanwhile I’ve got it working using the method mentioned – using an extra field to store the record index and html5’s native drag-and-drop support.

Thanks for thinking along @Kuovonne!

What do you mean that it isn’t open to the API? You get the view order when you select the records in the view: view.selectRecordsAsync().

Yeah but you can’t edit (and store) it, right?

EDIT: I’m talking about the order (or index, if you will) of a record in a certain view as an editable property of the record model.

Correct. You cannot edit the sort order of a view directly. You can only edit field values, which in turn can be used by the sort defined for the view. And you cannot programmatically define the sort for a view.

You could store the sort order of a set of records, but I’m not sure what benefit doing so would have. The actual sort order could change at any moment.

Indeed, without being able to also manipulate that sort order it would be useless.

But so meanwhile solved using a new field which holds an index integer which is being manipulated and used to sort on.

Kuovonne is right, all you have to do to reorder the line items is save the linked record id values in the new order created after the drop event, overwriting the old order. Ie the linked record ids are the index.
link to page in api reference

1 Like