Tuesday, July 21, 2009

How to fetch Salesforce.com data in to a Flex Application - Part II

In the first part of this blog we discussed about how to deploy the application into Sales Force. Now in this blog we will see how to fetch the data from Sales Force and displaying it in the normal web applications or any desktop application. If we use Desktop(AIR) applications, even we can use offline capabilities also.

First we will see, what we will require to implement this solution apart from Flex Builder and Sales Force.

1. Sales Force account.

2. User Security Token

Note : We required this , if we try to access the account from outside a specific domain or IP address range.

3. Flex and AIR toolkits for Sales Force.

Note: Download the toolkit from here.

Getting Security Token From Sales Force.com

1. Login into Sales Force.com using your account credentials.

2. Go to account administration page by clicking on Setup button.

3. Go to Personal Setup section and expand Personal Information button. Then click on Reset My Security Token. It will open a page where we will have a button called Reset Security Token. It will send a mail to email account which we have given at the time of registration.

Copy the token from mail and keep aside. You can find the token from in mail. See the screenshot given below for reference.

Creating the Flex application for displaying the Sales Force data

1. Open the Flex Builder and create a new web application.

2. Unzip the toolkit folder downloaded from Sales Force and copy the files force-air.swc, force-flex.swc from bin folder. Paste these files into the libs folder of Flex project.

Note: You can directly give the path to libraries, using library path in Flex Application properties Window.

3. We require a connection object to connect to Sales Force account. This Object should be alive till the end of the application. We can create the connection object by using the following tag.

This tag is available in the namespace called xmlns:salesforce="http://www.salesforce.com/". Connection class is the main and key class with in this namespace. This is the entry point into the Sales Force Cloud.

4. Then we required to authenticate with Sales Force to get the data. For this we need pass the Credentials along with the security token we have copied from the mail.

import com.salesforce.objects.LoginRequest;

import com.salesforce.AsyncResponder;

var loginReq:LoginRequest = new LoginRequest();

loginReq.username = "sample@gmail.com";

loginReq.password = "password1TOKEN";

Provide the Credentials using LoginRequest object. There is no special property for token. Just we need concatenate the token with the password and sent it to server.

5. Add the Login Result Handler to handle the result given by the Login Function Call.

loginReq.callback = new AsyncResponder(fnLoginResult);

6. Add Even Handler method fnLoginResult method to the application. Add required logic to the event handler method.

force.query("SELECT Id, LastName FROM Contact",new AsyncResponder(updateGrids));

Just we are executing a query against Sales Force Contact Object. This is also one kind of event. So we required to add an event handler method to handle the query execution results. Here updateGrids is my result handler method.

7. Add the required logic to handle the query execution results.

private function updateGrids(result:QueryResult):void

grid.dataProvider = result.records;


8. Add a data grid to the UI and assign the results given by query to it.

9. Save the application and click run.

You will be able to see the data return by the Query in grids.

In my next post, we will see how to get the data from Sales Force.com Web Services.

Sunday, July 12, 2009

Deploying Flex applications to SalesForce.com - Part1

Salesforce.com is a vendor of Customer Relationship Management(CRM) solutions, which it delivers to business over the internet using the SaaS(Software as Service) model. Sales Force is providing different Services and Products. Platform as the Service is one of the products.

Force.com Platform

Salesforce.com's Platform-as-a-Service product is known as the Force.com Platform. The platform allows external developers to create add-on applications that integrate into the main Sales force application and are hosted on salesforce.com's infrastructure.

These applications are built using Apex (a proprietary Java-like programming language for the Force.com Platform) and Visual force (an XML-like syntax for building user interfaces in HTML, AJAX or Flex).

Adobe Flex is a software development kit released by Adobe Systems for the development and deployment of cross-platform RIA(Rich Internet Applications) based on the Adobe Flash
platform. Flex applications can be written using Adobe Flex Builder or by using the freely available Flex compiler from Adobe.

In this post we are going to see how we can use the features of Adobe Flex in SalesForce.com. As we know, Flex has several advantages over other RIA technologies in terms of Rapid Development and Productivity etc. As flex has built based on Flash platform, it can provide very rich interfaces, more intuitive websites. Flex has very rich set of controls and Charting tools. Here i am using the Charting features of Flex inside the sale force.

To work on this example we require the following,

1. Flex Builder 2 or 3

Download the trial from here.

2. SalesForce.com account ( Developer Edition is also fine)

Get the Developer account from here.

3. The client systems whoever accessing this sample should have the Flash Player 9 or Later

Download the flash player from here.

Here We are going to create a simple chart which will show the Product Group Sales.

Steps for creating the Flex Application:

1. Open the Flex Builder and create a new project.

2. Open the Design view and Drag a Column Chart from Component Explorer to Design View.

3. Create a XML file which will have the data. Include this XML file in the application by using mx:XML tag instead of HTTP Service calls. If we use mx:XML tag it will embed the xml file into swf file at the of compile time itself. So that export this SWF file to Force.com will become very easy.

4. Add an image to the Application Control bar and specify the source. While specifying the Source use @Embed. So that it will embed the image into SWF file at the time of Compilation itself.

5. Set the Data provider to the chart and Configure the Category Axis and Series data fields.

6. Compile and Run the Application to Test the Application.

7. Now go to Project then Export to Release Build and follow the wizard steps. After finishing the steps it will create a new folder called bin-release. Use SWF file inside this folder instead of SWF file from Bin-Debug folder. Because the swf file from Bin-Release folder will be optimized for deployment and it will have less size than other swf file.

Now the Flex Application is ready to be deployed in Force.com. Follow the steps below to deploy it in Sales Force.

1. Open http://www.salesforce.com/platform/sites/ in the Browser.

2.Click on Customer Login and Enter Credentials and click Login.

3. You will be landed up in a default View.

4. Click on Visual Force Tab to see the Existing Applications deployed already into the page.

5. Click on setup Button on the top to Configure the Page. It will open Force.com site Administration Page.

6. Expand App Setup then expand Develop then click on Static Resources. It will open a list Static Resources already exported.

7. Click on new button to Exported the our newly created swf file. It will open a upload page.

Upload the required swf file and click save button. Then it will upload the page and display the File statistics.

8. Expand App Setup then Expand Create and Click on Tabs. It will display the list of all custom created Tabs.

9.Click on the edit button of required visual force page. It will open Custom Tab Information Page.

10. Click Start Here to see the Content/Source of the Visual Source Page. By Default it will open the code in read only mode. Click on Edit button to edit the APEX code.

11. The Code will have the several apex:pageBlock. Each Page block will represent a section on the Page. We need to add one more page block. Add the following code add new flash resource to the Page Block.

12. The Page block title will specify the title of the section in the visual force page. The Source swf file will be specified in apex:flash tag. We can set the width and height of flex application also.

Add the code and Click Save. Then the Page will reopened in read only mode. Then open the visual force page.

Great!! The application is deployed and ready to use.

Here in this sample, we used static and sample XML. Instead we can draw the data directly from the Sales Force using Sales Force.com web services.

I will be posting the this sample in Next Post.

Example Screen cast : Will be uploaded very soon.