Archive for Sidebar Summary Category Feed

Free AppExchange Apps (presentation from SD User Group)

I had the privilege of being asked to present to the San Diego Salesforce User Group this past Friday.  The topic for the day was Appexchange Applications, Tools, and Components that you can download for Free!

I presented on a number of Arrowpointe Products as well as some 3rd party ones that, over the years, I have come to really appreciate.  I included apps that are both free and ones I consider well worth the money.  The list is not exhaustive and there are lots of good candidates.  For 3rd party apps, I tried to pick ones that were useful to all Salesforce Customers and not ones that were focused on specific business processes or technologies to be integrated with.  That pares down the list quite a bit.

If you are interested, you can download my slides.  For each app I presented on, there are links on the slides to learn more about them.

Thank you San Diego User Group for being a great group to present to and I hope to make it down that way again soon!

Comments off comments feed

Sidebar Summary using Visualforce

About a year ago, I posted about the Sidebar Summary.  The Sidebar Summary exists in the sidebar and displays the counts of some important queries.  The counts are also hyperlinks to a view or report representing that query.  It’s a very handy thing to have in your sidebar and I use it all the time for my own work.  However, because it’s an s-Control, it runs a little slow.  In fact, it ran slow enough to make me uncheck the user interface option “Show Custom Sidebar Components on All Pages”.

I changed it into a Visualforce page with a custom Apex controller and now it runs super fast and I am able to keep the “Show Custom Sidebar Components on All Pages” option turned on and see it on every page I go to.  There’s a bit of hardcoding in here, but it gets the job done pretty well.  Bye bye s-Control.


The Page is almost all raw HTML.  The only dynamic thing in there are the count values.  Each one retrieves the value from a specific “get” method in the controller.  If you like the queries I use, then the only thing you’ll need to confirm are the URLs that get linked to.  The first 2 go to Views in my Org and the last 2 go to Reports in my Org.  You’ll need to change those URLs.

I named the VF Page “SidebarSummary”.

<apex:page controller="VFController_Sidebar_Summary" sidebar="false" showHeader="false" standardStylesheets="true">
<style type="text/css" media="all">
body{margin: 0; padding: 0; color: #000000; background-color: #E8E8E8;}
#DIV_Container {background-color: #F3F3EC;}
<div id="DIV_Container">
<tr><td><em>Unread Leads</em>:  </td><td><a href="/00Q?fcf=00B30000005JhsT" target="_parent"><b>{!UnreadLeads}</b></a></td></tr>
<tr><td><em>Leads - Not Contacted</em>:  </td><td><a href="/00Q?fcf=00B30000005Jhru" target="_parent"><b>{!NotContactedLeads}</b></a></td></tr>
<tr><td><em>Oppty - Next 30 Days</em>:  </td><td><a href="/00O30000001aEHV" target="_parent"><b>{!Next30DayOppty}</b></a></td></tr>
<tr><td><em>Oppty - Past Due</em>:  </td><td><a href="/00O30000001aEHV" target="_parent"><b>{!PastDueOppty}</b></a></td></tr>


The controller has a method for each query to be run.  Each query is a count() query and returns an Integer.  At the end is a really lame Test method, but it does get 100% of the code covered.  I am certain the code works, so I didn’t do too much with the Test method.  Salesforce just requires the code to be tested.

public class VFController_Sidebar_Summary {

public Integer getUnreadLeads() {
return [
select count() from Lead
where IsConverted = False
AND IsUnreadByOwner = TRUE

public Integer getNotContactedLeads() {
return [
select count() from Lead
where IsConverted = False
AND Status = 'Open - Not Contacted'

public Integer getNext30DayOppty() {
return [
select count() from Opportunity
where IsClosed = False
AND (CloseDate = Next_N_DAYS:30 OR CloseDate = TODAY)

public Integer getPastDueOppty() {
return [
select count() from Opportunity
where IsClosed = False
AND CloseDate < TODAY

static testMethod void testVFController_Sidebar_Summary() {
Test.setCurrentPageReference(new PageReference('Page.SidebarSummary'));
VFController_Sidebar_Summary controller = new VFController_Sidebar_Summary();
Integer i1 = controller.getUnreadLeads();
Integer i2 = controller.getNotContactedLeads();
Integer i3 = controller.getNext30DayOppty();
Integer i4 = controller.getPastDueOppty();



<span style="text-decoration: underline;"><strong>Homepage HTML Component</strong></span>

I created a component for the Narrow side and put the following HTML into the editor.  Essentially, you create an IFRAME and embed the VF page into it.  I found a (unsupported) trick on the forums to remove the developer bar from a page.  Just add <strong>?core.apexpages.devmode.url=1</strong> to the URL.  This will turn off development mode when that page is rendered.  This is important for this little iFrame page on the sidebar.  From what I've gathered, this hack is not supported and could change at any time.

The code below should work for you.  The only thing you might need to change is the Page URL if you didn't name your page SidebarSummary and the height of it.

<iframe src="/apex/SidebarSummary?core.apexpages.devmode.url=1" frameborder="0" height="100" width="100%"></iframe>

Let me know what you think.

Comments (24) comments feed

Sidebar Summary

There is an updated post here that explains how to do this with Visualforce instead

I was recently looking at Rave CRM by Entellium and I was inspired by their UI design. I only saw the demo on their website, but they had a lot of really good UI ideas. One of the things I really liked was a quick summary of data counts on the homepage that were very applicable to the end user.

I wanted to see if I could create something similar in Salesforce. Using an s-Control that is shown via an IFRAME on the sidebar, I was able to do it. The end result is like having a bunch of Metric style dashboard components stacked on top of each other. You can see it in action below. Each line shows a record count and the record count is a hyperlink to a View or Report. It’s small, clean and tells the user vital information with quick links to see more. I like the concept.


How it works

It is all running in an s-Control and uses the AJAX toolkit to talk to Salesforce. The s-Control is in an IFRAME in a homepage component. The s-Control has a function called getCount and you pass getCount the following:

  • Object to Query
  • WHERE clause for the query
  • Label for the returned HTML
  • A URL to let a user drilldown on the result

A call to it looks like this:

theHTML += getCount("Lead", "WHERE IsConverted = False AND CreatedDate = TODAY", "Leads - Today", "/00Q?fcf=00B30000001Qizn");

It uses the object and where clause to do a count() query. It then returns an HTML table row with 2 columns. The first has the label you passed it in italics. The second has the record count of the query as a hyperlink to the URL you passed it. If you don’t pass it a URL, then it shows the record count without a hyperlink.

The s-Control is made up of 2 functions: getCount() and main(). getCount is described above. main() calls getCount once for each metric and then wraps the results in some more HTML. A bit of CSS is sprinkled in to output it nicely on the homepage sidebar. That’s it.

Try It

I uploaded it to the AppExchange to let people try it and improve upon it. It is just a proof of concept. I am using it in my org right now, but it needs to be improved if I will let it stick around. For example, it’d be great to have it cache the data and only run the queries once every 30 minutes because running it can slow the load time a bit. Is anyone up for improving it to meet that requirement?

To make this work for you, you should be familiar with s-Controls. It’s not plug and play. Getting it setup expects you have a working knowledge of this stuff. I kind of hacked it together and wanted to get it out there for other to see. It’s very simple code, but I think it serves a very good purpose. I am interested in what you think.


I set it up with some basic queries, but I’d recommend you change them to meet your needs. To change what the queries are, you need to go into the main() function and edit the lines that call the getCount function. You will need a single line of code for each query you want to run.


If you really want it to work nicely, you should create corresponding Views or Reports and link to those by passing the getCount function the URL of the View or Report.

Once you have your queries all set, you need to add the homepage component. I didn’t package one in the AppExchange package because I have been unable to edit a homepage component that only has an IFRAME in it (WYSIWYG editor bug). I’ve had to delete it and recreate it every time. So you get to do that too!

  1. Create an HTML Area Homepage Component
  2. Choose it to go on the left (narrow) navigation bar
  3. Click the Show HTML checkbox on the WYSIWYG editor
  4. Copy the HTML below and replace IdOfScontrol with the ID of the s-Control in your AppExchange package. You can change the height of the IFRAME too.

    <IFRAME src="/servlet/servlet.Integration?lid=IdOfScontrol&amp;enc=UTF-8&amp;ic=1" frameBorder=0 width="100%" height="150"></IFRAME>

  5. Add the new Homepage Component to your Homepage Layout

Now you should be ready to test it out. Using a tool like Firebug can greatly improve your ability to troubleshoot issues and make enhancements.

Please let me know what you think by posting comments. I am interested in thoughts on the concept, ways to improve it, issues you are having, etc.

Comments (17) comments feed