Workbook Flow
Workbook Flow
Workbook Flow
© Copyright 2000–2014 salesforce.com, inc. All rights reserved. Salesforce.com is a registered trademark of salesforce.com, inc., as are other
names and marks. Other marks appearing herein may be trademarks of their respective owners.
Table of Contents
Table of Contents
Next Steps..........................................................................................................................................35
Addendum.........................................................................................................................................36
i
About the Cloud Flow Designer Workbook
System Requirements
To use the Cloud Flow Designer, we recommend:
• Windows® Internet Explorer® versions 8 through 11, Google® Chrome™, or Mozilla® Firefox®. Internet Explorer 6 and
7 are not supported.
• Adobe® Flash® Player version 10.1 and later. The minimum version required to run the Cloud Flow Designer is 10.0.
• A minimum browser resolution of 1024x768.
1
Tutorial #1: Creating a Tip Calculator Optional Step: Pre-configure Your Flow Using Step Elements
1. From Setup, click Create > Workflow & Approvals > Flows.
2. Click New Flow.
3. From the Palette in the left pane, click and drag a Step element onto the canvas.
4. Enter Bill Information Step into the Name field.
5. Press TAB, and the Unique Name field should automatically fill in.
6. In the Description field, enter Capture bill amount and service quality.
7. Click OK.
8. From the Palette in the left pane, click and drag another Step element onto the canvas, beneath the first one.
9. Enter Tip Amount Step into the Name field.
10. In the Description field, enter Display tip amount.
11. Click OK.
12. Click and drag an arrow connector from the bottom of the Bill Information Step onto the Tip Amount Step.
From the user’s perspective, all we need are two screens, representing input (bill amount, service quality) and output (tip
amount). However, at least one thing needs to happen that the user will never see: the calculation of the tip amount. We’ll
use a Formula resource for that later on.
Note: Steps aren’t valid elements for active flows. You can have a draft flow with Steps in it and can run it in the
draft state as an administrator, but you must replace the Steps with other elements before you can activate the flow
and let users run it.
1. From Setup, click Create > Workflow & Approvals > Flows.
2. Click New Flow.
3. From the Palette in the left pane, click and drag a Screen element onto the canvas.
2
Tutorial #1: Creating a Tip Calculator Step 1: Add a Screen Element to Capture the Bill Information
If you did the optional step to pre-configure your flow with Step elements, we need to convert the Step into a Screen.
The first thing we want to gather on the screen is the bill amount, so we need to add an input field for it.
The next thing we want to know is how the user rated their service, so we need a choice input field.
In the Choice Settings section, we need to set up four service level choices for the user. Choices are resources, and we can
create them here in the Screen overlay.
1. Click the arrow button to the right of the first Choice field, expand the CREATE NEW section, and select Choice.
2. In the Label field, type Excellent.
3. Set the Value Data Type to Number.
4. For Stored Value, enter 20, representing a 20% tip.
5. Click OK.
6. Click Add Choice to repeat these steps three more times, adding new choices with the following values.
7. Verify that your Screen overlay looks like this, then click OK.
3
Tutorial #1: Creating a Tip Calculator Step 2: Create Formulas to Calculate Tip Amount and Total
Bill
4
Tutorial #1: Creating a Tip Calculator Step 2: Create Formulas to Calculate Tip Amount and Total
Bill
8. Click OK.
If you click over to the Explorer tab again, you should now see TipAmount and TotalBill in the Formulas section.
5
Tutorial #1: Creating a Tip Calculator Step 3: Add a Screen to Display the Results
1. From the Palette in the left pane, click and drag a Screen element onto the canvas.
2. Enter Show Tip Summary into the Name field.
3. Press TAB, and the Unique Name field should automatically fill in.
If you did the optional step to pre-configure your flow with Step elements, we need to convert the second Step into a Screen.
1. Hover your mouse over the Tip Amount Step and click .
2. Change the Name field to Show Tip Summary.
3. Change the Unique Name field to Show_Tip_Summary.
The final text in the preview pane of the overlay should look like this:
You say the quality of service was {!Quality_of_Service}, so you should leave a tip of
{!TipAmount} for a total bill of {!TotalBill}.
6. Verify your Screen overlay looks like this, then click OK.
6
Tutorial #1: Creating a Tip Calculator Step 4: Save the Flow
7. If you didn’t already do it in the optional first step, click and drag an arrow connector from the Bill Information screen
element onto the Show Tip Summary screen element.
Tip: If you accidentally delete a selected element or connector from the canvas, don’t panic! Go up to the button bar
and click Undo ( ). If you undo too many changes, click Redo ( ).
Your Flow Designer main canvas should contain two Screen elements, as shown here.
7
Tutorial #1: Creating a Tip Calculator Step 5: Run the Flow
All flows must have an element designated as the start point. Let's do that now.
3. Click to set the Bill Information screen as the starting point for the flow.
4. Click Save again to save this change.
5. Click Close. You should be taken to the flow detail page.
1. From the flow detail page, click either the Run button at the top of the page, or the Run link in the Action column. The
flow should open up in a new window.
2. In the Bill Amount field, enter 100.00.
3. For Quality of Service, select Excellent.
4. Click Next.
5. The next screen should read: You say the quality of service was Excellent, so you should leave a tip of 20.00 for a total bill
of 120.00.
8
Tutorial #1: Creating a Tip Calculator Step 5: Run the Flow
6. Click Finish.
7. Close the flow window.
9
Tutorial #2: Creating a Sustainability Survey Step 1: Add a Screen Element to Capture Users’ Region
1. From Setup, click Create > Workflow & Approvals > Flows.
Tip: If you completed the Tip Calculator flow, you’ll see it here on the flow list page. In the Actions column,
the Edit link lets you edit the flow properties, such as its name and description. The Open link opens the flow
in the Flow Designer. Clicking the flow name takes you to the flow detail page.
The first thing we want to do on this screen is to welcome the user and tell them a little bit about the survey.
Next, we’ll ask users to identify which region they work in.
10
Tutorial #2: Creating a Sustainability Survey Step 2: Add and Configure a Decision Element
f. Click the arrow button to the right of the new Choice field, expand the CREATE NEW section, and select Choice.
g. In the Label field, type EMEA.
h. For Stored Value, enter EMEA.
i. Click OK.
6. Verify that your Screen overlay looks like this, then click OK.
4. Verify that your Decision overlay looks like this, and click OK.
11
Tutorial #2: Creating a Sustainability Survey Step 3: Add a Screen Element for the AMERICAS Option
5. Click and drag an arrow connector from the Screen element onto the new Decision element.
1. From the Palette in the left pane, click and drag a Screen element onto the canvas.
2. Enter Office and Commute Days into the Name field.
3. Change the Unique Name field to Get_Office_and_Commute_Days_AMERICAS.
We need two different bits of information from the user: what office they’re in, and the number of days they commute to
work. First we’ll ask for their office location.
a. Click the arrow button to the right of the first Choice field, expand the CREATE NEW section, and select Choice.
b. In the Label field, type US: San Francisco.
c. For Stored Value, enter SF.
d. Click OK.
e. Click Add Choice to repeat these steps two more times, adding new choices with the following values.
Next, we’ll ask users to tell us how many days they commute to work every week.
12
Tutorial #2: Creating a Sustainability Survey Step 4: Add a Screen Element for the EMEA Option
7. Click and drag an arrow connector from the Decision element onto this Screen element. A Decision Routing dialog box
appears.
8. Make sure Region: AMERICAS is selected, then click OK. A connector labeled as Region: AMERICAS should appear
between the Decision and the Screen we just created.
1. From the Palette in the left pane, click and drag a Screen element onto the canvas.
2. Enter Office and Commute Days into the Name field.
13
Tutorial #2: Creating a Sustainability Survey Step 4: Add a Screen Element for the EMEA Option
Again, we need two different bits of information from the user: what office they’re in, and the number of days they commute
to work. First we’ll ask for their office location.
a. Click the arrow button to the right of the first Choice field, expand the CREATE NEW section, and select Choice.
b. In the Label field, type UK: London.
c. For Stored Value, enter UK.
d. Click OK.
e. Click Add Choice to repeat these steps two more times, adding new choices with the following values.
Next, we’ll ask users to tell us how many days they commute to work every week.
7. Click and drag a connector from the Decision element onto this new Screen element.
14
Tutorial #2: Creating a Sustainability Survey Step 5: Collect Commute Information
Because you already set up the path pointing to the AMERICAS Screen, the Flow Designer knows that the second connector
coming out from the Decision element should automatically be labeled as Region: EMEA. Your diagram should look similar
to this now:
1. From the Palette in the left pane, click and drag a Screen element onto the canvas.
2. Enter Detailed Commute Information into the Name field.
3. Change the Unique Name field to Get_Detailed_Commute_Information.
We need three different types of information from the user. First, we’ll ask how long their round-trip commute is, in miles.
Next, we’ll ask how long they spend commuting each day.
Lastly, we’ll ask how much they spend on commute expenses every month.
15
Tutorial #2: Creating a Sustainability Survey Step 6: Collect Email Address
7. Click and drag a connector from the both the Americas and EMEA Screen elements onto this Screen element.
1. From the Palette in the left pane, click and drag a Screen element onto the canvas.
2. Enter Enter Your Email for Raffle into the Name field.
3. Change the Unique Name field to Get_Email_for_Raffle.
4. Click the Add a Field tab.
5. Under the OUTPUTS section, double-click to add Display Text.
6. Click the Display Text field in the preview pane to configure it.
7. On the Field Settings tab, enter EmailHeader in the Unique Name field.
8. In the text box, type in Enter your email address for the chance to win a $250 gift card!
9. Click back over to the Add a Field tab.
10. Under the INPUTS section, double-click to add a Textbox.
11. Click the Textbox field in the preview pane to configure it.
12. On the Field Settings tab, enter Email Address in the Label field.
13. Press TAB to fill in the Unique Name field.
14. Verify that your Screen overlay looks like this, then click OK.
16
Tutorial #2: Creating a Sustainability Survey Step 7: Thank the Respondents
15. Click and drag a connector from the previous Screen element onto this one.
1. From the Palette in the left pane, click and drag a Screen element onto the canvas.
2. Enter Thank You into the Name field.
3. Change the Unique Name field to Summary_and_Finish.
4. Click the Add a Field tab.
5. Under the OUTPUTS section, double-click to add Display Text.
6. Click the Display Text field in the preview pane to configure it.
7. On the Field Settings tab, enter Summary in the Unique Name field.
8. In the text box, type in Thank you for participating in the survey!
9. Verify that your Screen overlay looks like this, then click OK.
17
Tutorial #2: Creating a Sustainability Survey Step 8: Save the Flow
10. Click and drag a connector from the previous Screen element onto this one.
Your completed flow diagram should now look something like this:
All flows must have an element designated as the start point. Let’s do that now.
1. Hover your mouse over the first screen element and you’ll see icons appear in the upper right corner.
2. Click to set the welcome screen as the starting point for the flow.
3. Click Save again to save this change.
4. Click Close. You are taken to the flow detail page.
18
Tutorial #2: Creating a Sustainability Survey Step 9: Run the Flow
1. From the flow detail page, click either the Run button at the top of the page, or the Run link in the Action column. The
flow opens up in a new window.
2. Select AMERICAS.
3. Click Next.
4. Select US: New York.
5. Enter 3 for the number of days you commute to work.
6. Click Next.
7. For the next screen, indicate that your commute is 30 miles, takes 1 hour round-trip, and that you spend $71.40 on your
commute every month.
19
Tutorial #2: Creating a Sustainability Survey Step 9: Run the Flow
8. Click Next.
9. Enter an email address.
10. Click Next.
11. Click Finish.
12. Close the flow window.
20
Tutorial #3: Creating a Mortgage Calculator Step 1: Add a Screen Element to Capture Users' Information
1. From Setup, click Create > Workflow & Approvals > Flows.
2. Click New Flow.
3. From the Palette in the left pane, click and drag a Screen element onto the canvas.
4. Enter Enter Your Contact Info into the Name field.
5. Change the Unique Name to Get_Customer_Information.
6. Click the Add a Field tab.
7. Double-click and add three Textbox fields. Three blank textbox fields should show up in the right preview pane.
8. Click each textbox field to configure it as follows. Each must have the Required checkbox selected.
9. Verify that your Screen overlay looks like this, then click OK.
21
Tutorial #3: Creating a Mortgage Calculator Step 2: Add a Record Lookup Element
1. From the Palette in the left pane, click and drag a Record Lookup element onto the canvas.
2. Enter Does User Exist into the Name field.
3. Click the arrow button to the right of the Lookup field, expand the STANDARD section, and select Lead.
4. In the first line of your filter criteria:
a. Under Field, click the arrow button, expand the STANDARD section, and select FirstName.
b. Set the operator to equals.
c. Under Value, click the arrow button, expand the SCREEN INPUT FIELDS section, and select First_Name.
a. Under Field, click the arrow button, expand the STANDARD section, and select LastName.
b. Set the operator to equals.
c. Under Value, click the arrow button, expand the SCREEN INPUT FIELDS section, and select Last_Name.
a. Under Field, click the arrow button, expand the STANDARD section, and select Email.
b. Set the operator to equals.
c. Under Value, click the arrow button, expand the SCREEN INPUT FIELDS section, and select Email_Address.
9. Scroll down to the second set of fields. Let’s assign the returned record’s fields to variables in case we need to use them
later:
a. Under Field, click the arrow button, expand the STANDARD section, and select FirstName.
b. Under Variable, click the arrow button, expand the CREATE NEW section, and select Variable.
c. In the Variable overlay’s Unique Name field, enter User_First_Name.
d. Click OK.
e. Back on the Record Lookup overlay, click Add Row to add a second field variable assignment.
f. Click the arrow button on the new left-side field, expand the STANDARD section, and select LastName.
g. Create a new variable with the unique name of User_Last_Name.
h. Click OK on the Variable overlay.
i. Back on the Record Lookup overlay, click Add Row to add a third field variable assignment.
j. Click the arrow button on the new left-side field, expand the STANDARD section, and select Email.
k. Create a new variable with the unique name of User_Email.
l. Click OK on the Variable overlay.
10. Verify that your Record Lookup overlay looks like this, then click OK.
22
Tutorial #3: Creating a Mortgage Calculator Step 3: Save the Flow
11. Click and drag an arrow connector from the Enter Your Contact Info screen element onto the Record Lookup element.
All flows must have an element designated as the start point. Let's do that now.
23
Tutorial #3: Creating a Mortgage Calculator Step 4: Add a Decision Element
3. Click to set the Enter Your Contact Info screen as the starting point for the flow.
4. Click Save again to save this change.
1. From the Palette in the left pane, click and drag a Decision element onto the canvas.
2. Enter User Found? into the Name field.
3. In the Outcomes section, we'll set the criteria for the two outcomes of the decision: found or not found. The fields for
creating the first outcome already appear on the page. For Name, enter True.
4. For Unique Name, enter User_Found_True.
5. In the Resource field, click the arrow button, expand the RECORD LOOKUPS section, and select Does_User_Exist.
6. Set the operator to equals.
7. In the Value field, click the arrow button, expand the GLOBAL CONSTANT section, and select
$GlobalConstant.True. For more information about global constants, see “Global Constants Overview” in the online
help.
8. Next we need to set up the default outcome. This is the outcome that occurs when none of the other outcome conditions
are met. Since this is a Boolean decision—either the user is found or not—the default outcome can represent the False
path.
9. Verify that your Decision overlay looks like this, then click OK.
10. Click and drag an arrow connector from the Record Lookup element onto the Decision element.
24
Tutorial #3: Creating a Mortgage Calculator Step 5: Add a Screen Element to Collect Mortgage Information
1. From the Palette in the left pane, click and drag a Screen element onto the canvas.
2. Enter About Your Mortgage into the Name field.
3. Change the Unique Name to Get_Mortgage_Information.
4. Click the Add a Field tab.
5. Double-click and add a Currency field. It should show up in the right hand preview pane.
6. Click the Currency field in the preview pane to configure it.
a. On the Field Settings tab, enter Mortgage Amount in the Label field.
b. Make the field required.
a. On the Field Settings tab, enter Term (months) in the Label field.
b. Many mortgages have a 30-year term, so in the Default Value field, enter 360. This will display to the user as
ghost text in the field.
c. In the Scale field, enter 0.
The scale is the maximum number of digits allowed to the right of a number's decimal point. To keep things simple,
we'll restrict this field to whole numbers.
d. Make the field required.
a. On the Field Settings tab, enter Interest Rate (%) in the Label field.
b. In the Scale field, enter 3. For this number, we'll allow up to three digits to the right of the decimal point.
c. Make the field required.
11. Verify that your Screen overlay looks like this, then click OK.
25
Tutorial #3: Creating a Mortgage Calculator Step 6: Add a Record Create Element
12. Click and drag an arrow connector from the Decision element onto the About Your Mortgage Screen element.
13. In the Decision Routing dialog box, make sure that True is selected, then click OK.
26
Tutorial #3: Creating a Mortgage Calculator Step 6: Add a Record Create Element
Under Field, expand STANDARD and select: Under Value, expand SCREEN INPUT FIELDS and
select:
FirstName First_Name
LastName Last_Name
Email Email_Address
8. Verify that your Record Create overlay looks like this, then click OK.
Tip: You can capture the newly generated lead ID and assign it to a variable if you want to reference it elsewhere
in your flow. Just click the arrow button next to the Variable field, expand the CREATE NEW section, and
select Variable.
27
Tutorial #3: Creating a Mortgage Calculator Step 7: Add Apex to Power the Calculation
9. Click and drag an arrow connector from the Decision element onto the Record Create element. The connector should
automatically be labeled “False”.
10. Click and drag an arrow connector from the Record Create element onto the About Your Mortgage Screen element.
Once we've created the lead record, we can capture the user’s mortgage information.
11. Save your flow.
Your flow should now look similar to this:
1. From Setup, click Create > Workflow & Approvals > Flows.
2. Re-open the mortgage calculator flow.
28
Tutorial #3: Creating a Mortgage Calculator Step 8: Add an Apex Plug-in Element
3. Check the Palette. It should have a new section called MORTGAGE QUOTE that contains the Apex plug-in you just
created.
4. Click and drag the MortgageCalculator plug-in onto the canvas.
The class name and description have been pre-populated with the class name and description from within the Apex code.
5. In the Name field, type Calculate Quote.
6. Press TAB, and the Unique Name field should automatically fill in.
7. Configure the inputs for the plug-in:
a. For the Amount input, click the arrow button, expand the SCREEN INPUT FIELDS section, and select
Mortgage_Amount.
b. For the Rate input, click the arrow button, expand the SCREEN INPUT FIELDS section, and select
Interest_Rate.
c. For the Term input, click the arrow button, expand the SCREEN INPUT FIELDS section, and select Term_months.
9. Click OK.
10. Click and drag an arrow connector from the About Your Mortgage element to the Calculate Quote element.
29
Tutorial #3: Creating a Mortgage Calculator Step 9: Add the Final Screen
1. From the Palette in the left pane, click and drag a Screen element onto the canvas.
2. In the Name field, type Show Quote.
3. Press TAB, and the Unique Name field should automatically fill in.
4. Click the Add a Field tab.
5. Double-click and add a Display Text field.
6. Click the Display Text field in the preview pane.
7. For Unique Name, enter ThankYou.
8. In the text box, type: Thank you for contacting us for your mortgage business. Based on the
information you gave us, a X-month mortgage of Y would result in payments of Z per
month. We'll replace X, Y, and Z with values from the flow.
The final text in the preview pane of the overlay should look like this:
Thank you for contacting us for your mortgage business. Based on the information you gave
us, a {!Term_months}-month mortgage of {!Mortgage_Amount} would result in payments of
{!vaMonthlyAmount} per month.
9. Verify your Screen overlay looks like this, then click OK.
30
Tutorial #3: Creating a Mortgage Calculator Step 10: Run the Flow
10. Click and drag an arrow connector from the Calculate Quote element to the Show Quote element.
11. Click Save.
You’re done! Now we can put the flow through a test run.
31
Tutorial #3: Creating a Mortgage Calculator Step 11: Confirm that Record Create Worked
Tip: When you test run a flow from within the Flow Designer, any data modifications you have as part of the flow
will execute. There is no “test mode” for flows. Test any flows that involve data modification in a sandbox organization
first. Then, when you’re satisfied with how they work, you can move the flows to your production organization using
change sets.
1. Click Run from the button bar. The flow should open up in a new browser window or tab.
2. Enter a first name, last name, and email address.
3. Click Next.
4. In the Mortgage Amount field, enter 150000.00.
5. Leave the term as 360.
6. Enter an interest rate of 3.275.
7. Click Next.
8. The next screen should read: “Thank you for contacting us for your mortgage business. Based on the information you gave
us, a 360-month mortgage of $150,000 would result in payments of $654.87 per month.”
9. Click Finish.
10. Close the flow window.
32
Tutorial #4: Implementing a Flow Step #1: Activate a Flow
Tell Me More...
To discover other ways you can deliver your flows, such as via a custom link, button, or to your site or portal users, see “Putting
Flows to Work” in the Salesforce online help.
1. From Setup, click Create > Workflow & Approvals > Flows.
2. Click Mortgage Calculator in the Flow Name column. Now you’re on the flow’s detail page.
3. Click Activate next to the name in the Flow Versions section.
<apex:page>
<flow:interview/>
</apex:page>
7. Set the name attribute to the unique name of the flow, like this:
<apex:page>
<flow:interview name="Mortgage_Calculator"/>
</apex:page>
8. Click Save.
Tell Me More...
In addition to the other flow customizations available with Visualforce, you can also shape what happens when a user clicks
Finish on the final screen. The default behavior is that the flow resets to its first screen. For a simple example of how you can
send users elsewhere after they click Finish, see “Setting Flow Finish Behavior” in the online help.
33
Tutorial #4: Implementing a Flow Step #3: Set Security for Your Visualforce Page
You now see a new Mortgage Calculator tab to the right of your other tabs. If you don’t see it, then you’ll need to add it to
your tab view. Here’s how:
Click the Mortgage Calculator tab to see the new page in action. Any user with a profile assigned to the Visualforce page, and
with Force.com Flow User enabled on their user detail page, can run the flow from the tab.
34
Next Steps
Next Steps
To learn more about Cloud Flow Designer and keep up with the latest news and features, check out the Business Process
Management page on Developer Force.
35
Addendum
Addendum
Congratulations on completing the workbook! You are now familiar with some of the major elements of the Cloud Flow
Designer.
There are more things you can do with Visual Workflow that we haven’t touched on, though. For example, you can also delete
or update records.
After embedding a flow in a Visualforce page like we did in Tutorial #4, you can use Visualforce tools and techniques to style
the flow page so that it mimics a standard Salesforce page or, using your own style sheets and content types, completely
customize its look and feel. You can also use Visualforce to change what happens when flow users click the Finish button. A
flow embedded in a Visualforce page can also be made available externally to your sites and portal users.
For more examples of using Visualforce with flows, including how to make a flow interact with other components on the page,
see the Visualforce Developer's Guide.
Best Practices
Things you should know when working with flows:
• Be careful when testing flows that contain Record Delete elements. Even if the flow is inactive, running it will trigger the
delete operation.
• You can create a flow in either a sandbox or a production organization. If you build a flow in a sandbox organization, you
can use change sets to move it to production.
• When you run a flow, its active version is served up. If the flow doesn’t have a version activated, and the user trying to run
it is a flow administrator, then they’ll see the most recent inactive flow version. Non-administrators, however, can’t run
inactive flows or flow versions.
• You can delete a flow by going to its detail page and clicking the Delete button. This deletes the entire flow, including all
versions. Click the Del link in the Flow Versions list to delete individual versions of the flow.
Note: You can’t delete an active flow. Once deactivated, you must wait 12 hours to delete a flow or flow version.
This ensures that flows in progress have time to complete. Flows that have never been activated can be deleted
immediately.
36