Tutorial: Using flows as console components

You can embed flows as components in the Salesforce Service Console for any object (e.g. Contact, Account, Case, etc). This allows your agents to use a flow while also viewing a particular customer record, case, etc.

To embed a flow as a component, first clone a copy of the ManyWhoFlow Visualforce page and save it with a new name. You will also need to hard code the Flow ID of the flow you want to embed in the page, and make a few code changes (You will find detailed instructions how to in the following section). Let’s say you want to embed the flow in the Case Layout. For that, edit the Case Layout to add a custom Console component, and configure the way you want the component to look (width, height, etc.). You can add multiple flows as components in a single Case Layout. To see the embedded flow in action, switch to the Sample Console in Salesforce and select a case number.

If you want to try out the instructions, use a flow you already have or create a new Salesforce flow as shown in the following procedures.


Creating a new Salesforce flow

This is what our canvas will look like, once we are done:

If you need to take a closer look, click on the images to enlarge them. Have a question? Click the Support button on the bottom right-hand corner of this page to ask.

Note: This is the same flow used in Tutorial: Embedding a flow in a Salesforce Chatter action. You can reuse the flow if you have it available.
  1. Click LOG IN to login to the Boomi Flow Drawing Tool and click New Flow.
  2. Select Flows in the sidebar, and click New Flow. 
  3. From the drop-down Which Service should be used for authentication? menu, select Salesforce and click Continue. This opens the Flow: New Flow screen. (Note: Since we are using the Salesforce service for authentication, we do not need to import it separately into the flow.)
  4. In the Name field, type a name for your flow (Example: Salesforce Chatter action).
  5. Select Any user that can login with the selected identity service can run this flow from the Access drop-down menu.
  6. Select None from the Social feed for collaboration drop-down menu.
  7. Click Start Building! This opens the canvas where we will build our flow.
  8. Drag a Load element from the sidebar to the canvas.

    This opens a configuration panel on the right.
  9. In the configuration panel, type Load Case in the Name field.
  10. Click New Data Action.
  11. Click Select or create a new value.
  12. Click Create a new Value.
  13. Type Case in the Name field.
  14. Select Object in the What kind of Value is this? field.
  15. Click Select a Type.
  16. Enter Case in the Search field and select the Case associated with the Salesforce Service.
  17. Click Save.
  18. Select Salesforce.com Case Binding for the Where will the data be sourced from? field.
  19. Click Edit Filter. You will now configure which Case object should be loaded from Salesforce.
  20. Select Get the data based on a unique identifier for the Which type of filter should be used? field.
  21. Click Select or create a new Value.
  22. Enter notification in the Search bar and select SalesforceNotificationRecordId. (If you have not created this value before, create a new value of type String and Access set to Input).
  23. Click Save.
  24. Click Apply Filter.
  25. Click Apply Data Action.
  26. Click Save Database Load.

  27. This is what the canvas looks like now:
  28. Drag a Step element to the canvas.
  29. In the Configuration Panel, type The Case in the Name field.
  30. Type Case Subject: in the content editor.
  31. Click Insert Value.
  32. Select Case/Subject from the Value menu and click Ok.

    This inserts the Case/Subject value in the editor.
  33. Click Save Step.

    This is what the canvas looks like now:
  34. Hover your mouse on Start. The mouse pointer changes from a crossbar to a hand.
  35. Drag an arrow from Start to Load Case.
  36. In the Configuration Panel, type Go in the Name field, and click Save Outcome.
  37. Hover your mouse on Load CaseThe mouse pointer changes from a crossbar to a hand.
  38. Drag an arrow from Load Case to The Case.
  39. In the Configuration Panel, type Loaded in the Name field, and click Save Outcome.
  40. Click the Publish icon on the right-hand-side menu to publish your flow. You will be using the Flow ID in the following procedures.

Adding the flow as a component for a Case
  1. Login to Salesforce and click Setup.
  2. Click VisualForce Pages from the Develop menu and select the ManyWhoFlow page.
    screen-shot-2016-11-15-at-3-37-03-pm-minishadow
  3. Click Clone to clone the page.
    screen-shot-2016-11-15-at-3-41-52-pm-minishadow
  4. Change the Label to ManyWhoFlowCase and the Name to flowcase.
  5. Click Quick Save to save the page.
  6. Delete the comments warning us to not change the code of the page. This is not the original Visualforce page, but a clone.
    screen-shot-2016-11-10-at-5-23-51-pm-minishadow
  7. In the first line, change value of standardController to Case. This is what the first line of code is:
    screen-shot-2016-11-15-at-5-38-24-pm-minishadow
    After the change, this is what the first line will look like:
    screen-shot-2016-11-15-at-5-41-32-pm-minishadow
  8. Click Quick Save to save the page.
  9. In the section where the code is passing input values into the page, change object-id to id. There are three places in the code where this change needs to be made. (In the picture, they are Ln 104, Ln 105, and Ln 110.)
    screen-shot-2016-11-15-at-5-47-58-pm-minishadow
  10. Click Quick Save to save the page.
  11. We will hardcode the Flow ID where the ManyWho engine is being initialized. Replace the term flowID with the ID of your flow within single quotes (‘). (Example: ’15c021f1-884a-4794-8f52-0035f9755063’). (In the picture, it is Ln 161.)
  12. Click Save to save the page.
  13. Click Cases.
  14. Open a Case by clicking on the Case Number.
  15. Click Edit Layout.
  16. Click Custom Console Components.

    Custom console components are Visualforce pages that customize or extend a console. You can customize your primary and subtab components from this screen.
  17. In the Right Sidebar under Subtab Components, make sure Style is set to Stack. You can place your flow anywhere on the console, based on your business requirements.
  18. Enter the number 300 in the field for Width Px.
  19. Select Visualforce Page under Type.
  20. Enter the name of the Visualforce page you cloned in the Components section and click the Search icon. (We called the cloned page flowcase earlier.)
  21. Click the flow name in the Search results. This populates the Component field with the name of the Visualforce page you want to embed.
  22. Enter a label for the flow in the Label field. (Example: My flow.)
  23. Set the Height % field to 100. This is what the Right Sidebar configuration should be now:
  24. Click Save to save the Case Layout.

Appchievement!

Let’s see the flow in action now.

  1. Switch to the Sample Console.
  2. Select a case number.

    This opens the case, with the flow in the right sidebar:

Boomi Flow Ninja 

You can embed multiple flows as components in your Service Console.


Check out the glossary for a definition of terms and key concepts that appear in the Boomi Flow website, Drawing Tool, technical documentation, blogs, and marketing communications.

If you need to take a closer look, click on the images to enlarge them. Have a question? Click the Help button on the bottom right-hand corner of this page to ask.