Nov 27, 2011

Social Contacts - Winter'12 Feature

Social Contacts - an awesome feature of winter'12. With Social Contacts you can view contact's social network profile in salesforce with just BUTTON CLICKS.

Some key points :

1) Easy access to contact's information, which indeed help in building strong relationships
2) Can view social information from several networks like "Twitter" , "Facebook" , "LinkedIn" (beta) etc
3) Saves time to login to other sites and view the information

To setup Social Contacts go to Setup > App Setup > Customize > Social Contacts > Settings > Enable all and click Save. We are ready to go.

Steps to follow :

1) Go to any contact

2) Click on Twitter icon 

3) Click "Sign in to Twitter"

4) It will show you the page with possible match
5) Select a profile, it will show the details of thr profile. Isn't that awesome?
To check the Security and Privacy when using Social Contacts, please refer : Social Contact Overview

Visualforce Charting - Winter 12 (Pilot)

Visualforce charting is in pilot. To enable this feature you need to contact At this time it is not recommended that this feature be used in production code or managed packages.

After enabling visualforce charting you are able to see the components in "Component Reference" which are used to create visualforce charts.

Right now if we need to display chart (pie,line,bar etc) we go for google charts, any charts or any third party charts. But with winter 12 release visualforce charting (pilot) is a way for you to create custom charts on your Visualforce pages(pie, bar, and line charts). Visualforce charts are rendered client-side using JavaScript. This allows charts to be animated and visually exciting, and chart data can load and reload asynchronously, which can make the page feel more responsive.

Right now visualforce charting offers variations on bar, line, and pie charts but if you like to use other charts then you can go with Google Charts

Limitations (As it is in pilot there are some limitation too)

  • Visualforce charts will only render in browsers which support scalable vector graphics (SVG).
  • Visualforce charting uses JavaScript to draw the charts. These charts won't display in pages rendered as PDFs.
  • Email clients do not generally support JavaScript execution in messages. Don't use Visualforce charting in email messages or email templates.
  • Visualforce charting sends errors and messages to the JavaScript console. You'll want to keep a JavaScript debugging tool, such as Firebug, active during development.

Creating a chart with Visualforce will require you to do two things:

  1. Write an Apex method that queries for, calculates, and wraps your chart data to send to the browser.
  2. Define your chart using the Visualforce charting components.

When the page containing the chart loads, the chart data is bound to a chart component, and the JavaScript that will draw the chart is generated. When the JavaScript executes, the chart is drawn in the browser. A Visualforce chart requires that you create a chart container component, which encloses at least one data series component.

Here is the simple example of using Pie Chart :

<apex:page controller="PieChartController" title="Pie Chart"> 

    <apex:chart height="350" width="450" data="{!pieData}">
        <apex:pieSeries dataField="data" labelField="name"/>
        <apex:legend position="top"/>

Class :

public class PieChartController
    //For Pie Chart
    public List<PieWedgeData> getPieData()
        List<PieWedgeData> data = new List<PieWedgeData>();
        data.add(new PieWedgeData('Jan', 30));
        data.add(new PieWedgeData('Feb', 15));
        data.add(new PieWedgeData('Mar', 10));
        data.add(new PieWedgeData('Apr', 20));
        data.add(new PieWedgeData('May', 20));
        data.add(new PieWedgeData('Jun', 5));
        return data;

    // Wrapper class for Pie Chart
    public class PieWedgeData
        public String name { get; set; }
        public Integer data { get; set; }

        public PieWedgeData(String name, Integer data) {
   = name;
   = data;

Resulting page looks like this :

Example of more complex Charts :

<apex:page controller="ChartController">
    <apex:chart height="400" width="700" data="{!data}">
        <apex:legend position="right"/>
        <apex:axis type="Numeric" position="left" fields="data1"
            title="Opportunities Closed" grid="true"/>
        <apex:axis type="Numeric" position="right" fields="data3"
            title="Revenue (millions)"/>
        <apex:axis type="Category" position="bottom" fields="name"
            title="Month of the Year">
            <apex:chartLabel rotate="315"/>
        <apex:barSeries title="Monthly Sales" orientation="vertical" axis="right"
            xField="name" yField="data3">
            <apex:chartTips height="20" width="120"/>
        <apex:lineSeries title="Closed-Won" axis="left" xField="name" yField="data1"
            fill="true" markerType="cross" markerSize="4" markerFill="#FF0000"/>
        <apex:lineSeries title="Closed-Lost" axis="left" xField="name" yField="data2"
            markerType="circle" markerSize="4" markerFill="#8E35EF"/>
Class :

public class ChartController {
    // Return a list of data points for a chart
    public List<Data> getData() {
        List<Data> data = new List<Data>();
        data.add(new Data('Jan', 30, 90, 55));
        data.add(new Data('Feb', 44, 15, 65));
        data.add(new Data('Mar', 25, 32, 75));
        data.add(new Data('Apr', 74, 28, 85));
        data.add(new Data('May', 65, 51, 95));
        data.add(new Data('Jun', 33, 45, 99));
        data.add(new Data('Jul', 92, 82, 60));
        data.add(new Data('Aug', 87, 73, 45));
        data.add(new Data('Sep', 34, 65, 55));
        data.add(new Data('Oct', 78, 66, 56));
        data.add(new Data('Nov', 80, 67, 53));
        data.add(new Data('Dec', 17, 70, 70));
        return data;

    // Wrapper class
    public class Data {
        public String name { get; set; }
        public Integer data1 { get; set; }
        public Integer data2 { get; set; }
        public Integer data3 { get; set; }
        public Data(String name, Integer data1, Integer data2, Integer data3) {
   = name;
            this.data1 = data1;
            this.data2 = data2;
            this.data3 = data3;

Resulting page looks like this :

As it is in pilot, so will soon come up with more real time examples and scenarios, stay tuned.

More Reference :
Quick Look at Visualforce Charting
Building a Complex Chart with Visualforce Charting
How Visualforce Charting Works