Tutorial: Building a form

Content under development

We can build forms in Flow very easily. Want proof? Let’s create a form that asks a user for Name, Email, and feedback. We will then use the form in an app. Not to brag or anything, we will do all this in under thirty minutes.

We will need:

  1. Boomi Flow username/password. (If you do not have a Boomi Flow login, please click here to request one.)

Let’s start that timer now!


Creating the form

  1. Click LOG IN to login to the Drawing Tool.
  2. Click Pages.

    This opens the Pages tab.
  3. Click New Page Layout.

    This opens a new page layout.
  4. Click the gears icon on the right-hand-side.

    This opens the Settings screen for the page.
  5. Copy-paste Feedback Form in the Name and Label fields.
  6. Click Save.

    This saves the name and label for the page.
  7. Click the Save icon on the right-hand-side navigation to save the page.

    The name of the page changes to Feedback Form.
  8. Drag a Input component to the Main container of the page layout.

    This opens the configuration panel for the page component.
  9. Type Name in the Name and Label fields.
  10. Check the Required box in the Settings section.

    This adds a red asterisk next to the Input field when rendered in the app, and makes the input required for the end-user.
  11. The Save the whole selection option in the State section should be checked.
  12. Click Select or create a new Value.
  13. Click Create a new Value.
  14. Type Name in the Name field, and select String as the What kind of Value is this option.
  15. Click Save.
  16. Click Save Component.

    This saves the Input component in the main container.
  17. Drag another Input component to the main container.

    This opens the configuration panel for the page component.
  18. Type Email in the Name and Label fields.
  19. Check the Required box in the Settings section.
  20. The Save the whole selection option in the State section should be checked.
  21. Click Select or create a new Value.
  22. Click Create a new Value.
  23. Type Email in the Name field, and select String as the What kind of Value is this option.
  24. Click Save.
  25. Click Save Component. This saves the Input component.
  26. We will add the field for Feedback now. Drag another Input component to the main container.
  27. Type Feedback in the Name and Label fields.
  28. Check the Required box in the Settings section.
  29. The Save the whole selection option in the State section should be checked.
  30. Click Select or create a new Value.
  31. Click Create a new Value.
  32. Type Feedback in the Name field, and select String as the What kind of Value is this option.
  33. Click Save.
  34. Click Save Component.
  35. If we like, we can continue to add more custom fields. For now, let’s click Save to save the page. This is what the screen looks like now:
  36. Let’s close the page layout.

    This is what the screen looks like now:

Using the form in a flow

We will now whip up a quick flow that shows how this form works.

  1. Click Flows.
  2. Click New Flow.
  3. Select the ManyWho Identity Service for authentication and click Continue.
  4. Copy-paste User Feedback in the Name field. The Access field should say Anyone can run this flow. The Social feed for collaboration will be None.
  5. Click Start Building.

    This opens the canvas where we will build the flow.
  6. Drag a Page element from the sidebar to the canvas.

    This opens the page configuration panel.
  7. Copy-paste User Feedback in the Name field.
  8. Uncheck the Only show Page Layouts already being used in this Flow box.
  9. Select the Feedback Form page from the Select Page dropdown menu.
  10. Click Save Page. This is what the canvas looks like now:
  11. Hover your mouse on StartThe mouse pointer changes from a crossbar to a hand.
  12. Drag an arrow from Start to User Feedback.
  13. Type Go in the Name field.
  14. Click Save Outcome.

    This is what the screen looks like now:
  15. Drag a Step element from the sidebar to the canvas. This opens the Step configuration panel.
  16. Copy-paste User Input in the Name field.
  17. Copy-paste Name — in the content editor.
  18. Click Insert Value.

    This opens the Insert a Value dialog box.
  19. Select the Name value.

    This inserts a reference to the Name value in the content editor. When an user runs the app, it is going to show the data she entered for Name here.
  20. Copy-paste Email — in the content editor.
  21. Click Insert Value again. We will insert a reference to the Email value now.
  22. Select the Email value.

    This inserts a reference to the Email value in the content editor.
  23. Copy-paste Feedback — in the content editor.
  24. Click Insert Value.
  25. Select the Feedback value.

    This inserts a reference to the Feedback value in the content editor.
  26. Click Save Step.

    This is what the screen looks like now:
  27. Hover your mouse on User FeedbackThe mouse pointer changes from a crossbar to a hand.
  28. Drag an arrow from User Feedback to User Input.
  29. Type Go in the Name and Label text fields.
  30. 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.


Appchievement!

It took us around 30 minutes to create a form, and build an app that collects user input. We are also displaying the data collected – so we can see how the form works.

This is what the first screen of the app looks like on a browser:

Let’s add name, email, feedback…

… and click Go.

In real-life, which is slightly different than fiction, we can build and use forms in Flow to update Salesforce records, upload a file to Box, populate a database, onboard new users, or conduct polls.


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.