Tutorial: Salesforce Lead manager app

You can use Boomi Flow to build an app that lets you add records to Salesforce Lead records. Boomi Flow massively reduces the need to code, and if you do need to add a few lines of code, you can use standard languages.

Boomi Flow apps can run from within Salesforce. For example, if you are using the Salesforce player, this is what the app will look like:


Here is another screen from the app:

Let’s get building!

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.

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

What we will need

  1. Boomi Flow username/password. (If you do not have a Boomi Flow login, please click here to request one.)
  2. Salesforce account and password. (You can create a Salesforce account here.)
  3. Salesforce Service for Boomi Flow configured.

 Naming the flow and configuring authentication
  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 Lead Manager app).
  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.

Creating the ‘My Leads’ page
  1. Drag a Page element from the sidebar, to the canvas.
  2. In the Configuration Panel, copy-paste the text My Leads in the Name field.
  3. Click New Page Layout.
    screen-shot-2016-09-29-at-10-47-44-pmThis opens a new tab called New Page.
    We will configure the page now.
  4. Click the icon-ios7-gear-128gears icon on the right-hand-side. This opens the Settings screen for the page. Write Leads in the Name and Label fields and click Save.
  5. Click the Save icon the right-hand-side navigation to save the page. The page name changes to Leads.
Tip: You need to click the Save icon before anything gets saved on a page. Keep saving your page as you work.

Building ‘My Leads: Introduction’ page
  1. From the Content section in the sidebar, drag a Presentation component into Main container.
  2. This opens the Configuration Panel for the Page Component. Write Intro in the Name field.
  3. In the Content text editor copy-paste the text Leads and press Enter.
  4. Copy-paste the text Your leads are listed below: and click Save Component.

Tip: You can click the header of a page component to pull up the edit menu, if you need to update the component.

Configuring the My Leads: Table
  1. From the Data section in the sidebar, drag a Table component into Main container and place it below the Presentation container.
  2. This opens the Configuration Panel for the Page Component. Write Leads Table in the Name and Label fields.
  3. Under Settings, check the boxes for Editable and Searchable.
  4. Under Data Source, select Lead in the The Type of data to be provided menu.
  5. Select Get the data from a Service.
  6. In The Binding that should be used to get the data select Salesforce.com Lead Binding.
  7. In the State section, make sure the Save the whole section box is checked.
  8. Click Select or create a new Value in Save the selection made by the user to and click Create a new Value.
  9. The Name field should say Lead.
  10. The What kind of Value is this? field should say Object.
  11. The What Type of Value is this? field should say Lead.
  12. Click Save.

  13. Under Data Presentation, click Add Column.
  14. Select Full Name in the Property to use in this Column field.
  15. Write Name in the Label field.
  16. Select Display this Column and click Apply Column.
  17. Under Data Presentation, click Add Column again.
  18. Select Email in the Property to use in this Column field.
  19. Write Email in the Label field.
  20. Make sure the Display this Column box is checked, and click Apply Column.
  21. Under Data Presentation, click Add Column again.
  22. Select Phone in the Property to use in this Column field.
  23. Write Phone in the Label field.
  24. Select Display this Column and click Apply Column.
  25. Click Save Component.
    screen-shot-2016-09-30-at-12-26-15-am-minishadow
  26. Click the Save icon on the right-hand-side navigation to save the page.screen-shot-2016-09-30-at-12-30-26-am-minishadow
  27. Click the Salesforce Lead Manager tab in the canvas and click Save Page.

Creating the first outcome

A flow begins with the Start element, which is fixed on the canvas. The first outcome in the flow is the outcome of the Start element, which connects an arrow from Start, to the first element the builder places on the canvas.

Outcomes show how a flow progresses. The ‘Label’ text on outcomes gets converted into clickable buttons.

  1. Hover your mouse on StartThe mouse pointer changes from a crossbar to a hand.
  2. Drag an arrow from Start to My Leads.
  3. In the Configuration Panel, type Go in the Name text field and click Save Outcome.
  4. This creates an arrow from Start to My Leads, with the legend Go on it.

Creating the ‘Lead: Detail’ page
  1. Drag a Page element from the sidebar, to the canvas.
  2. In the Configuration Panel, copy-paste the text Lead: Detail in the Name field.
  3. Click New Page Layout.This opens a new tab called New Page.
  4. Click the icon-ios7-gear-128gears icon on the right-hand-side. This opens the Settings screen for the page. Write Lead Detail in  the Name and Label fields and click Save.
  5. Click the Save icon the right-hand-side navigation to save the page. The page name changes to Lead Detail.

Configuring the ‘My Leads: Intro’ page
  1. From the Content section in the sidebar, drag a Presentation component into Main container.
  2. This opens the Configuration Panel for the Page Component. Write Intro in the Name field.
  3. In the Content text editor write Lead and press Enter.
  4. Click Insert Value. This opens the Insert a Value dialog box.
  5. Select Lead/Full Name and click Ok.
  6. Click Save Component.

Configuring the ‘My Leads: Inputs’ page
  1. From the Input section in the sidebar, drag a Input component into Main container and place it below the Presentation component.
  2. This opens the Configuration Panel for the Page Component. Write First Name in the Name and Label fields.
  3. Under Settings, check the boxes for Editable and Required.
  4. Under Size, write 25 in the Size field and 255 in the Maximum Characters field.
  5. In the State section, make sure the Save the whole section box is checked.
  6. Click Select or create a new Value in Save the selection made by the user to.
  7. Enter First in the Search bar to bring up the Lead/First Name value.
  8. Select Lead/First Name and click Save Component.
    screen-shot-2016-10-03-at-8-45-11-pm-minishadow
  9. Click the Save icon the right-hand-side navigation to save the page. This is what the page looks like now:
  10.  From the Input section in the sidebar, drag a Input component into Main container.
    screen-shot-2016-10-03-at-8-48-46-pm-minishadow
  11. This opens the Configuration Panel for the Page Component. Write Last Name in the Name and Label fields.
  12. Under Settings, check the boxes for Editable and Required.
  13. Under Size, write 25 in the Size field, and 255 in the Maximum Characters field.
  14. In the State section, make sure the Save the whole section box is checked.
  15. Click Select or create a new Value.
  16. Enter Last in the Search bar to bring up the Lead/Last Name value.
  17. Select Lead/Last Name and click Save Component.
  18. Click the Save icon the right-hand-side navigation to save the page. This is what the page looks like now:
  19. From the Input section in the sidebar, drag a Input component into Main container.
  20. This opens the Configuration Panel for the Page Component. Write Company in the Name and Label fields.
  21. Under Settings, check the boxes for Editable and Required.
  22. Under Size, write 25 in the Size field and 255 in the Maximum Characters field.
  23. In the State section, make sure the Save the whole section box is checked.
  24. Click Select or create a new Value in Save the selection made by the user to.
  25. Enter Company in the Search bar to bring up the Lead/Company value.
  26. Select Lead/Company and click Save Component.
  27. Click the Save icon the right-hand-side navigation to save the page. This is what the page looks like now:
  28. From the Input section in the sidebar, drag a Input component into Main container.
  29. This opens the Configuration Panel for the Page Component. Write Email in the Name and Label fields.
  30. Under Settings, check the boxes for Editable and Required.
  31. Under Size, write 25 in the Size field and 255 in the Maximum Characters field.
  32. In the State section, make sure the Save the whole section box is checked.
  33. Click Select or create a new Value in Save the selection made by the user to.
  34. Enter Email in the Search bar to bring up the Lead/Email value.
  35. Select Lead/Email and click Save Component.
  36. Click the Save icon the right-hand-side navigation to save the page. This is what the page looks like now:
  37. From the Input section in the sidebar, drag a Input component into Main container.
  38. This opens the Configuration Panel for the Page Component. Write Phone in the Name and Label fields.
  39. Under Settings, check the boxes for Editable and Required.
  40. Under Size, write 25 in the Size field and 255 in the Maximum Characters field.
  41. In the State section, make sure the Save the whole section box is checked.
  42. Click Select or create a new Value in Save the selection made by the user to.
  43. Enter Phone in the Search bar to bring up the Lead/Phone value.
  44. Select Lead/Phone and click Save Component.
  45. Click the Save icon on the right-hand-side navigation to save the page. This is what the page looks like now:
  46. Click the Lead Manager tab to go back to the canvas, and click Save Page.

Configuring the ‘Edit’ outcome
  1. Hover your mouse on My LeadsThe mouse pointer changes from a crossbar to a hand.
  2. Drag an arrow from My Leads to Lead: Record.
  3. In the Configuration Panel, type Edit in the Name and Label text fields.
  4. Click + to expand the Advanced section.
  5. In the Actions section, select Lead: Detail in This outcome leads to and select Save Changed Values in When this outcome is selected.
  6. In the Business Rules section, select And in the The business rules should be compared using, and 0 in the The order in which this Outcome should be evaluated.
  7. In the Appearance section, select Leads Table in the Place this Outcome with a Component on the Page field and click Save Outcome.

Configuring the ‘Cancel’ outcome
  1. Hover your mouse on Lead: DetailThe mouse pointer changes from a crossbar to a hand.
  2. Drag an arrow from Lead: Detail to My Leads.
  3. In the Configuration Panel, type Cancel in the Name and Label text fields.
  4. In the Actions section, select My Leads in This outcome leads to and Do not save Changed Values in When this outcome is selected.
  5. In the Business Rules section, select And in the The business rules should be compared using and 0 in the The order in which this Outcome should be evaluated.
  6. In the Appearance section, select Cancel in the What kind of action is this? field and click Save Outcome.
Tip: You can select an outcome, and move it around the canvas. For example, if you select the ‘Cancel’ arrow, you get a green box that you can click and drag around to reposition the outcome as needed.

Saving the Lead
  1. Drag a Save element from the sidebar, to the canvas.
  2. In the Configuration Panel, copy-paste the text Save Lead in the Name field.
  3. Click New Data Action.
  4. Click Select or create a new Value under Which Value do you want to save in the Data Action for: Save Lead screen.
  5. Enter Lead in the Search bar to bring up the Lead value.
  6. Select Lead and select Salesforce.com Lead Binding in the Where will the data be saved? field.
  7. Click Apply Data Action.
  8. Click Save Database Save.

Configuring the ‘Save’ outcome
  1. Hover your mouse on Lead: DetailThe mouse pointer changes from a crossbar to a hand.
  2. Drag an arrow from Lead: Detail to Save Lead.
  3. In the Configuration Panel, type Save in the Name and Label text fields.
  4. In the Actions section, select Save Leads in This outcome leads to and Save Changed Values in When this outcome is selected.
  5. In the Business Rules section, select And in the The business rules should be compared using and 1 in the The order in which this Outcome should be evaluated.
  6. In the Appearance section, select Save in the What kind of action is this? field. This is what the Outcome panel looks like now:
  7. Click Save Outcome.

Configuring the first ‘Done’ outcome

This what the canvas looks like now:

  1. Hover your mouse on Save LeadThe mouse pointer changes from a crossbar to a hand.
  2. Drag an arrow from Save Lead to My Leads. This opens a Configuration Panel on the right-hand side.
  3. In the Configuration Panel, type Done in the Name text field.
  4. In the Actions section, select My Leads in This outcome leads to.
  5. In the Business Rules section, select And in the The business rules should be compared using and 0 in the The order in which this Outcome should be evaluated.
  6. Click Save Outcome.

Configuring the ‘Clear Lead’ screen
  1. Drag an Operator element from the sidebar, to the canvas.
  2. In the Configuration Panel, copy-paste the text Clear Lead in the Name field.
  3. Click New Operation.
  4. Click Select or create a new Value under Which Value do you want to change.
  5. Enter Lead in the Search bar to bring up the Lead value and select Lead.
  6. Select Empty in How do you want to change the Value? field.
  7. Select 0 in the The order in which this Operation should be performed field.
  8. Click Apply Operation.
  9. Click Save Operator.

Configuring the ‘New’ outcome
  1. Hover your mouse on My LeadsThe mouse pointer changes from a crossbar to a hand.
  2. Drag an arrow from My Leads to Clear Leads.
  3. In the Configuration Panel, type New in the Name and Label text fields.
  4. In the Actions section, Select Clear Lead in This outcome leads to.
  5. Select Save Changed Values under When this Outcome is selected.
  6. In the Business Rules section, select And in the The business rules should be compared using and 1 in the The order in which this Outcome should be evaluated.
  7. In the Appearance section, select Leads Table under the Place this Outcome with a Component on the Page field.
  8. Check the box next to This Outcome should appear at the top of the Component.
  9. Click Save Outcome.

Configuring the second ‘Done’ outcome
  1. Hover your mouse on Clear LeadThe mouse pointer changes from a crossbar to a hand.
  2. Drag an arrow from Clear Lead to Lead:Detail.
  3. In the Name field, type Done and click Save Outcome.

That was fast!

And… we are done building. This is what the canvas looks like now:

Let’s run the flow now, and see how easily it converts into an app. If you want to run your app from within Salesforce, use the Salesforce player.


Appchievement!

It took us 60 minutes to build an app with multiple screens and placeholder text.

This is what the first screen of the app looks like on a browser (you may be asked to log in to Salesforce):

When you click ‘New’, a screen opens that lets you add a new Lead:

On your mobile, this is what the first screen looks (you may be asked to log in to Salesforce):

When you click ‘New’, a screen opens that lets you add a new Lead:

The app will run on all iOS devices (including the Apple Watch), Android, and even on Windows Phone (yes, really).


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.