Content Type: Widget

Categories: User Interface,Mobile

Allow your users to re-order items in a list by dragging them.

<div id="readme" class="md" data-path="README.md"><article class="markdown-body entry-content container-lg" itemprop="text"><div class="markdown-heading" dir="auto"><h2 class="heading-element" dir="auto">NativeDraggableList</h2><a id="user-content-nativedraggablelist" class="anchor" aria-label="Permalink: NativeDraggableList" href="#nativedraggablelist"><svg data-component="Octicon" class="octicon octicon-link" viewBox="0 0 16 16" version="1.1" width="16" height="16" aria-hidden="true"><path d="m7.775 3.275 1.25-1.25a3.5 3.5 0 1 1 4.95 4.95l-2.5 2.5a3.5 3.5 0 0 1-4.95 0 .751.751 0 0 1 .018-1.042.751.751 0 0 1 1.042-.018 1.998 1.998 0 0 0 2.83 0l2.5-2.5a2.002 2.002 0 0 0-2.83-2.83l-1.25 1.25a.751.751 0 0 1-1.042-.018.751.751 0 0 1-.018-1.042Zm-4.69 9.64a1.998 1.998 0 0 0 2.83 0l1.25-1.25a.751.751 0 0 1 1.042.018.751.751 0 0 1 .018 1.042l-1.25 1.25a3.5 3.5 0 1 1-4.95-4.95l2.5-2.5a3.5 3.5 0 0 1 4.95 0 .751.751 0 0 1-.018 1.042.751.751 0 0 1-1.042.018 1.998 1.998 0 0 0-2.83 0l-2.5 2.5a1.998 1.998 0 0 0 0 2.83Z"></path></svg></a></div> <p dir="auto">Native draggable list, allow users to reorder items in a list</p> <div class="markdown-heading" dir="auto"><h2 class="heading-element" dir="auto">Features</h2><a id="user-content-features" class="anchor" aria-label="Permalink: Features" href="#features"><svg data-component="Octicon" class="octicon octicon-link" viewBox="0 0 16 16" version="1.1" width="16" height="16" aria-hidden="true"><path d="m7.775 3.275 1.25-1.25a3.5 3.5 0 1 1 4.95 4.95l-2.5 2.5a3.5 3.5 0 0 1-4.95 0 .751.751 0 0 1 .018-1.042.751.751 0 0 1 1.042-.018 1.998 1.998 0 0 0 2.83 0l2.5-2.5a2.002 2.002 0 0 0-2.83-2.83l-1.25 1.25a.751.751 0 0 1-1.042-.018.751.751 0 0 1-.018-1.042Zm-4.69 9.64a1.998 1.998 0 0 0 2.83 0l1.25-1.25a.751.751 0 0 1 1.042.018.751.751 0 0 1 .018 1.042l-1.25 1.25a3.5 3.5 0 1 1-4.95-4.95l2.5-2.5a3.5 3.5 0 0 1 4.95 0 .751.751 0 0 1-.018 1.042.751.751 0 0 1-1.042.018 1.998 1.998 0 0 0-2.83 0l-2.5 2.5a1.998 1.998 0 0 0 0 2.83Z"></path></svg></a></div> <ul dir="auto"> <li>Smooth drag/drop action</li> <li>Visual shadow effect when item is dragged</li> <li>Use your own content for the drag handle and contents</li> <li>Easy to style</li> </ul> <div class="markdown-heading" dir="auto"><h2 class="heading-element" dir="auto">Limitations</h2><a id="user-content-limitations" class="anchor" aria-label="Permalink: Limitations" href="#limitations"><svg data-component="Octicon" class="octicon octicon-link" viewBox="0 0 16 16" version="1.1" width="16" height="16" aria-hidden="true"><path d="m7.775 3.275 1.25-1.25a3.5 3.5 0 1 1 4.95 4.95l-2.5 2.5a3.5 3.5 0 0 1-4.95 0 .751.751 0 0 1 .018-1.042.751.751 0 0 1 1.042-.018 1.998 1.998 0 0 0 2.83 0l2.5-2.5a2.002 2.002 0 0 0-2.83-2.83l-1.25 1.25a.751.751 0 0 1-1.042-.018.751.751 0 0 1-.018-1.042Zm-4.69 9.64a1.998 1.998 0 0 0 2.83 0l1.25-1.25a.751.751 0 0 1 1.042.018.751.751 0 0 1 .018 1.042l-1.25 1.25a3.5 3.5 0 1 1-4.95-4.95l2.5-2.5a3.5 3.5 0 0 1 4.95 0 .751.751 0 0 1-.018 1.042.751.751 0 0 1-1.042.018 1.998 1.998 0 0 0-2.83 0l-2.5 2.5a1.998 1.998 0 0 0 0 2.83Z"></path></svg></a></div> <ul dir="auto"> <li>Currently pluggable widgets cannot change data in a datasource so the widget sets a JSON string on the context upon drop</li> <li>Unfortunately this widget does not work in Mendix 10.18 thru 10.21 due to React Native library conflicts in the native app template</li> </ul> <div class="markdown-heading" dir="auto"><h2 class="heading-element" dir="auto">Context entity</h2><a id="user-content-context-entity" class="anchor" aria-label="Permalink: Context entity" href="#context-entity"><svg data-component="Octicon" class="octicon octicon-link" viewBox="0 0 16 16" version="1.1" width="16" height="16" aria-hidden="true"><path d="m7.775 3.275 1.25-1.25a3.5 3.5 0 1 1 4.95 4.95l-2.5 2.5a3.5 3.5 0 0 1-4.95 0 .751.751 0 0 1 .018-1.042.751.751 0 0 1 1.042-.018 1.998 1.998 0 0 0 2.83 0l2.5-2.5a2.002 2.002 0 0 0-2.83-2.83l-1.25 1.25a.751.751 0 0 1-1.042-.018.751.751 0 0 1-.018-1.042Zm-4.69 9.64a1.998 1.998 0 0 0 2.83 0l1.25-1.25a.751.751 0 0 1 1.042.018.751.751 0 0 1 .018 1.042l-1.25 1.25a3.5 3.5 0 1 1-4.95-4.95l2.5-2.5a3.5 3.5 0 0 1 4.95 0 .751.751 0 0 1-.018 1.042.751.751 0 0 1-1.042.018 1.998 1.998 0 0 0-2.83 0l-2.5 2.5a1.998 1.998 0 0 0 0 2.83Z"></path></svg></a></div> <p dir="auto">The widget needs a context to place the drop data in. Make sure it has an unlimited string to contain the drop data JSON</p> <div class="markdown-heading" dir="auto"><h2 class="heading-element" dir="auto">Usage</h2><a id="user-content-usage" class="anchor" aria-label="Permalink: Usage" href="#usage"><svg data-component="Octicon" class="octicon octicon-link" viewBox="0 0 16 16" version="1.1" width="16" height="16" aria-hidden="true"><path d="m7.775 3.275 1.25-1.25a3.5 3.5 0 1 1 4.95 4.95l-2.5 2.5a3.5 3.5 0 0 1-4.95 0 .751.751 0 0 1 .018-1.042.751.751 0 0 1 1.042-.018 1.998 1.998 0 0 0 2.83 0l2.5-2.5a2.002 2.002 0 0 0-2.83-2.83l-1.25 1.25a.751.751 0 0 1-1.042-.018.751.751 0 0 1-.018-1.042Zm-4.69 9.64a1.998 1.998 0 0 0 2.83 0l1.25-1.25a.751.751 0 0 1 1.042.018.751.751 0 0 1 .018 1.042l-1.25 1.25a3.5 3.5 0 1 1-4.95-4.95l2.5-2.5a3.5 3.5 0 0 1 4.95 0 .751.751 0 0 1-.018 1.042.751.751 0 0 1-1.042.018 1.998 1.998 0 0 0-2.83 0l-2.5 2.5a1.998 1.998 0 0 0 0 2.83Z"></path></svg></a></div> <ul dir="auto"> <li>Place the widget on your native page in a dataview.</li> <li>Choose whether to start the drag when pressing on the item or after a longpress.</li> <li>Your context entity must have an unlimited string to hold the drop data</li> <li>Configure the datasource</li> <li>Place content in the drag handle (for example an image that indicates dragging is possible) and content place holders</li> <li>Input elements and buttons are best placed in the content place holder, not in the drag handle.</li> <li>Configure the drop data and on drop action, which needs to be a nanoflow as you need to process the drop data</li> <li>Additionally, you can configure the Dragged item ID attribute to receive the ID of the item that was dragged</li> </ul> <div class="markdown-heading" dir="auto"><h2 class="heading-element" dir="auto">Handle the drop</h2><a id="user-content-handle-the-drop" class="anchor" aria-label="Permalink: Handle the drop" href="#handle-the-drop"><svg data-component="Octicon" class="octicon octicon-link" viewBox="0 0 16 16" version="1.1" width="16" height="16" aria-hidden="true"><path d="m7.775 3.275 1.25-1.25a3.5 3.5 0 1 1 4.95 4.95l-2.5 2.5a3.5 3.5 0 0 1-4.95 0 .751.751 0 0 1 .018-1.042.751.751 0 0 1 1.042-.018 1.998 1.998 0 0 0 2.83 0l2.5-2.5a2.002 2.002 0 0 0-2.83-2.83l-1.25 1.25a.751.751 0 0 1-1.042-.018.751.751 0 0 1-.018-1.042Zm-4.69 9.64a1.998 1.998 0 0 0 2.83 0l1.25-1.25a.751.751 0 0 1 1.042.018.751.751 0 0 1 .018 1.042l-1.25 1.25a3.5 3.5 0 1 1-4.95-4.95l2.5-2.5a3.5 3.5 0 0 1 4.95 0 .751.751 0 0 1-.018 1.042.751.751 0 0 1-1.042.018 1.998 1.998 0 0 0-2.83 0l-2.5 2.5a1.998 1.998 0 0 0 0 2.83Z"></path></svg></a></div> <p dir="auto">Appstore module <a href="https://appstore.home.mendix.com/link/app/110104/ITvisors/Nanoflow-Commons-ITvisors" rel="nofollow">NanoflowCommonsITvisors</a> has entity <code>DropDataItem</code> and JavaScript action <code>ParseNativeDraggableListDropData</code> that will parse the JSON drop data from the widget into a list of <code>DropDataItem</code> objects. You may use your own entity if you prefer, just make sure it is non-persistent and contains (at least) the attributes <code>DropDataItem</code> has.</p> <p dir="auto">The on drop action must be a nanoflow. In your nanoflow, call JavaScript action <code>NanoflowCommonsITvisors.ParseNativeDraggableListDropData</code> to get a list of non-persistent objects for each of the items in the list. For each item in the list, get the corresponding object and update its sequence number with the value of the drop data item.</p> <p dir="auto">At the end of your nanoflow, be sure to clear the drop data string of your context object to clean it up.</p> <p dir="auto">Be sure to commit your objects using a list, not inside the loop to prevent a lot of unnecessary renders of your page.</p> <div class="markdown-heading" dir="auto"><h2 class="heading-element" dir="auto">Styling</h2><a id="user-content-styling" class="anchor" aria-label="Permalink: Styling" href="#styling"><svg data-component="Octicon" class="octicon octicon-link" viewBox="0 0 16 16" version="1.1" width="16" height="16" aria-hidden="true"><path d="m7.775 3.275 1.25-1.25a3.5 3.5 0 1 1 4.95 4.95l-2.5 2.5a3.5 3.5 0 0 1-4.95 0 .751.751 0 0 1 .018-1.042.751.751 0 0 1 1.042-.018 1.998 1.998 0 0 0 2.83 0l2.5-2.5a2.002 2.002 0 0 0-2.83-2.83l-1.25 1.25a.751.751 0 0 1-1.042-.018.751.751 0 0 1-.018-1.042Zm-4.69 9.64a1.998 1.998 0 0 0 2.83 0l1.25-1.25a.751.751 0 0 1 1.042.018.751.751 0 0 1 .018 1.042l-1.25 1.25a3.5 3.5 0 1 1-4.95-4.95l2.5-2.5a3.5 3.5 0 0 1 4.95 0 .751.751 0 0 1-.018 1.042.751.751 0 0 1-1.042.018 1.998 1.998 0 0 0-2.83 0l-2.5 2.5a1.998 1.998 0 0 0 0 2.83Z"></path></svg></a></div> <p dir="auto">The widget can be styled by creating a class that overrules the defaults. Entries in the style object:</p> <ul dir="auto"> <li><strong>container</strong> - The widget container. Must have <code>flex=1</code></li> <li><strong>itemViewContainer</strong>: - Outermost container of one item, has some padding to reserve space for the shadow effect. Must have <code>flex=1</code></li> <li><strong>itemView</strong>: - Will contain the drag handle and the content. By default uses <code>flexDirection=row</code></li> <li><strong>draggingItemView</strong> - Will replace itemView when the item is being dragged. By default uses a shadow effect to indicate the drag</li> <li><strong>itemContentView</strong> - Will contain the item content, placed next to the drag handle. Has <code>flex=1</code> by default.</li> <li><strong>errorText</strong> - Used to display an error</li> </ul> </article></div>