Tutorial: Embedding a flow in a console tab

Content under development

ManyWho apps work seamlessly with Salesforce. You can embed a flow in a console tab, where clicking a tab launches a flow. The end-user does not have to leave Salesforce for this – the flow works from within Salesforce.

To embed a flow in a console tab, you will first create a clone of the ManyWho Visualforce page and hard code it with your Flow ID. You will next create a new Visualforce Tab and use the Visualforce page you just created. You can style the tab according to your preference as well. Once you save the tab, the tab is available with the embedded flow in the Salesforce Service Console.

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 ManyWho 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. (This will contain the unique identifier for the Case record in Salesforce. If you need to create this value, the Access needs to be Input and the value will be a String.)
  23. Click Save.
  24. Click Apply Filter.
  25. Click Apply Data Action.
  26. Click Save Database Load.
    This is what the canvas looks like now:
  27. Drag a Step element to the canvas.
  28. In the Configuration Panel, type The Case in the Name field.
  29. Type Case Subject: in the content editor.
  30. Click Insert Value.
  31. Select Case/Subject from the Value menu and click Ok.

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

    This is what the canvas looks like now:
  33. Hover your mouse on Start. The mouse pointer changes from a crossbar to a hand.
  34. Drag an arrow from Start to Load Case.
  35. In the Configuration Panel, type Go in the Name field, and click Save Outcome.
  36. Hover your mouse on Load CaseThe mouse pointer changes from a crossbar to a hand.
  37. Drag an arrow from Load Case to The Case.
  38. In the Configuration Panel, type Loaded in the Name field, and click Save Outcome.
  39. 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.

Embedding the flow as a tab
  1. Create a clone of the ManyWhoFlow Visualforce page. Enter ManyWhoFlowServiceCloud in the Label field and flowservicecloud in the Name field.
  2. 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’) and save the page.  (In the picture, it is Ln 160.)
  3. Click Create to expand the menu.
  4. Click Tabs and then New under Visualforce Tabs.
  5. Select ManyWhoFlowServiceCloud as the Visualforce page.
  6. Copy-paste ManyWhoFlowService in the Tab Label and Tab Name fields.
  7. Click the search icon next to the Tab Style field.

    This opens the Tab Style Selector.
  8. Select a Tab style. Example: Guitar.

    This populates the Tab Style field with Guitar.
  9. Click Next.
  10. Click Next again.
  11. Click Save.

Appchievement!

Switch to the Service Console.

You can see the flow as a tab in the Tabs section.

Clicking on the tab, will launch your flow.


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.

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