Draggable / Sortable Elements Outside of a Form

[Antony]

A request to develop Draggable / Sortable Elements outside of a Form as noted by @sid below.

(The FR below has been closed, but I agree with @sid so I'm opening a new one for a non-form based implementation.)

Draggable / Sortable Elements

The sortable element UX is limited to be used inside forms, and that too has very limited functionality, discussed below Ben's comment that you have shared. I personally think this is nowhere near to the solution that is expected in terms of drag drop functionality. I understand the complexity of implementing a real solution the would work the Wappler-way, as explained by Teodor. But I would still request to keep the FR open for future implementation.

[George]

@sid Could you explain more in detail how do you see a good drag and drop solution implemented?

Also note that the form is merely being used as a way to submit the new order to the server, so causes no UI limitations.

[TomD]

I expect most of the feature requests (there were more than 100) had in mind the sort of functionality demonstrated here - the JS library originally mentioned by @George and now incorporated, in a relatively minor way, in Wappler. I don't think the FR should have been closed, and, essentially it's still outstanding.

Very few AppConnect components have been added to Wappler in the last few years, and none for quite a while. It would be great to have a new, full-featured component again - on the level of Swiper for example.

[Antony]

@TomD

I expect most of the feature requests (there were more than 100) had in mind the sort of functionality demonstrated here -

That is exactly what I mean...

I want to be able to create a 2D table of days across the top and times down the side which I can drag and drop appointments between similar to something like Google Calendar...

[sid]

This sort of summarizes the problem/expectation.

Another real-life example I can share is from one of the apps that we have built in Wappler over many years.
One of the recent requirements was to configure a Kanban UI for an Enquiries module in the app, which was earlier just using a regular table.

The above has been done using custom JS completely. It uses Data Store as the source for rendering this repeater, which is updated dynamically via Sockets as well.

We faced two major issues here (from what I can recollect):

1. Moving a card between elements, would not correctly update the indexing/sorting of elements in data store, hence Wappler repeater would not play well either. Similar issue when receiving the change via sockets.
2. When moving a card, I do not want to submit a form and send 100s of data points when only one enquiry's information needs to be sent - enquiry id & new column id.

With custom JS I was able to manage the DOM, data store and Wappler repeat to make the UI/UX as any other kanban UI would work.

I did not find any pre-built kanban JS library, which would help me do this with Wappler's repeat. Hence we decided to go with DS, repeat, SortableJS and a lot of custom JS code.

I understand that this is an advanced use case, but the expectation of this FR is (from my point of view) for the team to build a Wappler-visual-way of handling this complexity - similar to how form repeat and sub-table like concepts have been implemented. Complex but easier to configure in Wappler.

[Antony]

Thanks for that detail @sid!

When you say "Data Source" do you mean "Data Store"?

@sid

I understand that this is an advanced use case,

I personally don't think it is that advanced... products like Trello and the calendars out there have set an expectation that any two dimensional data should be managed in this drag and drop way!

[sid]

@Antony

When you say "Data Source" do you mean "Data Store"?

Yes. Updated the text.