SF Uploadify is a solution developed by Aslam Bari. Simply Cool and interesting.

Here is a small screencast of how the tool works - http://screencast.com/t/ibDqgMBbfQ



You can check his blog for more information about this tool in the links below:

http://techsahre.blogspot.com/2011/09/sf-uploadify-file-uploading-utility-for.html

http://www.aslambari.com/sf_uploadify.html

As the title of the article implies, in this post we will be seeing an example which uses radio button in a table in visualforce and allows selecting one of the records in the table.

You can see a demo of the example here - Click here (forcetreedemos)

Visualforce Page:

<apex:page controller="RadioButton" showheader="false">
<apex:form>
<apex:pageblock id="allcons" title="Available Contacts">
               <apex:pageblocktable id="allcons" value="{!AllContacts}" var="allcon">
                    <apex:column headervalue="Set as Primary">                    
                       <apex:actionsupport action="{!selectcon}" event="onclick" rerender="consel,allcons">  
                        <input type="radio" />                    
                            <apex:param name="conid" value="{!allcon.Id}">
                        </apex:param></apex:actionsupport>                            
                    </apex:column>    
                    <apex:column headervalue="Last Name">
                        <apex:outputfield value="{!allcon.LastName}">
                    </apex:outputfield></apex:column> 
                    <apex:column headervalue="First Name">
                        <apex:outputfield value="{!allcon.FirstName}">
                    </apex:outputfield></apex:column>  
                    <apex:column headervalue="Email">
                        <apex:outputfield value="{!allcon.Email}">
                    </apex:outputfield></apex:column>  
                    <apex:column headervalue="Phone">
                        <apex:outputfield value="{!allcon.Phone}">
                    </apex:outputfield></apex:column>  
                </apex:pageblocktable>
</apex:pageblock> 
<apex:pageblock id="consel" title="Selected Contact">
            <apex:pageblocktable id="allcons" value="{!selectedContact}" var="selcon">                       
                    <apex:column headervalue="Last Name">
                        <apex:outputfield value="{!selcon.LastName}">
                    </apex:outputfield></apex:column> 
                    <apex:column headervalue="First Name">
                        <apex:outputfield value="{!selcon.FirstName}">
                    </apex:outputfield></apex:column>  
                    <apex:column headervalue="Email">
                        <apex:outputfield value="{!selcon.Email}">
                    </apex:outputfield></apex:column>  
                    <apex:column headervalue="Phone">
                        <apex:outputfield value="{!selcon.Phone}">
                    </apex:outputfield></apex:column>  
                </apex:pageblocktable>
</apex:pageblock>               
</apex:form>
</apex:page>

Apex Class: RadioButton

public class RadioButton {
List<contact> selectcon;
Public List<contact> getAllContacts()
{
    List<contact> allcons = [Select Id,FirstName,LastName,Email,Phone from Contact limit 5];
    return allcons;
}    
Public void selectcon()
{
    String selcontactid = System.currentPagereference().getParameters().get('conid');
    Contact con = [Select Id,FirstName,LastName,Email,Phone from Contact where Id=:selcontactid];
    selectcon =  new List<contact>();
    selectcon.add(con);
}
Public List<contact> getselectedContact()
{
    return selectcon;
}
}

<apex:page >
  <chatter:feed entityId="{!$User.Id}"/>
</apex:page>

Note that the "entityID" attribute determines the feeds to be displayed. This can be a UserId, a custom or standard object record ID provided chatter is enabled for that object.

You may also create a Visualforce page with this component, and then create a home page sidebar component and embed the Visualforce page in the sidebar component.

<apex:page>
  The value of the paramter name passed to this page is :{!$CurrentPage.parameters.name} 
</apex:page>

Save the above Visualforce page with the name  "testpage".

Now, go to the URL bar and type the following address

http://yourinstance.salesforce.com/apex/testpage?name=Edwin

Your Visualforce page will display the output "

The value of the paramter name passed to this page is : Edwin

You can use the apex:param component when you want to pass paramters dynamically between visualforce pages, and the above method works as usual.

This is a step by step guide which takes you through getting started with using styles and CSS in your Visualforce Pages.

This sample code covers a general query utility which can be used to query any object.

This is the general class which runs the query. Comments are embedded inline for understanding the functionality.

Copy and paste this class

Public class QueryUtility
{
    // Function to run the query
    Public List<sObject> runQuery(String objname,String[] fieldnames,String condition)
    {
        List<sObject> queryresult;
        String fieldslist = '';
        // Generate the fieldslist from the string array
        if (fieldnames != NULL)
        {
            if(fieldnames.size() > 0)
            {
                for (Integer i=0; i < fieldnames.size(); i++)
                {
                    if( i <= (fieldnames.size() - 2))
                        fieldslist = fieldslist+fieldnames[i]+',';
                    else
                        fieldslist = fieldslist+fieldnames[i];    
                }
            }
        } 
        // Construct the query string
        String soqlquery = 'Select '+fieldslist+' from '+objname+' '+condition;
        // Run the query
        queryresult = Database.query(soqlquery);
        return queryresult;               
    }
}    

To Call this class:

You can call this class from any other class. Below is a sample code which you can embed into any class or you can execute this from the system log.

// Construct the list of fields
     String[] flist  = new List<String>{'Name','Id'};
// Initialte a new variable of the general utility class
     QueryUtility test = new QueryUtility();
// Call the runquery method to execute the query. Note that the condition has to be passed as an empty string if you do not have any condition
     Account[] qresult = test.runQuery('Account',flist,'');
     system.debug('The query result is'+qresult); 

You can watch the demo at forcetreedemos too..


To install the app in your Salesforce instance, install the below package.


Production, Developer Org - https://login.salesforce.com/packaging/installPackage.apexp?p0=04t900000000sla


Sandbox - https://test.salesforce.com/packaging/installPackage.apexp?p0=04t900000000sla


Suggestions and Comments welcome!

The Basic - Getting Started

Let's start by considering a simple apex class.

Public class mysimpleclass
{
    Public void samplemethod()
    {
        Integer a = 10;
        Integer b = a + 20;
        system.debug('The value of b is'+b);
    }
   
} 

Now, we shall write the test method for this class.

Step 1: You have two options. You can have the test method in the same class above, OR you can have a separate class which has the test method for the above class. I always go with a separate class, because

1. It is easy to organize.
2. Make use of @istest notation to prevent the test class from being counted against the organization apex code limit. Remeber, comments and classes with @istest notation are not counted.

I have done this before and ran into the same problem again recently. Before I forget this again, let me write it down just in case there are people who think like me.

So, it was just one letter which cost me 1 to 2 hours of research.

To point your Blackberry Device or your Blackberry Simulator to the Sandbox, you will have to do the steps as outlined in this article by Salesforce. Click here

I did exactly (rather not), what was told there and i couldn't point by Blackberry to the Sandbox. After two hours i found out what was wrong.


I typed in, Izsand (ie, a Capital I ( a I as in Ice) and then zsand).

It should have been lzsand (ie, a small l as in lazy and then zsand).

Probably I should go back and learn alphabets properly. 

This article would cover steps to create a Visualforce Page which outputs a tree like structure wherein you could view Accounts, the Contacts related to the account and the Cases related to the Contact - All in one single tree structure.

Watch a DEMO here.....

Screenshot:
Step 1:

Download the Jquery Plugin from here. Upload this Zip file into Static Resources with the name "Jtreeview"

Step 2:

Create the Apex Class "treenodes" and paste the below code.

public class treenodes {

/* Wrapper class to contain the nodes and their children */
public class cNodes
{

 public List<Contact> parent {get; set;}
 Public Account gparent {get;set;}

 public cNodes(Account  gp, List<Contact> p)
 {
     parent = p;
     gparent = gp;
 }
}
/* end of Wrapper class */ 

Public List<cNodes> hierarchy;

Public List<cNodes> getmainnodes()
{
    hierarchy = new List<cNodes>();
    List<Account> tempparent = [Select Id,Name from Account];
    for (Integer i =0; i< tempparent.size() ; i++)
    {
        List<Contact> tempchildren = [Select Id,FirstName,LastName,(Select Id,CaseNumber,Subject from Cases) from Contact where AccountId = :tempparent[i].Id];
        hierarchy.add(new cNodes(tempparent[i],tempchildren));
     }   
    return hierarchy;
}   
}

Step 3:

Create a Visualforce Page "TreeViewDemo" and paste the below code.

<apex:page sidebar="false" controller="treenodes" showheader="false">
<!-- Include the Jquery Script files -->
    <link rel="stylesheet" href="{!URLFOR($Resource.Jtreeview,'Jquerytreeview/jquery.treeview.css')}"/>
    <script src="{!URLFOR($Resource.Jtreeview,'Jquerytreeview/jquery.js')}" type="text/javascript"></script>
    <script src="{!URLFOR($Resource.Jtreeview,'Jquerytreeview/jquery.cookie.js')}" type="text/javascript"></script>
    <script src="{!URLFOR($Resource.Jtreeview,'Jquerytreeview/jquery.treeview.js')}" type="text/javascript"></script>
<!-- End of Javascript files -->
<script type="text/javascript">
        $(function() {
            $("#tree").treeview({
                collapsed: false,
                animated: "medium",
                control:"#sidetreecontrol",
                persist: "location"
            });
        })
</script>
<br/> <br/> <br/>
<!-- Tree -->
<div class="treeheader" style="height:0px;">&nbsp;</div>
<div id="sidetreecontrol"><a href="?#"><font style="color:blue;">Collapse All</font></a> | <a href="?#"><font style="color:blue;">Expand All</font></a></div>
<ul id="tree">
    <apex:repeat value="{!mainnodes}" var="parent">
        <li><strong><apex:outputtext style="color:blue;" escape="false" value="{!parent.gparent.Name}"/></strong>
             <ul>
                 <apex:repeat value="{!parent.parent}" var="child">
                    <li><span class="formattextcon"><apex:outputtext style="color:green;" escape="false" value="{!child.LastName}"/></span>
                        <ul>
                            <apex:repeat value="{!child.Cases}" var="gchildren">
                               <li> <span class="formattextcon"> <apex:outputtext escape="false" style="color:red;" value="{!gchildren.CaseNumber}"/> <b>||</b> &nbsp;<apex:outputtext escape="false" value="{!gchildren.Subject}"/> </span> </li>
                            </apex:repeat>
                        </ul>       
                    </li>
                 </apex:repeat>  
             </ul>  
        </li>
    </apex:repeat>
</ul>
<!-- End of Tree -->       
</apex:page>

Note: You may modify the hierarchy by replacing the Objects and the queries with your required ones. Also, you may have to optimize the apex class to handle more than 100 queries as this demo has a SOQL query within a FOR loop (An Example of bad programming practice).

I have put together a small application which helps log tickets, and track them. This application was specifically designed keeping in mind the way tickets/incidents are handled in a typical IT Service Desk.

This tool also has a timesheet feature, which logs the amount of work spent by each employee on each ticket.

Watch a working Demo of the tool here....@ forcetreedemos


Timesheet Management - Click here


Incident Management - Click here

Below are some of the screenshots from this tool. You can install the package from here.

To install to Production/Developer instance : https://login.salesforce.com/?startURL=%2Fpackaging%2FinstallPackage.apexp%3Fp0%3D04t900000000mDE

To install to your Sandbox: https://test.salesforce.com/?startURL=%2Fpackaging%2FinstallPackage.apexp%3Fp0%3D04t900000000mDE

Screenshots:

While there is already an "Idea Under Construction" for a customizable homepage here, you may still want to look at the below application.

This excellent app has been developed by Kusiri and is called iSalesforce.


The source code can be downloaded from here. Here is the video from the app's code share page.

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.

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

Came across these excellent Ad's and the making of these Ad's.Watch and have fun!!!





The Making of these Ad's