Javascript and Visualforce to build dynamic Table - Part Deux

on

Problem

I recently worked on a Force.com app that generated a list of timed activities for their employees.

These times were displayed in a bar chart running from 09:00 to 17:00 across the day. So, for Employee A you might see a record like the one below visualising a day's activity.

Agent timeline
This graphic was great but quickly built up and could be occasionally hard to follow. One client asked for both this graphic table and a simpler table to follow each activity.




Here's an example of a single day's activity.
03121Ready:0|03121Busy Inbound:45|03166Wrap Up (Auto):13|03179Ready:1|03180Busy Inbound:8|03188Ready:0|03188Busy Inbound:91|03279Wrap Up (Auto):3|03282Busy Inbound:22|03304Wrap Up (Auto):4|03308Ready:1|03309Busy Inbound:12|03321Wrap Up (Auto):52|03373Custom State 320:418|03791Logged Out:25009|28800Logged Out:86400|

The time logged for each activity was being stored in a custom field. The Code below seperates out that Code and builds a dynamic table using Javascript to show the time in each state more clearly.

Installation Instructions


  1. Create a new VisualForce page called Agent Timeline Table
  2. Add the attached code to the new VF page
  3. Add a new section to the Agent Summary page (recommend near bottom of screen)
  4. Drag VF page to new section in layout editor
  5. Select Scrollbars on VF component properties

The Result

Agent timeline in Table format

Visualforce Code 

Here's the code for the VF page 

 













Start
Finish
Duration
Activity






Filter:

Comments

Post a Comment