Javascript and Visualforce to build dynamic Table

Using JavaScript to dynamically render HTML Table within a Visualforce page

 Introduction

A customer recently asked for a nicer representation of a text field in their Salseforce page. This text field was an activity log for their employees and was being saved as a long text string within Salesforce with the | or "Pipe" character serving as the seperator between each row.

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 customer asked whether this text line could appear as a nicely formatted table. I initially thought of using a Trigger to split each activity into a record in a custom object but instead developed an inline Visualforce page that took the content of the field, passed it through JavaScript and output a Table.

Installation

Here are the installation details for the VF page

1. Create a new VisualForce page
2. Add the code to that VF page and Save it
3. Add a new section to the Page Layout (recommend near bottom of screen)
4. Drag VF page to new section in layout editor
5. Activate Scrollbars on VF component properties within the Page Layout

Output

This is what the created HTML table looks like in the VF page.

The Code

Links

I used these excellent resources to help create the JavaScript for this work.

• http://stackoverflow.com/questions/10612667/create-html-table-from-comma-separated-strings-javascript
• http://stackoverflow.com/questions/13775519/html-draw-table-using-innerhtml
• http://www.w3schools.com/js/js_string_methods.asp
• http://stackoverflow.com/questions/96428/how-do-i-split-a-string-breaking-at-a-particular-character