UserImage.jpg
Matthias Sandmann
30Views
1Comments
Solved
[Drag And Drop in Reactive] If the "drop source" uses a data source, a refresh of the data source breaks app
Question
Reactive
Forge
drag-and-drop-in-reactive-oml
Reactive icon
Drag And Drop in Reactive
Forge component by DiogoRomero
Application Type
Reactive

Hey all,

first of all, many thanks for the very cool component. It took me some time to get started, but once I understood the logic and how to link DOM and business logic it is really useful.

Unfortunately I'm running into trouble when my "drop source" uses a dynamic data source (e.g. a Aggregate). If I did not drag anything from this source I can refresh the data source without issues, but once I dragged some element from the list I can no longer refresh the underlying data source. This breaks the application completely.

My use case: I do have a very long list of source elements and I want to offer the user the ability to filter this source list to find the right element. So I implemented the "standard approach" to have a Filter Input and use this within an Aggregate to reduce the result set. 

But this crashes the whole application.

How to reproduce:

1. I extended the SideBar block to provide the image URLs via a Data Action instead of a fixed list.

2. I added a button to the SideBar block, this button triggers a refresh on the data source.


Resulting in the following outcome:

Button works as expected when nothing was dragged so far:


Application is completely broken if I drag an image and click the refresh button:




The error comes out of the Outsystems code and seems related to issues in the DOM:



Any idea how to resolve this?

Help is well appreciated.


BR

Matthias

1
0
21 Sep
Solution

After diving through the SortableJS forums I can answer my own question now :-)

Just to summarize my situation, as the solution may not be applicable to every use-case. It behaves basically like a online shop:

  • I do have a static source list. 
    Imagine a online shop and you can pick items from the list but of course the item remains in the list so I may pick it once more

  • The target list(s) is/are dynamic. So when I drop an item there it gets added to the list.
    Like a shopping basket in an online shop.

The implementation I already had so far:

  •  The drop source is drag = clone, drop = false   
  • The drop target is drag = false, drop = true
  • In the drop target I implemented the OnAdd function and references a outsystems client function to update the underling list / data model

But this broke whenever I refreshed the page. 


To overcome this issue I copied the relevant DOM before the Drag and restored the original DOM on the Drop. Then the outsystems refresh works again as the DOM is unchanged.

For sure this only works if you reflect the "Drag and Drop" action into your object model and the page refresh will then represent the new object model.

I do use the following code to store and rebuild the object model:

Logic is in "OnRender" as the SortableJS needs to be recreated after page refresh



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