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:
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: http://daizylogikdemo-developer-edition.na34.force.com/
posted by Vladimir Martinov and Nineta Martinov
DaizyLogik 