Bubble Chart

Today is my last day of training so I thought I'd try to build another chart capitalizing on some of the harder pre-work that was done yesterday.  I'd like to try my hand at a radar chart sometime but with the time allotted, I took on the bubble chart.  Here is the finished product.  Similar to the bar chart, this chart is embedded in a vf page which passes to the Flex object the session id and the account id. 

It has 3 data components per record:
X: StageName
Y: Probability
Radius: Amount

The chart could be useful for salesforce users to surface high value opportunities for a given account.


Lessons Learned:
I had this weird effect where my entire data area was plotted as orange.  When hovering over the orange, I could see my two records and the related X, Y, and R attributes.  I suspect that this was because my data elements had different data types.  Only when I removed StageName from the plotted data did the orange block go away.  The only thing that could resolve it was to create tags in my chart for the Horizontal and Vertical axis.  Within these tags, I specified the category fields as StageName and Probability.  Only after adding these tags did my bubbles plot as above.  Here's the relevant section from the mxml:

        <mx:BubbleChart
            id="mybubblechart"
            showDataTips="true"
            >
            <mx:horizontalAxis>
                <mx:CategoryAxis   title="Opportunity Stage"  categoryField="StageName" dataProvider="{opps}"/>   
            </mx:horizontalAxis>
           
            <mx:verticalAxis>
                <mx:CategoryAxis  title="User Probability" categoryField="User_Probability__c" dataProvider="{opps}"/>
            </mx:verticalAxis>
           
            <mx:series>               
                <mx:BubbleSeries
                    xField="StageName"
                    yField="User_Probability__c"
                    radiusField="Amount_Num__c"
                    fill="{sc1}"
                    stroke="{stroke1}"
                    dataProvider="{opps}"/>
            </mx:series>               
        </mx:BubbleChart>


I think that there will need to be a good amount of data massaging done within salesforce for the data to be presented in some interesting ways.  For now, this gives some perspective on LOE and feasibility.

Flex and Charts in Salesforce - Continued

As I was saying, the mashup reference that salesforce published is definitely old.  The login object they refer to and some of the query syntax seemed to be no longer supported in Flex 4. 

In the end, I used the same approach that the author did: hardcode initially to prove that login and query work.  Then, parameterize to get the chart more business-ready.

Here's what I learned.

LoginBySessionId
Logging in by credentials (LoginbyCredentials) was very easy.  The problem is I wanted this application to work from within an existing salesforce session and I didn't want the user to login again.  I found that the session Id could be reused, however, LoginBySessionId was less obvious in implementation.

It took a few tries but after determining that I was getting the session Id, I started getting an error that I was not using the correct URL.  To fix this, I just needed to set the url property to the value from my salesforce session:

                app.serverUrl = parameters.surl;
                app.loginBySessionId(parameters.sid);

So, putting this into a function:

            private function init():void
            {
                _sid = parameters.sid;
                _webWrapper=app.wrapper;

                app.serverUrl = parameters.surl;
                app.loginBySessionId(parameters.sid);
            }
           
init() gets called from the property creationComplete on the Application tag.

Getting past the URL error, I started to get an error stating that my session id was invalid.  A quick google search turned up this helpful community post which indicated that the global API session value that is used in the mashup guide is not a reliable way to get the session id.  To get the correct session id, you have to write a controller extension and fetch the id for the user.  Here's the link to the community thread:

http://forums.sforce.com/t5/Adobe-Flash-Builder-for-Force/Invalid-Session-Id-using-Flex/m-p/156531

Executing a Salesforce Query from Flex
The mashup guide shows the AsyncResponder approach to fetching data from salesforce.  I could not use this method for my use case so I used the LoginResultEvent to invoke my query.  The query comes back as an array so the only way I could see if my query was working was to use Alert.Show to show the contents.  Here is the class that should be imported:

• import mx.utils.ObjectUtil;

and the syntax to print the array contents:

• Alert.show(ObjectUtil.toString(result));

where "result" is a variable of type DataArrayCollection.

Where is the SWF file generated?
The Mashup guide complete skips this detail!  The SWF gets generated in your working bin-debug folder.  Just upload your SWF to the static resources in Salesforce to reference it in your VF page.

Debugging
Lots of use of Alert.Show to see what was going on.  I never figured out the debugger but Alert.Show and the ObjectUtil class were a ton of help to see what I was getting and when.

Error 2032???
Many thanks to this blogger for posting this finding.  The error was being thrown I don't think I would have ever found the fix for this error code:

http://blog.prasannadeshpande.com/2010/02/salesforce-flex-error-2032-stream-error-url/

Flex and Charts in SFDC

The second case that I wanted to try out was building a F3 web application for Salesforce.  I tried to follow this mashup guide but again, the reference on the salesforce wiki seemed to be stale. 

http://wiki.developerforce.com/index.php/Tutorial:_Creating_Flex_Salesforce_Mashups

It took some head pounding and a bunch of google searches but I eventually got it working in our org.  More on this tomorrow!

Building a Desktop App for Salesforce using Flex

Flex for Force.com offers the promise of some nice ui features and offline capabilities. I wanted to explore how useful this potentially is for my employer and understand the level of effort in implementation. Here are some notes that may be useful.

Why Flex?
I chose this topic because salesforce.com has been actively promoting it as another tool to develop custom ui on the force.com platform. It provides salesforce and force.com professionals with another ui option besides the standard ui components or visualforce and allows for mobile/offline desktop applications to be built as well. My employer has some potential use cases where such an offline application may be beneficial so this topic became worth exploring.

What is the difference between Flex and Flash?
I do not know. Here is someone who attempts to explain the difference:

http://theresidentalien.typepad.com/ginormous/2009/02/the-difference-between-flex-and-flash.html

Where do I go to learn more?
First, I do not know who manages the content on the salesforce wiki site but I found a lot of links to old materials which made setting up the environment painful. Here are some links that I found helpful:

Salesforce Overview

• http://developer.force.com/flashbuilder

Salesforce Quick Start Tutorial

• http://www.salesforce.com/us/developer/docs/flashbuilder/salesforce_flash_builder_quickstart.pdf

Additional Documentation

• http://developerforce.s3.amazonaws.com/website/afb/docs/salesforce_flash_builder.pdf

So one other confusing aspect to this is that Flex for Force.com (F3) is not the same as Flex/Flash Builder 4.0 for Eclipse. The F3 is actually a salesforce-specific implementation of the Flex builder for Eclipse (more on this later). They both have the same 60 day trial limitation.


Getting Started
So I wanted to explore two uses of F3: 1) an offline desktop application and 2) an online salesforce.com embedded chart or app. In this post, I'll cover the desktop application.

The desktop app runs on the Adobe AIR platform. Salesforce provides the following diagram which is helpful in understanding how an offline application will run.


Since there is a mobile database, you'll need to be mindful of data size, schema changes, and other synchronization issues. Fortunately, as explained below, the F3 adaptation provides a framework for handling these issues.

The quick start guide covers the creation of a standalone desktop application and really helped with the learning curve.

Alot of this is covered in the quick start guide so refer to it for details. I'll try to highlight some things that I observed that were omitted from the guide.

First, you need to download the F3 Eclipse Plug in. This should be available from the first link above. Just be sure you are downloading the Force.com version of Flex.

After your download, you'll need to take care of a few setup tasks with Salesforce:

1. Setup your user account as a "Offline User"

• Login to Salesforce as an admin
• Navigate to Setup -> My Profile
• Set "Offline User" = True (checked)

2. Setup a Briefcase configuration

• Login to Salesforce as an admin
• Navigate to Setup -> Desktop Admin -> Offline Briefcase Configuration
• Create a new configuration
• Add users/profiles that will have access to this configuration
• Add objects/relationships that will be viewed offline. The UI is somewhat confusing here so if your Flex app is going to read an object that has relationships to other objects, you'll need to be sure that you are making your core object and the related objects as well. In this screenshot you can see that I need a object called Customer Value Capture and its relationships to Opportunity and Contact.
  

3. Download Salesforce Enterprise WSDL

• Navigate to Setup -> Develop -> API
• Download Enterprise WSDL

If you follow the quick start guide, it'll show you how to import the WSDL to create a fiber on which your projects gui elements can bind. It will show you how to build a stand alone desktop application which allows a user to login, query accounts, edit existing accounts, create new accounts, and delete accounts. I followed the guide and modified it for my employer's use case.

Eclipse Plug-in
The Eclipse Plug-in implements a new perspective that allows the developer to use both gui/drag-n-drop development of ui elements and script-based development. Here you can see I've setup a data grid component, a button, and a few labels. With the quick start guide, most of the development was done using the source tab, but I found the design tab useful for understanding what certain script tabs were bringing into the ui.

The script view:


The design view:
Within a CDATA tag, Flex action scripts can be written to handle ui events. In my application, I have a button called Fetch My Events which, upon click, queries Events from Salesforce where the status <> Completed. Here is a look at the action script where you can see how Flex has implemented a variation of apex soql (notably, the use of "select *" is supported):


The F3 plug-in does a lot of nice things out-of-the-box for the developer. When you create a new F3 project, a login screen (and associated action script) is built for you.  There are some helpful details on how the login and asynchronous operations work here:

http://wiki.developerforce.com/index.php/Getting_Started_with_the_Force.com_Toolkit_for_Adobe_AIR_and_Flex

Additionally, all data management for your offline application is also prebuilt. This takes care of synch, local data, and conflict resolution!

The tag framework is similar to visualforce. Each tag has n properties which will tailor the particular component. Interestingly, when exploring the properties on one of the tags, I saw "gesture" related properties which indicate the platform supports touch devices (perhaps even the iphone!).

So for someone with no background in Flash or Flex, I was able to standup, with alot of help from the quick start guide, an offline application with the following capabilities:

• Login to Salesforce

• Query My Events
• Select an Event and see the record details

• Create a new Customer Value Capture (CVC) record from the Event detail
  
• Predefault values from the Event onto the CVC
• Save the CVC
• Set the Event to Completed

• Synch & Manage Conflicts

Limitations/Issues
There are some known limitations with Flex Builder 4.0 for Force.com:

Relationship Fields

• Force.com Flex desktop applications support relationship fields; however, you can't relate records created offline until you synchronize them with Salesforce.com. This is because Salesforce.com bases relationships on IDs that records receive only after you upload them to Salesforce.com.

Record Types

• Force.com Flex doesn't support record types.

Localization

• Force.com Flex doesn't support the localization of dates, currency, and numbers, nor does it support right-to-left languages. However, the FieldElement and LabelAndField components support translated text.

Field-Level Security

• Force.com Flex doesn't support Field-Level Security in desktop applications.

Other Areas to Explore

There are some additional areas that I'd like to explore with additional time.  Since this is a desktop application, we'll need to know how to package and deploy it.  Also, it would be interesting to see how the application behaves in a mobile device such as a blackberry or iphone/ipad.

Thoughts?  Comments?