Wednesday, October 27, 2010

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
Salesforce Quick Start Tutorial
Additional Documentation
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?

No comments:

Post a Comment