How To: Getting Started with Visual Flow (Part 2)

Let’s see how easy it is to build a Flow taking one of the use cases from Getting Started with Flow Part 1  http://www.salesforceweek.ly/2014/09/getting-started-with-visual-flow.html

Solution Overview: Create a button which navigates the user to a Data Entry screen where they can enter basic details about a Primary Contact, such as FirstName and LastName.  Take the user entered details and create a new Contact record. Insert the newly created Contact as an Opportunity Contact Role, then navigate the user back right back to the Opportunity page where they started.

Sound simple enough?

Assuming you have met the minimum org requirements (mentioned in part 1) –  navigate to Flow setup page and hit New Flow:

You will be greeted with some glossy YouTube videos covering the basics which I highly recommend you watch before hitting “Don’t Show Again”. I don’t mind if you stop reading this and watch these first!

Back to our Flow design – looking back at our solution overview we can identify three parts which will form the completed Flow:

1. Input Screen for user to enter details about the Contact
2. Create Contact Record record
3. Create Opportunity Contact Role record

Designing Flows can quickly get complex as I found out, therefore it is a good to idea to map out the Flow using the Step Draft Tool. Let’s go ahead and use the Step tool to draft this one out a bit.

Drag a step from the side panel onto the canvas – and complete the necessary fields such as below:

Add a draft step onto the canvas to represent each step in our flow so we end up with something like this:

Make sure you connect the draft steps by clicking and dragging from the diamond regions like shown above. 

The good thing about drafting out the steps is they can be convert into real screen elements once you are happy with the overall flow design, thus allowing for ideas to be rapidly prototyped within the designer.

Remember: You can only convert draft steps to user screens

I hope you took my advice and read the manual before going ahead – all Flows have to start somewhere. Next we need to set the starting element in the Flow, the element where the Flow will begin.

There is a tiny little green down-arrow which needs to be clicked in order to set the Primary Contact screen as the starting element:

Now when the user clicks the button to launch our Flow, the first element which is the input screen will be displayed.

In our solution design for our flow we have identified that we will need the following three variables:

1. Variable to hold AccountId (Input)
2. Variable to hold OpportunityId (Input)
3. Variable to hold ContactId (Output)

This is a Getting Started exercise so I will leave out most of the jargon around variables which you see in the palette and focus on the basics (Will come back to those features in future blog posts).

Let’s stay on the keeping it simple path. The Flow will be launched from a button on the Opportunity page, so at this point it’s safe to assume we know the following salesforce record ids:

1. Account Id
2. Opportunity Id

Both of these will be used as INPUT variables and our third variable mentioned Contact Id; this will be an OUTPUT variable to store the record id when the Flow inserts the Contact record for the Account Id input variable. The new Contact Id which is returned in Step 2 along with the Opportunity Id will be used to create the Opportunity Contact Role record in the last step.

Let’s create our three variables up front (alternatively you can create them as you build the Flow directly if you like):

Click the Resources Tab and then Create New Variable – it’s the top one

First we need to create a variable to hold the existing Salesforce Account Id, data type is TEXT and Input/Output Type is Input Only (as we know this value and will be passed it via the custom button created later on).

Next we need another input variable, this time to hold the existing Salesforce Opportunity Id, data type and Input/Out Type same as before:

Last variable we need is an OUTPUT variable used to store the new Salesforce Contact Id when we create the record in our Flow:

Ok, we should have all the variables we need to store values used in our flow – quick check in the Explorer palette which should look like this:

Feels like we are ready to Convert the main Draft Step Element into real screen element – Click the Primary Contact Input, then use the bi-directional tiny icon to make the switch:

This will take to you this screen where the main navigation options and any supporting help text can be configured. For now we don’t need to worry about these, navigate to the Add a Field tab. We need to add a couple of fields to store the Contact First Name and Last Name (add these one at a time).

Double click on the Inputs > Text box which will add a Text Input box on the right hand side. Click this once it appears to enter the field settings like below:

For each field

1. Starting with FirstName field enter a label and the Unique name will auto-populate

2. Make it Required on the form

3. Repeat & do the same for the LastName field

We should have all the fields configured in the screen element. We cannot convert the next draft step Create Primary Contact into a Create Record element – Delete each one using the delete icon. These will be replaced with Create Record Flow elements. Your Flow should look like this now:

Next we add a Create Record element for creating the Contact record, drag one onto the Canvas:

Here is where our Variables created previously come into play. Variables in Flow look a lot like merge fields and can easily be typed straight into the relevant field, otherwise just start typing the variable name and type-ahead will do the rest:

Give the Record Create a name and select Contact as the record to be created. Next we need to add/map the fields required to create the Contact record.

Make sure you have the following – Create Contact with the following field values:

1. FirstName > {!First_Name}

2. LastName > {!Last_Name}

3. AccountId > {!vAccountId}

Assign the record ID to a variable to reference it in your flow set to:

4. ContactId > {!vContactId}

Once that is done, click ok and add another Create Record element, this time to create the Opportunity Contact Role:

Make sure you have the following – Create OpportunityContactRole with the following field values:

1. OpportunityId > {!vOpportunityId}

2. ContactId > {!vContactId}

3. Role > ‘Decision Make’

4. IsPrimary > {!GlobalConstant.True}

That’s it, almost there now. Click Ok and link the flows together like before to end up like this.

That’s the flow part done. Don’t forget to click Save now.

Last part I promise – let’s create the button which will launch the Flow:

We need to get the URL of flow to use in the button – view the flow like above (url will be based on what you called your flow)

Navigated to the Opportunity setup > Buttons, Links & Actions:

Create a New Button & Link:

Make sure you set the following values in the button:

1. Label & Name > Go with something like New Primary Contact

2. Display Type > Detail Page Button

3. Behavior > Display in existing window with sidebar (select your own preference here if you like)

4. Content Source > URL

5. URL >

{!$Site.BaseUrl}/flow/Another_flow_from_Mike?vAccountId={!Opportunity.AccountId}&vOpportunityId={!Opportunity.Id}&retURL=/{!Opportunity.Id}

Last part for real this time – add the button onto the Opportunity page and test your flow:

Click on your button should display your Primary Contact input form like this:

Enter some details, then hit next button should hopefully return you to the Opportunity page and with your Contact record created and associated to the Opportunity as the Primary Contact Role. Let’s me know if you get stuck and it doesn’t work. Here is an unmanaged package to get you going: https://login.salesforce.com/packaging/installPackage.apexp?p0=04tw0000000AWgS

You have made it – sorry it’s been a long one…

As you can see Flow is an extremely powerful tool which can deliver rapid results which previously would have required a developer and code to be written then deployed. There is really no excuses not to go into productivity overdrive in your own org and start looking for places where flows can be introduced.

We shall be returning to Visual Flow after this years Dreamforce as we have a sneaky suspicion that there will be an announcement or two related to Visual Flow.

As always we love to get feedback and hear all about your adventures with Visual Flow. Don’t be shy!