Thursday, April 17, 2014

Visualforce & Visual Workflow & Force.com Sites

Introduction

The true potential of  Visual Workflow or simply Flow is either not known to many or is often under estimated. But many are beginning to realize the versatility of Flows and are using them for many different purposes, ranging from case management applications to help agents gather only the required information, to surveys, assessment test, buttons that can close cases while sending emails, converted leads, lead de-duplication etc. Very interesting implementations of Flows are popping up everywhere. But please be careful, just because you can use a Flow to clean your data or close a case does not mean you should do it. Always use the KISS principle when developing applications and as a true "Salesforcedotcomer" always choose configuration over code. 
Today I would like to show you how amazingly simple it is to include your Flows in a Visualforce page and expose this to everyone on a Force.com site. Does that sound exciting? ... it does to me, so let's dive in.

Flows and Visualforce


I will assume here that you have already created a flow called "CustomerSurvey". Creating Flows will be the subject for a different day, but if you want to create a Flow now to try this out, please check out this article: Visual Workflow: Freedom of Choice

Including a flow in a Visualforce page is ridiculously easy in Salesforce. Create a simple Visualforce page that looks like this
 <apex:page sidebar="false" showHeader="false" standardStylesheets="false">  
   <flow:interview name="CustomerSurvey" />  
 </apex:page>  

As I said ridiculously easy. All you need is the interview component and set it to the API name of the Flow. That's it. For this Visualforce page we do not even need a controller or a controller extension. If you intend to expose this Visualforce page which contains the Flow on a Force.com site, branded according to your companies look-and-feel, you can set the standardStyleSheets, sidebar and showHeader Properties to false as done above. You can then apply your own style sheets directly to the page or to components of the Flow. Check out this page on how to style Flow components: Customizing a Flow's User Interface.
I have however made the experience that applying custom style sheets to Flows can be a pain in the place where the sun doesn't shine. The scripting involved can get quite heavy. This is especially true if you want to embed your brand new Force.com site which now holds your Flow into a website that has it's own unique styles. Normally you would do this using Iframes and have to mimic the styles of the website within your Visualforce and Flows ... jackkk.

So what if you what to pass parameters to your Flow?. Also ridiculously easy. You can use the param component like this:
 <apex:page sidebar="false" showHeader="false" standardStylesheets="false">  
   <flow:interview name="CustomerSurvey">  
        <apex:param name="lang" value="{!$CurrentPage.parameters.lang}" />   
   </flow:interview>  
 </apex:page>  

Still no controller or controller extension. But what if you wanted to do more complex stuff like aggregate information from different sources and make it available to the Flow?. Then you have to start thinking about adding a controller. For example, imagine instead of adding a "lang" parameter to the URL, we decided to dynamically determine the user's language depending on the Geo-Location. You will need to do this in a controller and then bind the value to the page such that the Flow can use it to show the Survey in the appropriate language.
 <apex:page controller="CustomerSurveyController" sidebar="false" showHeader="false" standardStylesheets="false">  
       <flow:interview name="CustomerSurvey" interview="{!surveyFlow}"/>  
        <apex:param name="lang" value="{!language}" />   
   </flow:interview>  
 </apex:page>  

You controller could look something like this
 public class CustomerSurveyController{  
      public Flow.Interview.CustomerSurvey surveyFlow { get; set; }  
      public String language { get; set; }  
      public CustomerSurveyController(){  
            myflow = new Flow.Interview.CustomerSurvey(new Map<String, Object>());  
            language = determineLanguageFromGeoLocation();  
      }  
      public String determineLanguageFromGeoLocation(){  
           String lang;  
           return lang;  
      }  
 }  

and your page like this:

Force.com Sites


Creating a force.com Site involves two things
- choosing and registering a domain and
- creating the site by specifying it's contents (Visualforce page) and it's sub domain.

When creating the site, your page could look like this:


Please visit this site on details of how to create sites Introduction to Sites


Conclusion


I hope you found this short and relatively straight forward article on Visualforce, Flows and Sites very useful. The results which in this case would be a Flow embedded in a Visualforce page and exposed using a Force.com Site could then be embedded into a public website using iframes.
As usual I encourage you to challenge the contents of this post, and add value to it by offering your thoughts, alternative solutions etc. I appreciate. God bless. 


No comments:

Post a Comment