Salesforce.com Certified...

So after hours of studying I passed the Salesforce.com Developer certification and the Salesforce.com Consultant Certification.

Here is my nifty logo to prove it:



Still waiting on my consultant logo.

Creating a Visualforce custom component with jQuery

Recently at the latest Salesforce.com Dreamforce event I attended a session on creating custom components in Visualforce. The best way to think about custom components is to think of them as reusable "widgets" that can be used in any Visualforce page with mininal duplicate coding. I recently also discovered jQuery...a very powerful javascript library. One of my "homework" assignments I assigned myself at Dreamforce was to create some custom components that leverage the jQuery library.

Why use jQuery to create a Visualforce component?

jQuery is a fast and concise cross-browser JavaScript Library that simplifies HTML document traversing, event handling, animating, and Ajax interactions for rapid web development. To learn more about the power of jQuery visit their site at: http://jquery.com/

Combining jQuery with Salesforce.com allows us to leverage the proven UI components of the library with the power of Salesforce.com. The new Visualforce functionality in Salesforce.com allows us to create reusable components that we can insert in any other Visualforce page.

In the following example we will walk through getting jQuery, creating a static resource, creating a custom component, and finally adding that custom component to a visual force page.

Steps 1: Get jQuery

jQuery is a lightweight javascript library that comes with a bunch of very stable UI elements (Dialog boxes, accordion widget, spinners, etc).

Get the latest build of jQuery from the jQuery website. http://jquery.com/

Steps 2: Zip it up

Once you have downloaded the latest build of the jQuery library .zip it up for upload to Salesforce.com. That is right...we will be able to reference all the files in the .zip file from within the custom component we will create. No need to upload all the files individually.



Steps 3: Create a static resource

Next we will log into Salesforce.com and create a static resource calling it "JQuery_UI". Upload the jQuery .zip file to this resource and save it for reference in your custom component.



Steps 4: Create the custom component

Next we will write the code for the reusable Visualforce custom component. Remember that the value of creating a custom component is that you only have to create the code once and you will be able to reuse the component with one line of code in any Visualforce page. Also the static resource will only be loaded once per page no matter how many times you call the custom component in a Visualforce page (reducing page load times).

Below is the simple code for our custom component. It could be extended to accept and pass variables however, our component will be a stand-alone component that simply displays a nicely formatted jQuery dialog box with a message in it for the user.


Items to note in the code:

Lines 5-7: You will see in the code that we simply reference the files in the static resource we created.
Lines 12-24: Creating the architecture of the dialog box

Lines 30-34: Invoking the jQuery library to make the dialog box appear.


Steps 5: Include custom component in a Visualforce page

The last step is to include the custom component on any Visualforce page. As we see below it as easy as adding one tag.



Step 6: Call your Visualforce page

So now we call the Visualfoce page and we see our "mashup" of jQuery and Salesforce.com Visualforce code.


For more information see:
Salesforce.com - http://wiki.apexdevnet.com/index.php/Apex_and_Visualforce
jQuery -http://jquery.com/

5 out of 5 stars...

It has been a week now and I have had about 8 downloads of my AppExchange app "Record Locking with Inline Messaging!"...and I even got 5 out 5 stars on one user rating.

Thank you MMS-FL!

My first AppExchange listing

RecordLock with Inline Messaging! was officially added to the AppExchange today. This is my first app released to Salesforce.com's AppExchage...mostly just to figure out the process for future apps.



It is a simple app that allows a user to lock any record in Salesforce.com and display an inline message with a custom error.

Here is the link to the AppExchange listing:

https://www.salesforce.com/appexchange/detail_overview.jsp?id=a0330000005L38LAAS

Here is a link to a quick video overview:

http://demandchainsystems.com/blog/appExchange/Index.html

Enjoy!

Populate simple Visualforce table

The following code demonstrates the key concepts in creating a custom controller and linking it to a Visualforce page to return a set of data.

Custom Controller:

public class mySecondController {

 /// Create a list
 /// <OBJECT_NAME>
 List<TIDev__Project_Requirements__c> rqs;

 /// getReq() - Reffer to the list in the
 /// visualforce page with "Req" minus the "get" from
 /// controller name.
 public List<TIDev__Project_Requirements__c> getReq() {

  /// Get the data for the list
  rqs = [select id, TIDev__Requirement__c, TIDev__Due_Date__c, TIDev__Assigned_to__c from TIDev__Project_Requirements__c  Where TIDev__Object__c = 'Account'];
  return  rqs;
 }
}

The custom controller is simply a class with the "get" method invoked. In our example it is called "getReq()". This method quries Salesforce.com for a set of records and returns it to the Visualforce page in a List. The Visualforce page will be able to access this list by referencing the the name of the method minus the "get". So in our example it would be "Req".

Visualforce Page:

<apex:page showHeader="false" sidebar="false" controller='mySecondController'>
 <apex:pageBlock title="Requirements" id="tblId">
  <apex:dataTable value="{!Req}" var="requirements" cellPadding="4" border="1">
   <apex:column>
    <apex:facet name="header">Account Requirement</apex:facet>
    <apex:outputField value="{!requirements.TIDev__Requirement__c}"/>
   </apex:column>
   <apex:column>
    <apex:facet name="header">Assigned to</apex:facet>
    <apex:outputField value="{!requirements.TIDev__Assigned_to__c}"/>
   </apex:column>
   <apex:column>
    <apex:facet name="header">Due Date</apex:facet>
    <apex:outputField value="{!requirements.TIDev__Due_Date__c}"/>
   </apex:column>
  </apex:dataTable>
 </apex:pageBlock>
</apex:page>

The first step in your Visualforce page is to link that page to the custom controller you created. This is done with the "controller" tag in the tag.

Next the List is referenced in the with 'value="{!Req}"'. The data in that list is assigned to the the variable "requirements" and then referenced in the data table using standard Salesforce.com dot notation "{!requirements.TIDev__Requirement__c}".

Update inline s-control height dynamically

Salesforce.com recently released the functionality allowing us to place s-controls directly on page layouts just like any other standard or custom fields.

Having the ability to embed s-controls on a page layout allows us to add some pretty cool functionality to the standard page layouts (Charts, graphs, images, behind the scenes business logic, etc). Something that was severely lacking previously.

Part of the process of adding the s-control to the page layout is defining the height of that s-control. Which is really the height setting of the Iframe that the s-control is loaded into. If you do not specify a height then it is defaulted to 200px.




But what if your s-control should be different height based on different factors? Lets refer back to our previous post "Use Google charts to add visual elements to Salesforce.com data". In this post we showed how you could roll up unit sales information from a related list into a Google Chart and then display that in an inline s-control at the top of a page layout which is 150px high.



This is great if the account has unit sales, but what if there is no unit sales for that account? Then the charts would just be blank.



To save real-estate we can dynamically set the s-control height from within and if there is no unit sales to display then shrink the height to 25px and display a simple message.

"There are no Unit Sales for this account to display"

So how do you dynamically control an s-control's height from within? It is actually very simple. To completely understand lets walk through how the s-control is rendered on the page. As I stated earlier when the s-control is loaded it is actually pulled into an Iframe on the page. The name and id tag of this Iframe are the s-control's Id.

<Iframe height="200px" id="{!SControl.Id}" Name="{!SControl.Name}>

So all we have to do is adjust the Iframe's height based on weather unit sales are present. Below is the sample code to accomplish this. This code assumes that the "unitSales" variable has already been determined.

if(unitSales = 0) {

var hgt = 25;

/// Display no Unit Sales message

} else {

var hgt = 150;

// Display graphs

}


/// Get the current Iframe and store in an object
var sframe=top.document.getElementById(window.name);

// Set the height to the passed value.
sframe.style.height= hgt + "px";

Using the last lines of this code you can dynamically adjust the height of any inline s-control you display on your page.

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).

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.

<body>
<div id="typeField" name="typeField"></div>
</body>

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.