Interact with Salesforce Data through a Drag and Drop Interface

Salesforce Data can be exposed to the end users via Visualforce pages. The responsiveness and interactivity of the UI can be enhanced with a javascript framework such as jQuery.

The data I am representing here consists of Projects and Teams. Projects have a Start Date and End Date, and can be assigned to a Team. The structure and data look like this:


Using a Visualforce page enhanced with jQuery and leveraging the gridster.js grid, we can create a more intuitive UI, as shown below:gridster

The custom page controller maps the Salesforce data into a data structure that can be displayed by gridster.js which exposes a draggable interface that allows me to drag and drop Projects to different days or teams. For example, I can drag “Project A” and re-assign it to Mary’s Team by dropping it into the new location on the grid. I can also change its date to Feb 12th. See the results below:


Notice that “Project A”‘s team and start date field values have changed and saved after it was dropped in the target cell:


Try The Demo!

I have exposed a live demo of this UI on a Developer Instance. Feel free to try it for yourself:

posted by Vladimir Martinov and Nineta Martinov


%d bloggers like this: