Force.com Canvas Application in Visualforce - How to get Started

Getting Started with Force.com Canvas 

Salesforce in Summer'13 released the Canvas App feature, allowing user to integrate third party application inside Salesforce. Altogether, the objective is, you can now design any application on Java/Ruby or any platform and make them available on top of Salesforce as part of Salesforce experience.

The Force.com altogether have saved lot of time of redesigning and integrating external applications, now you can easily integrate technology within Salesforce.com

In this article, I am sharing quick steps that you can follow to create your 'first canvas application' and plug it inside a Visualforce Page for user to access.

* You can design third-party application in any language an integrate inside, but you have to make sure that application has a secure URL (HTTPS)

Scenarios when you would be needing Force.com Canvas App : 

1. For Web based Applications : Other platform cloud apps that I like to connect to Salesforce (my current scenario)
2. For Enterprise Wide Desktop Applications : A large organization that has many existing application and would like to bring all apps under one hood for whole organization

Where will they appear  

The easiest approach is integrating canvas application inside Visualforce page, which I would be doing here

Application Size Considerations
Standard frame size is 800 (px) wide but you can always resize them on Visualforce Page

For the demonstration, I am creating an Heroku Application, as Salesforce is now tightly integrated with Heorku, so instead of creating a Java application on desktop with (Jsp/Servlet) I am creating application right from Salesforce and hosting it on heroku, after creating application, I have published my application on Visualforce page that user can access easily

How to Quick Start : 

Go to Heroku  at https://www.heroku.com/   (this will be platform where you will host your application)

Make an account and login through window, filling username/password

Come back to your Salesforce Account
Go to Setup -> Type Canvas

 Click on button to create a new Heroku Application

Fill up credential to create the first application

Publish the Application :
You have to publish the application explicitly inside Salesforce to make it available to usage

After the publishing application , you can always verify the availability of application on your Heroku Account

Clearly in this case, the application can easily be seen listed on Heroku and can also be accessed from Heroku Account. Clearly for my demonstration, I can access the application through the link below

http://oyecode.herokuapp.com/

Publishing Page through Visualforce :

You can display canvas application on a visualforce page in a number of ways, There different ways of referencing are using

1. applicationName
2. developerName
3. namespacePrefix

I am using 'developername' here for demonstration which is listed on connected application list as shown below

Source Code for Visualforce : 
Simply using <apex:canvasapp /> component you can plugin the hosted canvas app inside any visualforce page. The one liner code below explains that I used developername as id to find the application

Force.com Application inside Visualforce : 

This is how the application looks like inside VisualForce page

How to modify my application and push it back to Heroku ? 

Read other articles here

• Getting Started with Heroku - How to configure and manage the code
• Understanding Heroku Platform
• How to Install and Configure Git with Heroku 

Also to read more about canvas you can go through Salesforce.com Canvas Guide for in-detail descriptions

See how to embed Facebook Application hosted on Heroku in Salesforce