ForceTree.com: Jquery

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.

Jquery

Animation / Text Effects in a Visualforce Page

11:35 PM

It may be required sometimes that you add some animation effects to messages displayed in your homepage or elsewhere, particularly when you want to catch the attention of a user.

I browsed through the forums and with some advice from people was introduced to Jquery. Jquery is an advanced form of javascript. It is a opensource plugin consisting of some complex javascript functions which can be easily adapted to any webpage.

Even though i used Jquery, i still do not understand how it works nor its technical details. So, using Jquery doesn't require that you learn it completely.

In this article i will be telling you how to use a Jquery plugin in your visualforce page, and thereby bring in animation effects into your visualforce page.

You can view/download the Jquery plugin from here.. Click here

You can view a demo of the Jquery plugin inside a Visualforce Page here .. Click here

Step 1:

Download the Jquery plugin and Unzip it. You will find several folders. You will need to upload some files into Static Resources inorder to use the plugin into our Visualforce Pages.

Step 2:

Create the following static resources:

Name refers to the name to be given to your Static Resource. Path refers to the path in the folder that you get after unzipping the Jquery plugin downloaded from http://jqueryui.com/demos/effect/

Name : TickerEffects_JqueryJS Path: Jquery Effects\development-bundle\jquery-1.4.2.js

Name: TickerEffects_Core Path: Jquery Effects\development-bundle\ui\jquery.effects.core.js

Name: TickerEffects_Pulsate Path: Jquery Effects\development-bundle\ui\jquery.effects.pulsate.js

Name: explode Path: Jquery Effects\development-bundle\ui\jquery.effects.explode.js

Name: highlight Path: Jquery Effects\development-bundle\ui\jquery.effects.highlight.js

Name: shake Path: Jquery Effects\development-bundle\ui\jquery.effects.shake.js

Name: democss Path: Jquery Effects\development-bundle\demos\demos.css

Step 3:

Create the following Visualforce Page.

<apex:page showHeader="false">
<html lang="en">
<head>
    <meta charset="utf-8" />
    <title>jQuery UI Effects - Effect demo</title>
    <link rel="stylesheet" href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.6/themes/base/jquery-ui.css" ></link>
    <script src="{!URLFOR($Resource.TickerEffects_JqueryJS)}"></script>
    <script src="{!URLFOR($Resource.TickerEffects_Core)}"></script>

    <script src="{!URLFOR($Resource.explode)}"></script>

    <script src="{!URLFOR($Resource.highlight)}"></script>
    <script src="{!URLFOR($Resource.TickerEffects_Pulsate)}"></script>

    <script src="{!URLFOR($Resource.shake)}"></script>

    <link rel="stylesheet" href="{!URLFOR($Resource.democss)}"  />
    <style>
        .toggler { width: 500px; height: 200px; position: relative; }
        #button { padding: .5em 1em; text-decoration: none; }
        #effect { width: 240px; height: 135px; padding: 0.4em; position: relative; }
        #effect h3 { margin: 0; padding: 0.4em; text-align: center; }
        .ui-effects-transfer { border: 2px dotted gray; } 
    </style>
    <script>
    $(function() {
        // run the currently selected effect
        function runEffect() {
            // get effect type from 
            var selectedEffect = $( "#effectTypes" ).val();
            
            // most effect types need no options passed by default
            var options = {};
            // some effects have required parameters
            if ( selectedEffect === "scale" ) {
                options = { percent: 0 };
            } else if ( selectedEffect === "transfer" ) {
                options = { to: "#button", className: "ui-effects-transfer" };
            } else if ( selectedEffect === "size" ) {
                options = { to: { width: 200, height: 60 } };
            }

            // run the effect
            $( "#effect" ).effect( selectedEffect, options, 500, runEffect);
        };

        // callback function to bring a hidden box back
        function callback() {
            setTimeout(function() {
                $( "#effect" ).removeAttr( "style" ).hide().fadeIn();
            }, 1000 );
        };

        // set effect from select menu value
        $( "#button" ).click(function() {
            runEffect();
            return false;
        });
    });
    </script>
</head>
<body background="{!URLFOR($Resource.BGImage1)}" style="font-family:Verdana;font-size:8pt;">

<div class="demo">

<div class="toggler">
    <div id="effect" class="ui-widget-content ui-corner-all">
        
        <p>
            Etiam libero neque, luctus a, eleifend nec, semper at, lorem. Sed pede. Nulla lorem metus, adipiscing ut, luctus sed, hendrerit vitae, mi.
        </p>
    </div>
</div>

<select name="effects" id="effectTypes">

    <option value="explode">Explode</option>

    <option value="highlight">Highlight</option>

    <option value="pulsate">Pulsate</option>

    <option value="shake">Shake</option>


</select>

<a href="#" id="button" class="ui-state-default ui-corner-all">Run Effect</a>

</div><!-- End demo -->



<div class="demo-description">
<p>Select a effect from the drop down.</p>
</div><!-- End demo-description -->

</body>
</html>

</apex:page>

See for yourself the results!!

Dashboards in Visualforce Page - A Cool Way!!

Animation / Text Effects in a Visualforce Page

Pages

Search This Blog

Blog Archive

Subscribe

Like Us on FB