Tutorial: Using a combo box for size selection

Content under development

You can use a combo box to show users a picklist of items (Size, zip codes, salutation, etc.) and save the selection to a value.

Let us build a simple combo box that shows the user three sizes – Small, Medium, Large, saves the selection in a value, and displays that values to the user.

You 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 Combo boxes using the ManyWho Identity service.
  3. Drag a Page element from the sidebar to the canvas.

    This opens the page configuration tab.
  4. Copy-paste Using combo boxes 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.
    This opens the Settings screen for the page.
  6. Write Combo box 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 Combo box.
  8. We will now create a new type. Click Home and then click Types.
  9. Click New Type.
  10. Type Size in the Name field.
  11. Click New Property.
  12. Type Value in the Name field and select String from the What kind of property is this menu.
  13. Click Apply Property.

    This adds ‘Value’ as a property of the Size type.

    We will add another property.
  14. Click New Property again.
  15. Type Label in the Name field and select String from the What kind of property is this menu.
  16. Click Apply Property.

    This adds ‘Label’ as a property of the Size type.
  17. Click Save Type.
  18. Click Values.
  19. Click New Value.
  20. Copy-paste Combo box list in the Name field.
  21. Select List from the What kind of value is this dropdown menu.

    This opens the option for type.
  22. Click Select a Type.

    Lists in ManyWho have to be of a certain type. We are going to be creating a list of values of the Size type (we created this type earlier).
  23. Enter Size in the Search bar and select Size.

  24. Click the + icon to add default object data.
  25. Type Small in the Label field and S in the Value field.
  26. Click the + icon again.
  27. Type Medium in the Label field and M in the Value field.
  28. Click the + icon again.
  29. Type Large in the Label field and L in the Value field.
  30. Click Save Value.
  31. Lets go back to the page now. This is where the magic will happen. Click the Combo box tab to return to the page layout.
  32. Drag a Presentation component to the Main container.

    This opens the page component configuration panel on the right.
  33. Copy-paste the text Please select a size in the Name field and the content editor.
  34. Click Save Component. This is what the page layout looks like now:
  35. Click the Save icon on the right-hand-side navigation to save the page.
  36. Drag a Combobox component from the Input section in the sidebar to the Main container. This opens the page component configuration panel on the right.
  37. Type Size in the Name and Label fields.
  38. Click Select a Type in the Data Source section.
  39. Type Size in the Search box and select Size.
  40. In the Data Source section select the option for Get the data from a List value. This opens the option for the value that holds the data.
  41. Click Select or create a new Value.
  42. Type Combo in the Search box and select the Combo box list value.
  43. The Save the whole selection option under State should be checked.
  44. Click Select or create a new value for Save the selection made by the user to.
  45. Click Create a new Value.
  46. Copy-paste Selected size in the Name field.
  47. Click Select a Type.
  48. Type Size in the Search box and select Size.
  49. Click Save.
  50. Click Add Column in the Data Presentation section.
  51. Select Label as the Property to use for this Column.
  52. Click Apply Column.
  53. Click Save Component.

    This is what the page layout looks like now:
  54. Click the Save icon the right-hand-side navigation to save the page.
  55. Click the Combo boxes tab to go back to the flow.
  56. Click Save Page.

    This is what the canvas looks like now:
  57. Hover your mouse on StartThe mouse pointer changes from a crossbar to a hand.
  58. Drag an arrow from Start to Using combo boxes.
  59. In the Configuration Panel, type Go in the Name text field and click Save Outcome.

    This is what the canvas looks like now:
  60. Drag a Step element to the canvas.
  61. Copy-paste Displaying user selection in the Name field.
  62. In the content editor, copy-paste You selected:
  63. Click Insert Value.

    This opens the Insert a Value dialog box.
  64. Select Selected Size / Label from the list.
  65. Click Ok. This inserts the Selected size value in the content editor. When the app is run, this value will display the choice selected by the user.
  66. Click Save Step.

    This is what the canvas looks like now:
  67. Hover your mouse on Using combo boxesThe mouse pointer changes from a crossbar to a hand.
  68. Drag an arrow from Using combo boxes to Displaying user selection.
  69. In the Configuration Panel, type Go in the Name and Label fields.
  70. Click Save Outcome.

That was fast!

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

Let’s run the flow now, and see how easily it converts into an app.


Appchievement!

It took us around 20 minutes to create a combo box. When we run the app, this is what the first screen looks like on a browser:

If you click the Size menu, you can see the size options:

Let’s select a size (Say, Large) and click Go:


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.