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:
erdteam

project

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:

gridster2

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

project2

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

 

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s