Tutorial: Using loops to filter list data

Knowing how to filter values in a list using a loop can come in very handy. We can loop through a list of names, emails, contacts, accounts, prospects, and so on an so forth. If we like, we can also update the list values as we loop through them, add values, or delete values.

In this tutorial, we will be creating a list, create three filters, and let the user filter the list data using a criterion. This will take roughly 200 steps. DON’T PANIC. All we will be doing is dragging and dropping, clicking, and writing on stuff. We can and will breeze through the procedures.

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

INSTRUCTIONS


We will need
  1. Boomi Flow username/password  (Get a free Flow login here)
  2. A Flow tenant/subtenant with Identity Service installed

If you like, let’s begin by watching a 55-second video. We can also jump directly to the instructions (right after the video).

The steps to follow along…
  1. Click LOG IN to log in to the Flow Drawing Tool. We are in the Flows tab.
  2. We will create a type called Example List, with two properties Name and Color, both strings. Click Types.

    This opens the Types tab.
  3. Click New Type.
  4. Copy-paste Example List in the Name field.
  5. Click New Property.
  6. Copy-paste Name in the Name field,  select String as the kind of property, and click Apply Property.

    This adds Name as a property of the Example List type.
  7. Click New Property again.
  8. Copy-paste Color in the Name field,  select String as the kind of property, and click Apply Property.

    This saves the Color property.
  9. Click Save Type.

    The type is now saved and available in the Types tab of the tenant.
  10. We will now create a list of values of the Example List type. Click Values to open the Values tab.
  11. Click New Value.
  12. Copy-paste Example List: Data in the Name field.
  13. Select List in the What kind of value is this field. This opens the option for selecting a type.
  14. Click Select a Type.
  15. Select the Example List type.
  16. We will add a list of names and colors as list items. Click the + icon.

    This expands the default data options.
  17. Copy-paste Red in the Color field and Diana in the Name field.
  18. Click the + icon again. We will repeat the steps to add four more items to the list.
    Color: Blue, Name: Bruce 
    Color: Yellow, Name: Clark 
    Color: Green, Name: Oliver 
    Color: Silver, Name: Laura

  19. Click Save Value. This saves the value, and Example List: Data is now available in the tenant.
  20.  Let’s create a flow now. This is where the magic will happen! Click Flows, and New Flow to create a new flow called Using loops. We will use the ManyWho Identity service for authentication. Set Access to Anyone can run this flow and select None from the Social feed for collaboration menu.
  21. Drag a Page from the sidebar to the canvas.

    This opens a configuration panel.
  22. Copy-paste Example List: Display in the Name field.
  23. Click New Page Layout.This opens a new page layout in a new tab.
  24. Let’s save the page. Click the gears icon on the right-hand-side.

    This opens the Settings screen for the page.
  25. Copy-paste Example List: Display in the Name and Label fields and click Save.

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

    The page name changes from New Page to Example List: Display.
  27. Drag a Table component to the Main container of the page layout.

    This opens the configuration panel for the page component.
  28. Copy-paste Example List: Table in the Name and Label fields.
  29. Click the Select a Type button under Data Source.
  30. Select the Example List type.
  31. Check the option for Get the data from a List Value. This opens the option for selecting the value that holds the data.
  32. Click Select or create a new Value.
  33. Select the Example List: Data value.
  34. Click Add Column.
  35. Select Name as the Property to use for this Column option.
  36. Type Name in the Label field. The Order should be 0. The Display this Column box should be checked.
  37. Click Apply Column.
  38. Click Add Column again.
  39. Select Color as the Property to use for this Column option.
  40. Type Color in the Label field. The Order should be 1. The Display this Column box should be checked.
  41. Click Apply Column.
  42. Click Save Component. This is what the page looks like now:

  43. Click the Save icon on the right-hand-side navigation to save the page.
  44. Click the Using Loops tab to go back to the canvas.
  45. Click Save Page.

    This is what the canvas looks like now:
  46. Create an outcome called Go from Start to the Example List: Display page.
  47. Next what we will do is create filters. We will use operators to do this. Drag an Operator to the canvas.

    This opens a configuration panel on the right.
  48. Copy-paste Filter: Red in the Name field.
  49. Click New Operation.
  50. Click Select or create a new Value.
  51. Click Create a new Value.
  52. Copy-paste Filter 1 in the Name field.
  53. Select String for the What kind of Value is this field.
  54. Click Save.
  55. Select Set Equal To as How do you want to change the Value option. This opens the How do you want to retrieve the reference Value field.
  56. Select Value Of. This opens the Which Value do you want to reference option.
  57. Click Select or create a new Value.
  58. Click Create a new Value.
  59. Copy-paste Static String: Red in the Name field and set What kind of Value is this field to String. 
  60. Copy-paste Red in the Default Value field.
  61. Click Save.
  62. Click Apply Operation.
  63. Click Save Operator.

    This is what the canvas looks like now:
  64. Drag another Operator to the canvas.
  65. Copy-paste Filter: Blue in the Name field.
  66. Click New Operation.
  67. Click Select or create a new Value.
  68. Select the Filter 1 value.
  69.  Select Set Equal To as How do you want to change the Value option. This opens the How do you want to retrieve the reference Value field.
  70. Select Value Of. This opens the Which Value do you want to reference option.
  71. Click Select or create a new Value.
  72. Click Create a new Value.
  73. Copy-paste Static String: Blue in the Name field and set What kind of Value is this field to String. 
  74. Copy-paste Blue in the Default Value field.
  75. Click Save.
  76. Click Apply Operation.
  77. Click Save Operator. This is what the canvas looks like now:
  78. Drag another Operator to the canvas.
  79. Copy-paste Filter: Yellow in the Name field.
  80. Click New Operation.
  81. Click Select or create a new Value.
  82. Select the Filter 1 value.
  83. Select Set Equal To as How do you want to change the Value option. This opens the How do you want to retrieve the reference Value field.
  84. Select Value Of. This opens the Which Value do you want to reference option.
  85. Click Select or create a new Value.
  86. Click Create a new Value.
  87. Copy-paste Static String: Yellow in the Name field and set What kind of Value is this field to String. 
  88. Copy-paste Yellow in the Default Value field.
  89. Click Save.
  90. Click Apply Operation.
  91. Click Save Operator.

    This is what the canvas looks like now:
  92. Create an outcome from Example List: Display to Filter: Red with the Name and Label as Red.

    This is what the canvas looks like now:
  93. Create an outcome from Example List: Display to Filter: Blue with the Name and Label as Blue.

    This is what the canvas looks like now:
  94. Create an outcome from Example List: Display to Filter: Yellow with the Name and Label as Yellow.

    This is what the canvas looks like now:
  95. Drag another Operator to the canvas.
  96. Copy-paste Clear List in the Name field.
  97. Click New Operation.
  98. Click Select or create a new Value.
  99. Click Create a new Value.
  100. Copy-paste Example List: Filtered in the Name field.
  101. Set the What kind of Value is this field to List. This opens the option for What Type of Value is this.
  102. Click Select a Type.
  103. Select Example List.
  104. Click Save.
  105. Select Empty as the option for How do you want to change this Value field.
  106. Click Apply Operation.
  107. Click Save Operator.

    This is what the canvas looks like now:
  108. Create an outcome from Filter: Red to Clear List with the Name as Done.

    This is what the canvas looks like now:
  109. Create an outcome from Filter: Blue to Clear List with the Name as Done.
  110. Create an outcome from Filter: Yellow to Clear List with the Name as Done. This is what the canvas looks like now:
  111. Drag an Operator to the canvas.
  112. Copy-paste Get Next Item in the Name field.
  113. Click New Operation.
  114. Click Select or create a new Value.
  115. Click Create a new Value.
  116. Copy-paste Example List Builder Object in the Name field.
  117. Select Object as the choice for What kind of Value is this. This opens the option for What Type of Value is this.
  118. Click Select a Type.
  119. Select Example List.
  120. Click Save.
  121. Select Set Equal To as the choice for How do you want to change the Value.
  122. Select Next Record From as the option for How do you want to retrieve the reference Value.
  123. Click Select or create a new Value.
  124. Select Example List Data.
  125. Click Apply Operation.
  126. Click Save Operator.

    This is what the canvas looks like now:
  127. Create an outcome from Clear List to Get Next Item with Name as Done.

    This is what the canvas looks like now:
  128. Drag a Decision element to the canvas and place it next to the Get Next Item element.
  129. Copy-paste Is Done? in the Name field.
  130. Click Save Decision.
  131. Drag a Page to the canvas.
  132. Copy-paste Example Filtered List in the Name field.
  133. Click New Page Layout. This opens a new page layout in a new tab.
  134. Let’s save the page. Click the gears icon on the right-hand-side.

    This opens the Settings screen for the page.
  135. Copy-paste Example Filtered List in the Name and Label fields.
  136. Click Save.

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

    The page name changes from New Page to Example List: Display.
  138. Drag a Table component to the Main container of the page layout.

    This opens the configuration panel for the page component.
  139. Copy-paste Example Filtered List in the Name field.
  140. Click Select a Type under Data Source.
  141. Select Example List.
  142. Check the option for Get the data from a List Value. This opens the option for the Value that holds the data.
  143. Click Select or create a new Value.
  144. Select the Example List: Filtered list.
  145. Click Add Column.
  146. Select Name as the Property to use for this Column option.
  147. Type Name in the Label field. The Order should be 0. The Display this Column box should be checked.
  148. Click Apply Column.
  149. Click Add Column again.
  150. Select Color as the Property to use for this Column option.
  151. Type Color in the Label field. The Order should be 1. The Display this Column box should be checked.
  152. Click Apply Column.
  153. Click Save Component.

    This is what the page looks like now:
  154. Click the Save icon on the right-hand-side navigation to save the page.
  155. Click the Using Loops tab to go back to the canvas.
  156. Click Save Page.

    This is what the canvas looks like now:
  157. Drag a Decision element to the canvas and place it underneath the Is Done decision element.
  158. Copy-paste Is Filtered Item? in the Name field.
  159. Click Save Decision.

    This is what the canvas looks like now:
  160. Drag an Operator element to the canvas and place it beneath the Get Next Item element.
  161. Copy-paste Add to Filtered List in the Name field.
  162. Click New Operation.
  163. Click Select or create a new Value.
  164. Select Example List: Filtered.
  165. Select Update as the option for How do you want to change the Value.
  166. Select Value Of as the option for How do you want to retrieve the reference Value.
  167. Click Select or Create a new Value.
  168. Select Example List Builder Object.
  169. Click Apply Operation.
  170. We will add a second operation. Click New Operation again.
  171. Click Select or create a new Value.
  172. Select Example List Builder Object.
  173. Select Empty as the option for How do you want to change the Value.
  174. Click Apply Operation.
  175. Click Save Operator.

    This is what the canvas looks like now:
  176. Time to connect the dots.. erm.. elements! Create an outcome from the Get Next Item operator to the Is Done decision element. This is what the canvas looks like now:
  177. The Is Done? decision element can have two options – Yes and No. Let us draw them next. Drag an outcome from Is Done? to Example Filtered List.
  178. Copy-paste Yes in the Name field.
  179. Click the + icon to expand the Advanced options.
  180. Click Create Business Rules.
  181. Click New Rule.
  182. Click Select or create a new Value.
  183. Select Example List Builder Object.
  184. Click the caret and select Empty.
  185. Click Select or create a new Value.
  186. Select $True.
  187. Click Save.
  188. Click Save Outcome.

    This is what the canvas looks like now:
  189. Create an outcome from Is Done? to Is Filtered Item? with the Name as No. This is what the canvas looks like now:
  190. Drag an outcome from Is Filtered Item? to Add to Filtered List.
  191. Copy-paste Yes in the Name field.
  192. Click the + icon to expand the Advanced options if it is not already open.
  193. Click Create Business Rules.
  194. Click New Rule.
  195. Click Select or create a new Value.
  196. Select Example List Builder Object/Color.
  197. Click the caret and select = (is equal to).
  198. Click Select or create a new Value.
  199. Select Filter 1.
  200. Click Save.
  201. Click Save Outcome.

    This is what the canvas looks like now:
  202. Create an outcome from Is Filtered Item? to Get Next Item with the Name as No. This is what the canvas looks like now:

  203. Create an outcome from Add to Filtered List to Get Next Item with the Name as Done.

    This is what the canvas looks like now:
  204. Create an outcome from Example Filtered List to Example List Display with the Name and Label as Try Again.

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 60 minutes to build an app that .

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

Let’s select Blue.

Trying again?

We are taken to the first screen of the app.


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.