TI: April 2008

Monday, April 28, 2008

Use Google charts to add visual elements to Salesforce.com data

As a visual learner I am always looking for different ways to represent data that is more appealing to the eye and easier for types like me to understand. The dashboards in Salesforce.com are a great way to visualize data unfortunately they can only be displayed in limited locations within Salesforce.com.

This is where Google enters the picture with a free API that accepts any data set and returns a chart that you can embed in any webpage. It allows you to create multiple chart types (Line, Pie, Bar, Bubble, etc) as well as world and local maps. Lets walk through a scenario in which we can "mash-up" Salesforce.com and the Google Charts API.

First we will start with something that takes place in over half of our Salesforce.com implementations. A company wants to integrate with a back end system and pull in monthly sales data to display at the account level. The sales data is generally imported into a related list and buried somewhere at the bottom of the page like this:

Not very pretty and easily missed by most users. With Google charts you can take that sales data and mash it up with a cool looking chart and get something that looks like this:

...or this...

Once you have your chart parameters defined you can create an s-control in Salesforce.com that queries the UnitSales__c object and feeds the account specific data elements to the Google chart. Then finally you can insert that s-control as an inline s-control on your account page layout. Turning the boring data from a related list into a visual element that is sure to catch any salesperson's attention (especially if sales are going down).

Friday, April 25, 2008

Create a dynamic picklist in Salesforce.com in an s-control using JavaScript

A common task that I am asked to complete is to create an s-control that allows a user to input/edit data that will be stored back to the database. This ends up essentially being an html form that reflects the data elements in Salesforce. Below is the code that I use to render pick list fields dynamically in my forms.

In this example we will dynamically replicate the “Type” picklist field from the Account object in an s-control. This example assumes that you have an s-control and a web tab in Salesforce pointing to this s-control. We will also assume that you want to generate this picklist on the Body OnLoad event. These functions could be reworked to run at any point in your scripts.

Click here to download the JavaScript source code for this example

First: Create the div tag that will hold the picklist. In our example we use the name of the field as the Name and Id of the div tag. This Div tag should reside in the body of your HTML doc.

Next: Add the “addTypePicklist()” to your Body OnLoad event.

<body onload="addTypePicklist()" >
<div id="typeField" name="typeField"></div>
</body>

Next: Add the “addTypePicklist()”, "createPicklist()" and "getPicklistValues()" functions to your JavaScript in your header:

The addTypePicklist() function has four steps that we will walk through that reference the other two functions.

Step 1: The first step is to do a Describe Object on the object where the field is. In our example the Type field is on the Account object. The Describe Object call will give us a list of all fields and their attributes that are on that object.
Step 2: The second step is to pass the results of the describe object and the name of the field to the "getPicklistValues(nameOfField, describeObjectResults)" function. The field name passed is that name of the picklist value that you want to dynamically recreate. This function will return an array of all the picklist values available for that field. This is the "picklistVal" array in our example.
Step 3: Pass this array and what you want the Id of the picklist to be to the "createPicklist(arrayOfValues, idOfNewField)" function. This function will return the complete HTML for the picklist. This is the "pickHTML" variable in our example.
Step 4: Pass the results of the previous function to the innerHTML of the div that we created in the beginning.

That's it! You will have a dynamically created picklist in your form.