Tag Archives: visualforce

The Force.com Streaming API


The Streaming API isn’t new but I thought I’d put together a post to document my experiences and get some source code onto Github to help you get started.

Streaming APIThere are different ways to interact with the Streaming API i.e. from within the Force.com Platform using Visualforce, or from outside the platform using the language of your choice. Either way you’ll need to implement the Bayeux protocol, which is easier than it sounds because there are many libraries out there to help you out.

At it’s core all you need to do is create a push topic – which is the registration of an SOQL query for use with the Streaming API – that the client subscribes to. The client then waits for updates or inserts and handles the data appropriately. I’m not going to go into too much detail since a lot is covered in the docs, but if you’re interested in a working example you can get my source code here. Note that for my source code to work you’ll need to create a push topic more or less in the following way:

PushTopic pushTopic = new PushTopic();
pushTopic.Name = 'AllAccounts';
pushTopic.Query = 'SELECT id, name FROM Account';
pushTopic.ApiVersion = 26.0;
pushTopic.NotifyForOperations = 'All';
pushTopic.NotifyForFields = 'Referenced';
insert pushTopic;

You’ll need to execute this code using the System Log or the Execute Anonymous capabilities of any appropriate app.

Lessons Learned

  • The API will only feed through information that is inserted/updated after the page/app implementing the API opened/started.
  • You cannot use aggregate queries e.g. you could not create a running total of the sales amount this month.
  • You cannot use it with Chatter objects.
  • You can only have 10 concurrent subscribers i.e. only 10 instances of your page/app could subscribe to a topic.
  • You can use Workbench to experiment with the Streaming API as shown below:

Workbench and the Streaming API

If you’ve had any interesting experiences or projects where you’ve had to use the Streaming API let us know in the comments!

Tagged , ,

Using Twitter Bootstrap with Visualforce pages


Building beautiful websites used to take patience and skill. If one were trying to create a visually appealing website from scratch, good knowledge of CSS3 would have been a must. Additionally, skill with jQuery would be another hurdle for completing dynamic aspects. Putting everything in the proper order would have taken days to weeks.

Now, there are fast UI frameworks for front-end development. I will be introducing you to Twitter Bootstrap, specifically how to integrate it with Visualforce Pages.

Some people have compared the Force.com platform (APEX programming language) to Visual Basic. Even a good application needs an attractive UI. Most applications nowadays are web facing. Browsers use CSS + HTML5 + JavaScript to render text, images, layout, and user interaction. Bootstrap is a UI framework with all those elements pre-fabricated. You just need to mark HTML elements with the proper CSS 3 classes and voila, it’s done.

It is extremely easy to use Bootstrap.

  1. Go to http://twitter.github.com/bootstrap/ and download the framework. It is a ZIP file, which already contains CSS, image (glyphicons), and JavaScript. (The required jQuery JavaScript is a separate download.)
  2. Upload as Static Resource to your Force.com org. (Setup > Develop > Static Resources). You can give it a name, for example, bootstrap.
  3. Create your visual page and include the required bootstrap components.
<script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.9.0/jquery-ui.min.js"></script>

<apex:stylesheet value="{!URLFOR($Resource.bootstrap, '/css/bootstrap.css')}"/>

<apex:stylesheet value="{!URLFOR($Resource.bootstrap, '/css/bootstrap.min.css')}"/>

<apex:includeScript value="{!URLFOR($Resource.bootstrap, '/js/bootstrap.js')}"/>

<apex:includeScript value="{!URLFOR($Resource.bootstrap, '/js/bootstrap.min.js')}"/>

That’s all the setup that’s needed.

By default, bootstrap uses a 12-column layout. If you want a div that spans across 4 columns, just indicate it is a “span4”. The convention is {name#columns}. Many useful UI classes are already pre-fabricated, i.e.

  • Navigation bar
  • Buttons
  • Pagination
  • Labels
  • Input boxes
  • Breadcrumbs
  • Progress bar

There is even a photo carousel built into it. See http://twitter.github.com/bootstrap/javascript.html#carousel

Furthermore, this UI framework supports mobile devices and will automatically resize elements accordingly. It’s really easy to use it. In 10 minutes, I created a demo page, showing VF pages + Bootstrap = Like.

The URL is: http://tquila-ray-developer-edition.na11.force.com/

Additionally, there are many bootstrap themes available on the Internet. Go ahead, try it and I am sure you will enjoy creating a polished website.

Image

Tagged , , , ,

Recipe to add AJAX, dynamic ratings in Salesforce using jQuery.


We all like to see our clients rejoice when we create great user experiences (UX) – JavaScript has helped us a lot in achieving this. By considering a scenario in Apex and Visualforce development, I’d like to show you how to add rating (1-5 scale) using jQuery with custom logic to save the relevant ratings in a separate object, and load it dynamically!

Utensils required

  1. Salesforce Environment.
  2. jQuery library.
  3. 2 icons to show the rating.

Ingredients

  1. One parent object (standard or custom, I am using “Account” object).
  2. One child custom object (I have created custom object called “Rating”).
  3. Two Apex Classes (one for the controller and another for test class).
  4. One Inline visualforce page.
  5. Two Static Resources

Demo: click here to taste! Continue reading

Tagged , , , , , , ,

Export to Excel functionality using the Wizard technique


Recently, we were working on a requirement wherein the client wanted an “Export to Excel” button on a Visualforce page which displays the data in a tabular format. Clicking this button enables them to store the tabular data locally as an excel file. Admittedly, there are several ways to implement this functionality. We will walkthrough an implementation technique that I like to call the “Wizard technique”.

Let’s create a sample Visualforce page(AccountDataTable.page) with a list of Account records displayed in a <apex:pageBlockTable> component.

<apex:page controller="AccountDataController" tabStyle="Account">

  <apex:pageBlock title="Account Data Table">

    <apex:pageBlockTable value="{!accounts}" var="account">
      <apex:column value="{!account.id}"/>
      <apex:column value="{!account.name}"/>
      <apex:column value="{!account.description}"/>
      <apex:column value="{!account.SLA__c}"/>
      <apex:column value="{!account.Active__c}"/>
    </apex:pageBlockTable>

  </apex:pageBlock>
</apex:page>

Related controller code(AccountDataController.cls)

public with sharing class AccountDataController {

  //constructor
  public AccountDataController() {
  }

  //list of accounts
  public List<Account> accounts {
    get {
      if(accounts != null) {
        return accounts;
      } else {
        accounts = [Select Id, name, Active__c, SLA__c, Description from Account limit 10];
        return accounts;
      }
    }
    set;
  }
}
Account Data Table

Account Table

Now, let’s create *another* Visualforce page with the contentType attribute set to “application/vnd.ms-excel#AccountTable.xls”. This Visualforce page is linked to the AccountDataController.cls controller that we have used in the AccountDataTable.page.


<apex:page controller="AccountDataController" contentType="application/vnd.ms-excel#AccountTable.xls" showHeader="false" standardStylesheets="false">

  <apex:pageBlock >
    <apex:dataTable value="{!accounts}" var="account">
      <apex:column value="{!account.id}"/>
      <apex:column value="{!account.name}"/>
      <apex:column value="{!account.description}"/>
      <apex:column value="{!account.SLA__c}"/>
      <apex:column value="{!account.Active__c}"/>
   </apex:dataTable>
 </apex:pageBlock>

</apex:page>

There are 2 things to note in this Visualforce page. First, I’m using <apex:dataTable> instead of <apex:pageBlockTable>. The reason being that the generated excel file includes some javascript code at the top along with the data. Replacing <apex:pageBlockTable> with the <apex:dataTable> resolved this issue(not sure why), and removed the javascript code from the excel file. Second thing to note is the showHeader and standardStyleSheets attribute in the <apex:page> component is set to false. The contentType attribute is responsible for transforming this page into an excel file.

We are now ready to add the “Export to Excel” button to the AccountData.page as follows:

<apex:page controller="AccountDataController" tabStyle="Account">

  <apex:form >
    <apex:pageBlock title="Account Data Table">
      <apex:pageBlockButtons >
        <apex:commandButton action="{! exportToExcel }" value="Export To Excel"/>
      </apex:pageBlockButtons>
      <apex:pageBlockTable value="{!accounts}" var="account">
        <apex:column value="{!account.id}"/>
        <apex:column value="{!account.name}"/>
        <apex:column value="{!account.description}"/>
        <apex:column value="{!account.SLA__c}"/>
        <apex:column value="{!account.Active__c}"/>
      </apex:pageBlockTable>

    </apex:pageBlock>
  </apex:form>
</apex:page>

Add the following method to the controller.

//export to excel - returns a page reference to the AccountDataExcel page
 public PageReference exportToExcel() {
   return Page.AccountDataExcel;
 }

Export To Excel button

And voila! When you click the button, your browser will download the data in an excel file. I call this method the Wizard technique because it mirrors the pattern(more than one Visualforce page linked to the same controller) used to create a wizard based form on the Force.com platform.

– @anup

Tagged , , ,

Salesforce: ActionStatus with disabled button and “processing” image. 100% on-platform.


This awesome little coding tip is courtesy of l-dawg (not his real name) and very useful. We’ve read lots about how cool ActionStatus’ can be but he’s discovered a way to disable the button that initiates the action, add in a nice little .gif to show progress, and all of this 100% in Visualforce. No static resources, no javascript just good ol’ Visualforce loving. The code goes a little something like this:


<apex:page standardController="Account">

  <apex:form>
      <apex:pageblock title="Account">
       <apex:actionStatus id="mySaveStatus1">
         <apex:facet name="stop">
             <apex:commandButton value="Save Mappings" action="{!save}" rerender="dummy" status="mySaveStatus1"/>
         </apex:facet>
         <apex:facet name="start">
             <apex:outputPanel >
                   <apex:image value="/img/loading32.gif" style="height: 15px;"/>
                   <apex:commandButton value="Processing..." status="mySaveStatus1" disabled="true"/>
               </apex:outputPanel>
           </apex:facet>
        </apex:actionStatus>
      </apex:pageblock>
  </apex:form>

</apex:page>

And the result is a button that goes from this:

To this:

Tagged , , ,