714
Views
23
Comments
[Drag-n-drop Sortable List] Newbie question - how to use this component?
Question
drag-n-drop-sortable-list
Web icon
Forge asset by Renato Pauleta
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...
2019-11-12 17-31-26
Justin James
 
MVP
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.

J.Ja
UserImage.jpg
Thomas Lund
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?
2019-11-12 17-31-26
Justin James
 
MVP
Sounds like it isn't actually hooking onto your items properly. Check the JavaScript console for errors.

J.Ja
UserImage.jpg
Thomas Lund
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
2019-11-12 17-31-26
Justin James
 
MVP
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. :(

J.Ja
UserImage.jpg
Thomas Lund
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.

DEBUGSortable.oml
UserImage.jpg
ClausS
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?

UserImage.jpg
ClausS
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
 

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?

2019-11-12 17-31-26
Justin James
 
MVP
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.

J.Ja
UserImage.jpg
ClausS
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?
2019-11-12 17-31-26
Justin James
 
MVP
That explains it! I've published the "development" version as the "current" version so no one else gets into these issues again.

J.Ja
UserImage.jpg
Jason Edwards
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
2019-11-12 17-31-26
Justin James
 
MVP
Jason -

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

J.Ja
UserImage.jpg
Jason Edwards
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
UserImage.jpg
Wilson Cheung

This drag and drop sort is exactly what I am looking for.  Is there any way to use it in Mobile App instead of Web? How? 

2019-11-12 17-31-26
Justin James
 
MVP

Wilson Cheung wrote:

This drag and drop sort is exactly what I am looking for.  Is there any way to use it in Mobile App instead of Web? How? 

I should work automatically for mobile ut I haven't tried it on version 10.

J.Ja


UserImage.jpg
Wilson Cheung

Justin James wrote:

Wilson Cheung wrote:

This drag and drop sort is exactly what I am looking for.  Is there any way to use it in Mobile App instead of Web? How? 

I should work automatically for mobile ut I haven't tried it on version 10.

J.Ja


Thanks for your prompt reply.  I tried to share (marked as public) the two extensions but I cannot add them to my mobile app as reference(see my screenshot). Can you help to convert it into mobile version? Thanks for your help 

Wilson


manage_dependencies.png
UserImage.jpg
Wilson Cheung

here is the screenshot

manage_dependencies.png
2019-11-12 17-31-26
Justin James
 
MVP

Can't see the screenshot, sorry! It's not showing, just says "Processing Upload". :(

J.Ja

UserImage.jpg
Wilson Cheung

I have attached the screenshot in a word doc. Hope it works


Finally i can upload the screenshot. :)

2019-11-12 17-31-26
Justin James
 
MVP

Ah, much better... weird! I wonder why it won't let you make the reference?

J.Ja

UserImage.jpg
Wilson Cheung

Justin James wrote:

Ah, much better... weird! I wonder why it won't let you make the reference?

J.Ja

I tried to clone the web version of sortable to a mobile one. I got no error and the style & listing are fine.  But the drag and drop function is not working. You have any idea? I have enclosed the OML file and hope you can open it.






TestingSortableinmobile.oml

UserImage.jpg
Zachary

Has there been any progress in converting this for mobile use? This would be perfect for an app we're working.

Community GuidelinesBe kind and respectful, give credit to the original source of content, and search for duplicates before posting.