Implementing a Data Driven Menu Using jQuery

by Dave Carroll on January 13, 2010 at 11:58 AM

A couple of days ago a colleague of mine forwarded a rant post by a developer new to the Force.com platform.  Seems this developer is an ace at Cold Fusion but is now trying his hand at Apex and Visualforce.  The problem that he described in his post was around generating a dynamic, data driven menu-type navigation system for his page.  In this post I will present one method of doing this.  This is likely not the only method, nor may it be the best method for your use case.  My hope is that the techniques that I demonstrate can be modified for other use cases.

Picture 1

Before going any farther, I want to recognize Soh Tanaka and thank him for a very nicely done Sexy Drop Down Menu w/jQuery and CSS tutorial. I will be using his code for this demonstration.

Click Data Driven Menu with jQuery for the full wiki article.

Comments (7) | TrackBack (0) Save to del.icio.us Digg this story

Salesforce.com and the Adobe Flash Platform Webinar

by Jon Mountjoy on December 15, 2009 at 03:27 AM

Adobe is hosting a webinar that you may be interested in - Salesforce.com and the Adobe Flash Platform Webinar. It's on Thursday, December 17 at 11 AM Pacific.

From their web page: "Join us for a demonstration that will showcase how Adobe and salesforce.com unite the power of the Force.com platform with the richness and ubiquity of the Adobe Flash Platform to enable a new generation of cloud-based rich Internet applications (RIAs)."

If you're new to building apps that harness Force.com and Flash - check out our Adobe Flashbuilder for Force.com as well.

Comments (0) | TrackBack (0) Save to del.icio.us Digg this story

Interesting Links 2009-December-10

by Jon Mountjoy on December 10, 2009 at 05:22 AM

Interesting external blog posts related to Force.com development that caught my eye during this past week or two.

Comments (2) | TrackBack (0) Save to del.icio.us Digg this story

Ready To Ride the Google Wave session recording and code posted

by Quinton Wall on November 30, 2009 at 10:22 PM

I have had a lot of people asking me when the session recording for my recent Dreamforce presentation Ready To Ride the Google Wave will be available on the internet. Good news is it now available on youtube,  and slides may be downloaded in pdf.

 

In addition, I have uploaded all the source code from both demonstrations (Sassy the Simple Wave, and Boohyah Mobile.) You will find some simple installation instructions contained within each zip but here is a quick run through of what you will need:

Pre-Requisites:

Download the Force.com for Google App Engine toolkit, and follow the instructions on how to set it up.

Quick Steps:

1.  Create a new Google Web Application Project, making sure you uncheck "Use Google Web Toolkit"

GoogleWebAppProject Uncheck
 
 

2. Set up your build path to be similar to screenshot provided. (note most of the jars required will be part of the Force.com for Google App Engine toolkit). Make sure you use Java 1.6

Java build path
 

3. Download the sample code for Sassy the Simple Wave, or Boohyah Mobile. (I suggest you start with Sassy to get familar with the basics first.) Make sure you pay special attention to the settings in the web.xml, app-engine.xml files.

4. Extend, modify, re-use the code to build some wildly creative Google Wave robots which can interact with Salesforce.com in new and imaginative ways.

Follow-up Items:

When you have built something cool, make sure you tell us about it and share!

Comments (0) | TrackBack (0) Save to del.icio.us Digg this story

Adobe Flash Builder for Force.com

by Jon Mountjoy on October 25, 2009 at 11:36 PM

ppp.pngImagine you're traveling in the outback, driving your 4x4 up a dry riverbed, leaving behind a long trail of brown dust as you wend your way to the next meter point, where you measure the water table level and enter it into your Force.com application. Miles from nowhere, miles from any wifi or satellite connection, with nothing in the sky but circling scavenging birds, you interact with the cloud.

That's the power of Adobe© Flash© Builder™ for Force.com—it lets you build Rich Internet Applications (RIAs) that combine the power of the Adobe Flash Platform and the Force.com cloud computing platform.

The toolset, developed jointly by Adobe and salesforce.com, has a number of cool features, for example:

  • Online and offline data synchronization and management
  • A local data store, letting you create apps that work even when they're not connected
  • When you do connect (hungry and parched), you can make use of the conflict resolution service to help sync the changes back to Force.com app.
  • The IDE lets you compose the applications effortlessly too, and includes a gamut of user interface components for presenting, and visualizing your data - including charting and animation.

Adobe Flash Builder for Force.com is currently in developer preview; so while it's not suitable for production work, it's just fine for you to start exploring.

Register to download the toolkit, and to attend the upcoming webinar that covers all the details of building RIAs for Force.com!

Here's a vid that shows much of it in action:

Comments (9) | TrackBack (0) Save to del.icio.us Digg this story

Interesting Links 2009-October-09

by Jon Mountjoy on October 9, 2009 at 03:31 AM

Something new - I thought I'd share interesting external blog posts related to Force.com that I come across, every week or two. LMK if you like the idea.

Comments (3) | TrackBack (0) Save to del.icio.us Digg this story

Passing Javascript values to Apex Controller

by Dave Carroll on October 2, 2009 at 11:17 AM

Wes Nolte posted a great tip on his blog Silver Lining on passing javascript values to an Apex controller.  After reading his post I realized that there is another way to skin that cat using ActionFunction and Param tags.

ActionFunction results in a javascript function being rendered on the page.  Once that function is rendered on the page you can exercise it from within other javascript.  The function that is rendered will cause a post to be executed in the same way a CommandButton or CommandLink will.

A common technique for form posts is to create properties or getter/setter pairs for fields in your Apex class that can be bound to hidden input fields on the form.  But, what if you don't want or need to persist the data from your post?  You may want to send some values that have been obtained via javascript to the controller to use in the action but don't need to be persisted in the view state.  You can do this with the Param tag.

The following Visualforce page illustrates this concept.

<apex:page controller="ActionPageController">
    <apex:form >

        <apex:actionFunction name="hitMe" action="{!iWantMyJSValues}" rerender="jsvalues">
            <apex:param name="one" value="" />
            <apex:param name="two" value="" />
        </apex:actionFunction>
       
        <apex:outputPanel id="jsvalues">
            <apex:outputText value="Value one: {!valueOne}" /><br/>
            <apex:outputText value="Value two: {!valueTwo}" /><br />           
        </apex:outputPanel>
       
        <span style="cursor: pointer;"
            onclick="hitMe(Date(), 'best shot')">Hit Me</span>
    </apex:form>
</apex:page>

When the page above is rendered a javascript function called hitMe will be created.  You can see that I'm hooking the onclick event of the standard HTML span tag to invoke the hitMe method.  I'm passing in a new instance of the current date and time followed by a javascript string value.

The controller is show below.

public with sharing class ActionPageController {

    public String valueOne { get; set; }
    public String valueTwo { get; set; }
   
    public PageReference iWantMyJSValues() {
        valueOne = Apexpages.currentPage().getParameters().get('one');
        valueTwo = Apexpages.currentPage().getParameters().get('two');
        return null;
    }
}

Here I have created two properties to hold the values passed in.  This is for illustration purposes.  I could easily choose not save either of the values. The key is that I am getting access to the javascript values through the curretPage().getParameters() map. 

To see what is happening it's useful to look at the firebug log of the actionFunction post.

Screen-capture-182

You can see that the Param tags caused to post parameters to be included in the post, "one" and "two". The key is that getParameters() not only applies to url query parameters but also to post parameters. One thing to keep in mind is that the order that you define the param tags is the order that you should pass your values to the actionFunction generated javascript function.  You are essentially defining the signature of the generated javascript function with

<actionFunction myfunc>
<param one>
<param two>
to result in
function myFunc(one, two) {}

You can give this a try by pasting the page code into a new page and the controller code into a new Apex class.

Cheers,

DevAngel

Comments (5) | TrackBack (0) Save to del.icio.us Digg this story

Getting in Front of the Wave

by Dave Carroll on September 29, 2009 at 07:58 AM

On Wednesday, September 30th, Google will open up their Wave preview to about 100,000 people.  Details are at Google Wave Developer Blog and The Official Google Blog I am excited to announce that we have put together a new demo on how you might leverage the Wave platform on salesforce.com and how you might leverage salesforce.com from Wave.

Wave is a truly exciting and seminal Cloud technology.  Google Wave was invented by two brothers Jens Rasmussen and Lars Rasmussen at Google that builds on the concepts of AJAX combined with fresh look at Operation Transformation.  It's difficult at this point in time to fully understand the ways in which this technology may transform web based communication.  It will be up to the community of developers working within and without the enterprise to realize the evident potential of Wave.

From a technical perspective, Wave has the ability to interact with other cloud platforms, like the Force.com platform.  It is this interaction that we have demonstrated in relatively short time frame in the demonstration announced in this post.

The use case for the demo is a fictitious Mobile Services Company named Booyah.  This company asks customers to register the products that they purchase and one piece of information that is returned upon registration is an email address for support.  The email address is actually to a Wave robot created by the company's service and support organization.  When a customer encounters a problem with their product, they can begin the process of resolution by contacting the robot from Google Wave.

This initial contact begins an interaction to provide results from the company's knowledge base, which of course is implemented using salesforce.com's Service Cloud.  Through a short series of questions and responses a list of possible solutions to the customers problem can be presented.

Screen-capture-179


Behind the scenes, the robot identifies the customer by her Wave id and can tailor the interaction based on the customers purchase and support history providing a personalized yet automated path to resolution.  The robot also creates a case on the salesforce.com side so that this support interaction can be managed by Booyah.

To take the experience beyond a simple knowledge base search, the customer also has the option of requesting a live chat with an available support representative.  This is where Google Wave really starts to shine.  If none of the suggested solutions work for the customer, she can simply click a link to request a chat.  Wave sends this request to the robot which in turn makes a request to salesforce.com to find an available representative.  That representative is then added to the wave as a participant and the personalized service begins.

Behind the scenes the robot request is evaluated by a salesforce.com web service built in Force.com Code.  When the representative is found the web service creates a task and a reminder for the task and assigns it to the representative.  The representative is, of course, working in the salesforce.com UI and sees an alert window as the reminder is triggered.  The representative can simply click on the link to the case shown in the alert window to access the case. 

The cool part about this is that when the case was created, enough information about the wave was included so that the active wave could be embedded directly into the layout of the Case detail page.  This embedded Wave has full interactive capability so that the support representative can carry on the conversation with the customer from the Case detail page.  And, the wave, which was the original channel for the support case can be accessed at any point in time later, including all the interaction with the customer.

I'm confident that with the creative minds in the Force.com community, as evidenced by the fantastic Sites created during our Sites contest, that many more and truly valuable use cases can be implemented by combining these two amazing platforms.

If you want to learn more about creating Force.com and Wave solutions be sure to attend the Riding the (Google) Wave session at Dreamforce this year.

You can also stay up-to-date on Google Wave at the Google Wave Developer Blog.

Comments (7) | TrackBack (0) Save to del.icio.us Digg this story

Action Chaining in Visualforce

by Dave Carroll on September 10, 2009 at 03:45 PM

Action chaining is a technique to handle the infamous "MIXED_DML_OPERATION, DML operation on setup object is not permitted Error" problem.

You may not know it but there are two types of objects that you can interact with on the platform. One is "setup" object and the other is a "non-setup" object. A "setup" object is one that must be edited from the setup or builder area of the platform. These object include the User object, Ogranization object, Email templates and so on.

See this article for details DML operations of a non-setup sObject and a setup sObject

Read the full article and check out the source code at Visualforce Action Chaining

See you at Dreamforce!!

Dave Carroll

Comments (0) | TrackBack (0) Save to del.icio.us Digg this story

Building Rich Cloud Applications with Force.com and Flex

by Dave Carroll on September 2, 2009 at 02:44 PM

Combining the power of the cloud and the client allows developers to have the best of both worlds' easy deployment and full client capabilities. Salesforce.com's cloud platform, called Force.com, and the Flash Platform are two proven and reliable choices for building these types of Rich Cloud Applications. Last week I co-hosted a webinar called "Developing Rich User Interfaces on Force.com Using Adobe Flex" in which Ryan Marples (from Salesforce.com) and I walked through the two platforms and how to use them together to build great software. If you didn't have the chance to join the webinar then please go watch the recording and let us know what you think.
via www.jamesward.com


James Ward, preeminent Flex Evangelist has an excellent write up on the webinar app that was demo'd. Includes useful source for manipulating Flex items.

Thanks James!

Comments (0) | TrackBack (0) Save to del.icio.us Digg this story

Next »