Tutorial: Getting user input

Content under development

You can get input from an user, by using the Input element in a page layout.

Let’s build an app that asks the user for her name, and displays it back. We will create a quick page layout to capture the input, and a Step element to display it back.

We will need:

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

Let’s get building!

  1. Click LOG IN to login to the ManyWho Drawing Tool.
  2. Create a new flow called Input using the ManyWho Identity service.
  3. Drag a Page element to the canvas.

    This opens the page configuration panel.
  4. Type Input in the Name field and click New Page Layout.

    This opens a new page layout called New Page in a new tab.
  5. Click the gears icon on the right-hand-side.
  6. Write User input in the Name and Label fields and click Save.
    This saves the name and label of the page.
  7. We will now save the page. Click the Save icon on the right-hand-side navigation.

    The page name changes to User input.
  8. From the Input section in the sidebar in a page layout, drag an Input component into Main container.

    This opens the Configuration Panel for the Page Component.
  9. Write Enter Name in the Name and Label fields.
  10. Check the box next to Required.
  11. The box next to Save the whole section under State should be checked.
  12. Click Save or create a new Value.
  13. Click Create a new Value.
  14. Copy-paste Your name in the Name field.
  15. The What kind of Value is this field should be String.
  16. Click Save.
  17. Click Save Component.
  18. Click the Save icon on the right-hand-side navigation. This is what the page looks like now:
  19. Click the Input tab to go back to the canvas.
  20. Click Save Page.
  21. Hover your mouse on StartThe mouse pointer changes from a crossbar to a hand.
  22. Drag an arrow from Start to Input.
  23. In the Configuration Panel, type Go in the Name text field and click Save Outcome.

    This is what the canvas looks like now:
  24. Drag a Step element to the canvas. This opens the configuration panel for the element.
  25. Type Hello in the Name field.
  26. Type Hello in the content editor.
  27. Click Insert Value.

    This opens the Insert a Value dialog box.
  28. Select the Your name value.

    This inserts the Your name value in the content editor.
  29. Click Save Step.

    This is what the canvas looks like now:
  30. Hover your mouse on InputThe mouse pointer changes from a crossbar to a hand.
  31. Drag an arrow from Input to Hello.
  32. In the Configuration Panel, type Go in the Name and Label fields.
  33. 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 ten minutes to build an app that asks the user for an input, and displays the input.

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

Let’s enter a name, and click Go. How about Diana Prince?

The app takes the user input, inserts it into the Step, and displays it back.


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.

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.