[Drag-n-Drop Sortable List] Newbie question - how to use this component?

[Drag-n-Drop Sortable List] Newbie question - how to use this component?

Forge Component
Published on 2016-04-21 by Vasco Santos
19 votes
Published on 2016-04-21 by Vasco Santos
How do I use this component?  Can it be dragged into an existing record table as a widget or similar?
Or do I have to replace my existing record tables with this one completely?
What are the practical steps of getting it into my project? Do I copy the elements over one by one...
Claus -

There is an example eSpace. The quick summary is that you create a ListRecords or TableRecords, give it a name, then add this to your page and point it to the ListRecords or TableRecords widget by ID, as well as some other parameters. If I recall, will fire an OnNotify and pass back a list of IDs in order when the drag/drop occurs, so you will want to catch that and use the IDs to query the records and set new order values for them.

But you will definitely want to start by looking at the examples in the eSpace to get an idea of how exactly to use it, how making changes impacts things, etc.

Hi James.

I'm having a hard time actually making my table records dragable?
The "drag"-icon is showing when I hover my mouse over my table-records, but when I try to drag them,
I just select the text on the page, instead of actually dragging the row.
I don't know what I'm missing?
Sounds like it isn't actually hooking onto your items properly. Check the JavaScript console for errors.

So, what's happening now is: I can drag-and-drop the items, but all the items are being dragged at the same time,
and also I can drag the header of the table... What am I doing here?! :D
You must have it hooking onto the entire list, not the items in the list.

Please look at the example eSpace in the package. This is a pretty complex module, unfortunately. It may be best to copy/paste the working sample into you application and customizing the contents to meet your needs instead of trying to get it hooked onto an existing list/table. That's what I needed to do when I first started working with it, until I spent enough time under the hood to learn it deeply. :(

I have been trying really hard, but I can only get it to work in the actual Sortable eSpace.

I've uploaded a small slice of my project, would you look at it?
I would be very happy, because I really want this to work, but I'm just unable to see what's wrong.

I have the same problem. I've been struggling for a full day to get it to work. I've copied the pages from the Sortable project into my own project and made sure that they are exactly the same on all aspects.

I get the special focusing cursor now, but I am unable to "grab" the row that I want to move.
That is the "touch" part of the "touch-punch" javascript doesn't seem to be activated.

What could be causing this?

I've narrowed the problem down a bit now. I've copied the entire Sortable project into my own project and then it doesn't work anymore.
I am now able to track javascript errors in Firefox and get this error in the project:

GET https://xxxx.outsystemscloud.com/myproject/js/jquery.ui.touch-punch.js?_=1411034914377
osjs("#wt1_wtMainContent_wtTestSortLR tbody").sortable is not a function
(?)()TestSo...ction)= (linje 112)
init()_osjs.js?8_0_1_8 (linje 32)
h(a=undefined)_osjs.js?8_0_1_8 (linje 18)
h()_osjs.js?8_0_1_8 (linje 18)

I understand that this could have to do with the jquery version. I am using the newest version of Service Studio and version 1.8.3 of jquery.

Any ideas?

It's either not loading jQuery UI properly, or it is not connecting it to the table/list properly. Check the JavaScript console and Networking tab for errors.

In fact I found out after a long time digging around that it was due to using the stable version of the sortable component, and not the newest development version :-(
Perhaps you should highlight for new users that they need to use the development version if using service studio 8.0?
That explains it! I've published the "development" version as the "current" version so no one else gets into these issues again.

Hi Justin, I'm getting a different issue than other users are reporting  - I can use the Test Sorts application as intended but when including the appropriate elements as references firefox web developer reports (on page load):

Timestamp: 22/01/2015 16:42:43
Error: TypeError: osjs(...).sortable is not a function

We're running jquery 1.8.3

Jason -

That usually means that you aren't loading jQueryUI on your pages as needed. The sample page should have that being loaded.

Many thanks for the quick response Justin, much appreciated - root cause was conflict in jQuery version between my module and Sortable - set them both to 1.4.2 OS and it's working

Excellent app, really nice user experience

Cheers, Jason