Tutorial: Searchable agenda app (No database needed)

Here is a quick tutorial that shows us how to create and update a list of agenda items, without the need for an external database. And before you ask.. Yes. Yes, the list of agenda items is searchable.

Imagine how easy coordinating meetings can get, if you pass this app URL around, and just give a Join URL to the participants, so they can add or look through agenda items!

We will need:

  1. Boomi Flow username/password. (Get a free fully-loaded Boomi Flow account here.)
  2. A new subtenant with the Flow Identity service installed.
Good to remember:

List > Object > Types

Need a refresher? Check out:

This is what the canvas will look like when we are done:

Let’s get building!

  1. Click LOG IN to login to the Boomi Flow Drawing Tool.
  2. We will create a new type. Our agenda items will be of this type. Click Types.

    This opens the Types tab.
  3. Select New Type.

    This takes us to the type creation screen.
  4. Copy-paste Agenda: Type in the Name field.
  5. Select New property. This opens the property creation screen.
  6. Copy-paste Property 1 in the Name field.
  7. The kind of property should be String.
  8. Select Apply property. This saves Property 1 as a property of Agenda: Type.
  9. Click Save type.

    This saves the type.
  10. Select Pages.

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

    This opens a new page layout called New Page in a new tab.
  12. Click the gears icon on the right-hand-side.
  13. Copy-paste Agenda Builder in the Name and Label fields.
  14. Click Save.

    This saves the name and label of the page.
  15. We will now save the page. Click the Save icon on the right-hand-side navigation.

    The page name changes to Agenda Builder.
  16. Drag an Input component into Main container.

    This opens the configuration panel for the page component.
  17. Copy-paste Item Input in the Name field.
  18. Copy-paste Add an Item to my Agenda in the Label field.
  19. Under Settings, the box for Editable should be checked.
  20. Under State, the box for Save the whole selection should be checked.
  21. Click Select or create a new Value.
  22. Click Create a new Value.
  23. Copy-paste Item: Input in the Name field.
  24. Select String as the option for the kind of value.
  25. Click Save.
  26. Click Save component.

    This is what the page layout looks like now:

  27. Next we will add our table. Drag a Table into Main Container after the Input component.

    This opens a configuration panel for the Table panel.
  28. Copy-paste Agenda List in the Name and Label fields.
  29. The box for Editable under Settings should be checked.
  30. Select Searchable.
  31. Under Data Source, click Select a Type.
  32. Select Agenda: Type.
  33. The source of our data is a list value. Check the option for Get the data from a list value. This opens the option for the value that holds the data.
  34. Click Select or create a new Value.
  35. Click Create a new Value.
  36. Copy-paste Agenda: List  in the Name field.
  37. Select List as the kind of value. The type of value should be Agenda: Type.
  38. Click Save.
  39. Under Data Presentation, click Add Column.
  40. Select Property1 as the property to use for the column.
  41. Copy-paste Agenda Items in the Label field.
  42. The Display this Column option should be checked.
  43. Click Apply Column.
  44. Click Save Component.
  45. Click the Save Icon in the right column. This is what the page layout looks like now:
  46. Select the Home tab.
  47. Click Flows.

    This opens the Flows tab.
  48. Click New Flow.
  49. Select Flow Identity Service as the service used for authentication.
  50. Click Continue. This opens the Flows>Flow screen.
  51. Copy-paste Agenda Builder in the Name field.
  52. The Access option should be set to Anyone can run this flow. The Social feed for collaboration should be None.
  53. Click Start building.

    This opens the canvas where we will build our flow.
  54. Click the Shared Elements icon on the right-hand-side menu.
  55. Click Pages.
  56. Click Import Existing. 

    This lists the pages in our tenant.
  57. Click the Import button for Agenda Page Layout.

    This imports the Agenda Builder page to the flow.
  58. Click Close.
  59. Drag an Operator element to the canvas. This opens a configuration panel.
  60. Let’s give the operator a name. Copy-paste Build my Agenda in the Name field.
  61. Click New Operation.
  62. Click Select or create a new Value.
  63. Click Create a New Value.
  64. Copy-paste Item: Object in the Name field.
  65. Select Object as the kind of value.
  66. Click Select a Type.
  67. Select Agenda: Type.
  68. Click Save.
  69. Click Select again.
  70. This time around, we will select Item: Object/Property 1.

  71. Select Set Equal To as the option for How do you want to change the value.
  72. Select Value of as the option for retrieving the reference value.
  73. Click Select or create a new Value.

  74. Select Item: Input.

  75. Click Apply Operation.
  76. Select New Operation again.
  77.  Click Select or create a new Value.
  78. Select Agenda: List.
  79. Select Update as the option for How do you want to change the value

  80. Select Value of as the option for retrieving the reference value.
  81. Click Select or create a new Value.

  82. Select Item: Object.

  83. Click Apply Operation.
  84. We will create one more operation. Click New Operation.
  85. Click Select or create a new Value.
  86. Select Item: Object.
  87. Select Create New as the option for How do you want to change the value.
  88. Click Apply Operation.
  89. We are done creating our operations. Let’s save the operator now. Click Save Operator.

    This is what the canvas looks like now:
  90. Drag a Page from the left-hand-side navigation, to the canvas. This opens a configuration panel.
  91. Copy-paste Agenda Page in the Name field.
  92. Select the Agenda Builder page from the Select Page dropdown menu.
  93. Expand the Advanced menu.
  94. Click New Outcome.
  95. Type Add in the Name field.
  96. Select Build my Agenda as the option for This outcome leads to under Actions.
  97. Click Apply Outcome.
  98. Click Save Page.

    This is what the canvas looks like now:
  99. Double click the outcome. This opens a configuration panel.
  100. Copy-paste Add in the Label field.
  101. Expand the Advanced options, and scroll down to Appearance.
  102. Select Item Input as the option for Outcome with a Component on the Page.
  103. Select Add as the option for What kind of action is this.
  104. Click Save Outcome. This creates our outcome for the page layout. Alright! Now let’s connect the elements in our canvas.
  105. Create an outcome from Start to Build My Agenda called Go.

    This is what the canvas looks like now:
  106. Create an outcome from Build my Agenda to Agenda Layout and name it Display.


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 45 minutes to create an app that lets us create/update an agenda, without using a database.

When we run the app, this is what the first screen looks like on a browser:

Let’s add an item to our agenda:

Let’s add few more items:

Did we mention the agenda list is searchable?

Clicking Add takes us back to the agenda from the search results.

Goody bag

  1. Sample flow – https://flow.manywho.com/8d092d78-9227-4cd6-9f68-d99abc370d19/play/default/?flow-id=5a10215d-27bc-4b80-a269-d1d1c493d652
  2. Sample package – https://files-manywho-com.s3.amazonaws.com/8d092d78-9227-4cd6-9f68-d99abc370d19/Agenda Builder.json (Download, save, and import to a fresh tenant.)

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.