ForceTree.com

Dashboards in Visualforce Page - A Cool Way!!

3:24 PM

What if you wanted to display a dashboard in a Visualforce Page, or what if you do not like the standard dashboard's of Salesforce and wanted to create new dashboard's.

This article shows an example of displaying dashboard's in a Visualforce page using JQuery Flot.

JQuery Flot is an open source Jquery Plugin which can be downloaded from here.The link has proper documentation and the various ways of using Flot.

You can watch a demo in action here.

Screenshot:

Step 1:

Get the Jquery Flot ZIP file from here. Make sure that you download the latest version when available. This example was tested with Flot version 0.6.

Step 2:

Upload the ZIP file just downloaded into Static Resource. Let's Name the Static Resource "FlotDashboard". You may rename it to a meaningful name if you like to.

Step 3:

Let's create a Visualforce Page to see how the dashboard works.

<apex:page showheader="false">
 
<html>
 <head>
  
    <title>Flot Examples</title>
     <link href="{!URLFOR($Resource.FlotDashboard,'flot/examples/layout.css')}" rel="stylesheet" type="text/css"></link>
    <!--[if IE]><script language="javascript" type="text/javascript" src="{!URLFOR($Resource.FlotDashboard,'flot/excanvas.min.js')}"></script><![endif]-->
    <script language="javascript" type="text/javascript" src="{!URLFOR($Resource.FlotDashboard,'flot/jquery.js')}"></script>
    <script language="javascript" type="text/javascript" src="{!URLFOR($Resource.FlotDashboard,'flot/jquery.flot.js')}"></script>
    <script language="javascript" type="text/javascript" src="{!URLFOR($Resource.FlotDashboard,'flot/jquery.flot.stack.js')}"></script>
 </head>
    <body>
    <h1>Flot Examples</h1>

    <div id="placeholder" style="width:600px;height:300px"></div>

    <p>One of the goals of Flot is to support user interactions. Try
    pointing and clicking on the points.</p>

    <p id="hoverdata">Mouse hovers at
    (<span id="x">0</span>, <span id="y">0</span>). <span id="clickdata"></span></p>

    <p>A tooltip is easy to build with a bit of jQuery code and the
    data returned from the plot.</p>

    <p><input id="enableTooltip" type="checkbox"/>Enable tooltip</p>

<script id="source" language="javascript" type="text/javascript">
$(function () {
    var sin = [], cos = [];
    for (var i = 0; i < 14; i += 0.5) {
        sin.push([i, Math.sin(i)]);
        cos.push([i, Math.cos(i)]);
    }

    var plot = $.plot($("#placeholder"),
           [ { data: sin, label: "sin(x)"}, { data: cos, label: "cos(x)" } ], {
               series: {
                   lines: { show: true },
                   points: { show: true }
               },
               grid: { hoverable: true, clickable: true },
               yaxis: { min: -1.2, max: 1.2 }
             });

    function showTooltip(x, y, contents) {
        $('<div id="tooltip">' + contents + '</div>').css( {
            position: 'absolute',
            display: 'none',
            top: y + 5,
            left: x + 5,
            border: '1px solid #fdd',
            padding: '2px',
            'background-color': '#fee',
            opacity: 0.80
        }).appendTo("body").fadeIn(200);
    }

    var previousPoint = null;
    $("#placeholder").bind("plothover", function (event, pos, item) {
        $("#x").text(pos.x.toFixed(2));
        $("#y").text(pos.y.toFixed(2));

        if ($("#enableTooltip:checked").length > 0) {
            if (item) {
                if (previousPoint != item.datapoint) {
                    previousPoint = item.datapoint;
                   
                    $("#tooltip").remove();
                    var x = item.datapoint[0].toFixed(2),
                        y = item.datapoint[1].toFixed(2);
                   
                    showTooltip(item.pageX, item.pageY,
                                item.series.label + " of " + x + " = " + y);
                }
            }
            else {
                $("#tooltip").remove();
                previousPoint = null;           
            }
        }
    });

    $("#placeholder").bind("plotclick", function (event, pos, item) {
        if (item) {
            $("#clickdata").text("You clicked point " + item.dataIndex + " in " + item.series.label + ".");
            plot.highlight(item.series, item.datapoint);
        }
    });
});
</script>

 </body>
</html>

</apex:page>

Step 4:

Modify the script above to plot your own values in the dashboard. You can also compute your data points in an apex class and pass them to the dashboard.

I will try and post a more elaborate example of customizing this Dashboard using Apex.

Upload a file as an Attachment to a record using Visualforce

11:10 PM

This example illustrates the way to upload a file and attach it against any record using Visualforce. The file that you upload using this will be available in the "Notes & Attachments" related list for the record.

Click here if you are looking to upload a file into "Documents".

Step 1: Create an Apex class named "attachmentsample" . Paste the code below.

public class attachmentsample {

    public attachmentsample(ApexPages.StandardController controller) {

    }
    Public Attachment myfile;
    Public Attachment getmyfile()
    {
        myfile = new Attachment();
        return myfile;
    }
   
    Public Pagereference Savedoc()
    {
        String accid = System.currentPagereference().getParameters().get('id');

        Attachment a = new Attachment(parentId = accid, name=myfile.name, body = myfile.body);
         
         /* insert the attachment */
         insert a;
        return NULL;
    }   

}

Step 2:

Create a Visualforce page named "attachment" and paste the code below.

<apex:page standardController="Account" extensions="attachmentsample">

<apex:form >
  <apex:sectionHeader title="Upload a Attachment into Salesforce"/>
  <apex:pageblock >
      <apex:pageblocksection columns="1">
          <apex:inputfile value="{!myfile.body}" filename="{!myfile.Name}" />
          <apex:commandbutton value="Save" action="{!Savedoc}"/>
      </apex:pageblocksection>
  </apex:pageblock>   
</apex:form> 

</apex:page>

Quick Test:
If you do not wish to do Step3 and 4 do this. Paste the following URL in your browser
http://yoursalesforceinstance.com/apex/attachment?id=0017000000eiDgy

ID should be a Valid Account Id of your instance.

Step 3:
Create a custom button (Detail Page button) on Account and select the new Visualforce page that you created as the source.

Step4:
Add the button created in Step3 to the Account Page layout.

You can test this by navigating to any account and clicking on the button that you created in Step3.
You may test

chatter

Chatter SuperBowl Ads

11:19 AM

Dashboards in Visualforce Page - A Cool Way!!

Upload a file as an Attachment to a record using Visualforce

Chatter SuperBowl Ads

Pages

Search This Blog

Blog Archive

Subscribe

Like Us on FB