Drag & Drop in APEX Made Easy

Drag and drop is an intuitive way of copying, moving and rearranging things. It can simplify how users perform tasks within an application and can also simplify the development of the UI. In the soon to be released next version of FOEX we are introducing a very flexible dynamic action plugin that will allow you to drag & drop across regions or re-order rows/items in existing regions.

There is no limit the number of regions you can drag/drop between and you can drag & drop across regions defined on different pages loaded in single page mode using the content loader or window plugins. Simply combine it with the editing capability of our plugins to persist the drag & drop actions. The following is a demo of two-way dragging and dropping tasks across 3 editable list view region plugins that mimics a Kanban task display.

 

Features

You will be able to copy or move records between grids, trees, tree grids, list views. To perform both actions you can use the Ctrl key whilst dragging to perform a copy operation if move is already enabled. You can automatically map the columns from one region to another if the column aliases are the same, or you can manually provide a mapping. You can also control what happens with selections post dropping. You can also perform multi-selection drag & drop actions if you enable the multi-selection setting on your grid, tree, or list view region(s).

There is also some more subtle / fine grained features like being able to drag & drop records into an entire form, individual form items, groups of form items, and buttons. With buttons you could use the badge functionality to show the number of items dropped and on button click open a dialog to show the contents.

We also included support to drop into static & plsql & code editor region plugins. Dropping into static/plsql regions can allow you to design a very custom visual representation of what has been dropped e.g. like a checkout basket since you can refresh the region using a refresh dynamic action on item drop.

In the initial release these are the available settings to choose from:

 

 

 

Demo’s

Here are a number of Drag & Drop demo’s to give you an idea of what you can do:

Drag & Drop between 2 Grids

This is a basic example show you that you can copy values from one grid record to another and rely on the inbuilt grid saving

Drag & Drop between a Grid and 2 list views

In this example we show you that using the “move” option you can control a single set of records which can only exist in one of the regions. In the demo we use an APEX collection to store the selections in List A/List B:

Drag & Drop from a Grid to a Tree to Organize a hierarchy

In this example we show you how you can easily create a new hierarchy relationship using existing data from a grid.

Drag & Drop Confirmation

In this example we show you that you can use a confirmation dialog to let the end user decide whether they should perform the drop or not e.g. based on some conditional logic

Drag & Drop between a Grid & Form

You can even drag a grid row and drop it in a form, whether that’s to load a form record or pre-fill a bunch of values that saves the end user from having to type them in…

Drag & Drop into a Multi-Select List

This example highlights the versatility that you can drag multiple selections of a grid to a multi-select page item filter of another grid

Drag & Drop from a Tree to a Code Editor

This example shows you that we can integrate Drag & Drop with many different region types. In this example you can drag & drop table names & views and choose the operation on drop to either generate an INSERT or SELECT SQL statement

Drag & Drop across different Pages

This example shows you that we we support the ability to drag & drop across regions defined on different pages when you use our single page application design. Simply create a content loader region or dynamic action and choose the setting to “Load into the current page”

In Summary

This was just a small selection of demo’s, we plan to include more examples in the near future showing even more versatility. We think that this new plugin used in combination with our existing ones will open up many new possibilities for you to design your applications for your end users using a more interactive approach. It literally can take less than a minute to setup, thanks to the low code approach of APEX. If you want to check out a live interactive demo then we suggest you signup for a trial workspace and check out our demo application that we will auto install in your trial workspace.