Design pattern: Iterations with loops, decisions, operators

Team Flow is working on this atm. We expect to release this doc by December 15th. 2018. Thank you.

OVERVIEW

You can configure your Flow app very easily to iterate through a list of items – sequentially, as well as based on both pre/postconditions. Everything you can think of doing programmatically with a while…do loop, or a repeat…until loop can be done faster with Flow. The loops can have multiple entry/exit points  (which you can configure with outcomes.)

Today, you are going to build an app that lets the end-user select one/many records from a table, and adds the items to a second table. You will be using the Decision and Operator elements to simulate a while loop here. As you will see, it is fairly simple.

When you are done, this is what your canvas will look like:

  1. You are going to use the Operator and Decision elements to iterate through a list, manipulating each record along the way.
  2. You are going to use an operator to set Working Object equal to the Next Record From your list value. You are then going to update that value with operations, and save it to the same or a different list.
  3. The loop comes in when you have the operator element routed to the decision, to check whether the Working Object is empty. If it is, then that indicates you’ve iterated through the whole list… You are ready to go back to the end of the loop, and continue the merry way of the rest of your execution route. 

Use-cases:

  • Keep updating the form until all data fields are filled
  • Escalate the approval process to all members of a committee
  • Filter a record
  • Employee on-boarding checklist

The app should not take you more than 30-minutes to build (plus, time to read the instructions).

You do not need to have any prior knowledge of Flow to be able to build the app – and yes, the app will work, should you wish to deploy it, or share the app URL with your team mates. 

Sit back, relax, and let’s build something cool together 🙂 


CREATING THE TYPES

You will be using two types in the app. Values of these two types will populate the table  from where the user is selecting the data items (Type A), and  the table where the value is added (Type B).

Okay, let’s create the types then. You will call them Type A and Type B respectively. 

Both the types will have two ContentString properties called Name and Value.

Here is what Type A looks like:

Save the types when done.


CREATING THE FIRST PAGE LAYOUT

You will create first one, and then another new page layout. Let’s get started with the configuration for the first page. First things first!

  1. Call the page Select Type A Records and save the page. The page name gets updated.
  2. Drag a Presentation component to the Main Container.

    This opens a component configuration panel on the right.
  3. Copy-paste Loops-Presentation in the Name field. Copy-paste Select a record/s from Table A and hit Next. The record will be added to Table B (which is made up of values of an entirely different data type), with a pattern of elements that creates a ‘while loop.’ If you like, you can add a headline called Loops or style the content further. Click Save Component when done.

    This is what the page layout looks like now:
  4. Drag a Table component to the container. This opens a configuration panel on the right.
  5. Let’s fill in Table A as the Name and Label for the table.
  6. Check the options for Editable and Multi Select.
  7. Click Select a Type.
  8. Select Type A.
  9. Check the option for Get the data from a List value. This opens the option for the Value that holds the data.
  10. Click Select or create a new value.
  11. Click Create a new value. This opens the value creation dialog box.
  12. Copy-paste Type A Table List in the Name field. The kind of value is List and the value is of Type A.
  13. You are going to be adding default object data. Click the Add icon.

    Copy-paste Table-A Name 1 in the Name field and Table-A Value 1 in the Value field. This is what it will look like:

    Let’s add a few more of these. Add three more Name-Value pairs like above — Table-A Name 2 and Table-A Value 2Table-A Name 3 and Table-A Value 3, and Table-A Name 4 and Table-A Value 4, respectively. Click Save when done.
  14. You will need to save the state created by the user. Click Select or create a new Value.
  15. Click Create a new Value.
  16. Copy-paste Selected Type A Records in the Name field. The kind of value is list, and the value is of Type A. Click Save when done.
  17. Remember what Shakespeare said? “It is not enough to merely createth a table. One must also create columns for data presentation.” Who are we to argue? Click Add Column.
  18. Select Name as the property to use for the column.

    Copy-paste Name in the Label field. The option for Display this column should be checked. Click Apply Column when done.
  19. You are going to be adding a second column. Click Add Column again.
  20. Select Value as the property to use for the column. Copy-paste Value in the Label field. The option for Display this column should be checked. Click Apply Column when done.
  21. Click Save Component.

    This is what the page looks like now:
  22. Let’s bring another table to the party! Drag another Table component to the Main container. This opens a configuration panel on the right.
  23. Copy-paste Type B List in the Name field and Table B (Read Only) in the Content field.
  24. The options for Editable, Required, Multi Select and Searchable under Settings should not be checked.
  25. Click Select a Type and select Type B from the list that opens.
  26. Check the option for Get the data from a List Value. This opens the option for the Value that holds the data.
  27. Click Select or create a new value and click Create a new value.
  28. Copy-paste Type B Table List in the Name field. The kind of value is List and the value is of Type A.
  29. You are going to be adding default object data. Click the Add icon.
  30. Copy-paste Table-B Name 1 in the Name field and Table-B Value 1 in the Value field.
  31. Let’s add one more default object data item. Click the Add icon and copy-paste Table-B Name 2 in the Name field and Table-B Value 2 in the Value field respectively. Click Save when done.
  32. We are going to be adding two columns for data presentation. Click Add Column.
  33. Select Name as the property to use for the column. Copy-paste Name in the Label field. The option for Display this column should be checked. Click Apply Column when done.
  34. You are going to be adding a second column. Click Add Column again.
  35. Select Value as the property to use for the column. Copy-paste Value in the Label field. The option for Display this column should be checked. Click Apply Column when done.

    This is what we have so far:
  36. Next up. You will be adding three attributes. You can add an attribute by clicking New Attribute, which opens the Page Component>Attribute screen, entering a key-value pair, and clicking Apply Attribute. These are the key-value pairs for the three attributes respectively: striped/trueborderless/true, and isRowSelectionDisabled/true. This is what the first attribute looks like:
  37. Click Save Component.
  38. Click the Save icon to save the page.
  39. Let’s get back to the flow we were working on, now.

CREATING THE SECOND PAGE LAYOUT

Alright.. let’s get started on creating the second page layout. This is the page that will show the results screen in the app.

  1. Click New Page Layout. This opens a new page layout. Let’s save the page as Show Result.
  2. We are going to be configuring two table components now. Since we know how to do this (from when we created the earlier page in this tutorial, we are going to take a few shortcuts in the instructions. If you want more details on how to create tables, please refer to the instructions above for the Select Type A Records page.
  3. Drag and drop a Table to the Main container.

    Let’s configure the table component, thusly:
    Name and LabelYou selected the following from Table-A (In this order)
    Settings: The options for Editable, Required, Multi Select and Searchable should be unchecked.

    — Under Data Source, the Type of data to be provided will come from Type  A.
    — The Get the data from a list value option should be checked.
    — The Value that holds the data is Selected Type A Records.
    This is what you will have so far:
  4. More configurations coming up! 🙂 We are going to be adding two columns for Data Presentation, both the columns will be displayed. The first column will display the Name property, the second column will display the Value property.
  5. You are going to be adding a new attribute now. Click New Attribute. This opens the Page Component>Attribute configuration screen. Copy-paste isRowSelectionDisabled as the Key for the attribute, and true as the Value for the attribute. Click Apply Attribute.
  6. Done! Let’s click Save Component to save the table.
  7. Time to drag another Table to the Main container container.
  8. Let’s configure the table component, thusly:
    Name and Label: We iterated through the list and added them to the list in Table B.
    Settings: The options for Editable, Required, Multi Select and Searchable should be unchecked.

    — Under Data Source, the Type of data to be provided will come from Type  B.
    — The Get the data from a list value option should be checked.
    — The Value that holds the data is Type B Table List.
    This is what you will have so far:
  9. Yes, indeed. A couple more configurations coming up! 🙂 We are going to be adding two columns for Data Presentation, both the columns will be displayed. The first column will display the Name property, the second column will display the Value property.
  10. You are going to be adding three new attributes now. The first will have striped as the Key and true for Value; the second will have borderless as the Key and true for Value; the third attribute will have isRowSelectionDisabled as the Key and true for Value.
  11. Done! Let’s click Save Component to save the table.
  12. Time to save the page as well.

CREATING A NEW FLOW

Elementary, my dear Watson. You will of course, need a new flow. 

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

  1. Click Flows to open the Flows tab.
  2. Create a new flow called Loops! The app is going to be public; that is you are not asking your end-users to authenticate themselves.
  3. Drag a Page element to the canvas.

    This opens a configuration panel.
  4. Let’s call the page Select Type A Records.
  5. Uncheck the option for Only show Page Layouts already being used in this Flow.

  6. Select the Select items from Type A page from the Save Page dropdown menu.
  7. Click Save Page.

    This is what the canvas looks like now:

CONFIGURING THE FIRST LOOP

  1. Drag an Operator element to the canvas.

    This opens a configuration panel.
  2. Copy-paste Operate Loop Phase 1 in the Name field.
  3. Click New Operation. This opens the Operation screen.
  4. Click Select or create a new Value.
  5. Click Create a new Value.
  6. Copy-paste Working Type A Object in the Name field. Select Object as the kind of value.
    This opens the option for type.
  7. Click Select a Type, and select Type AClick Save when done.
  8. Select Create New as the option for How do you want to change the value.
  9. Click Apply Operation.
  10. You are going to be adding two more operations. Click New Operation.
  11. Click Select or create a new Value and click Create a new Value.
  12. Copy-paste Working Type B Object in the Name field.
  13. Select Object as the kind of value. This opens the option for type.
  14. Click Select a Type and select Type B.
  15. Click Save to save the value.
  16. Select Create New as the option for How do you want to change the value.
  17. Click Apply Operation to save the operation.
  18. Time for the last operation. Click New Operation.
  19. Click Select or create a new Value.
  20. Select Working Type A Object from the list of values.

  21. Select Set Equal To as the option for How do you want to change the Value. This opens the option for retrieving the reference value.
  22. Select Next Record From.

    This opens the option for the value you want to reference.
  23. Click Select or create a new Value.
  24. Click Create a new Value.
  25. Copy-paste Selected Type A Records in the Name field. The kind of value is List, and the type of value is Type A. Click Save to save the value.
  26. Click Apply Operation to save the operation.
  27. Click Save Operator to save the operations.

    This is what the canvas looks like now:
  28. Create an outcome from Select Type A Records to Operate Loop Phase 1 called Next.

CONFIGURING THE SECOND LOOP

  1. Next up: Drag an operator to the canvas under the first operator, thusly:

    This opens a configuration panel.
  2. Copy-paste Operate Loop Phase 2 in the Name field.
  3. Click New Operation.

  4. Click Select or create a new Value and select Working Type B Object / Label.

  5. Select Set Equal To as the option for How do you want to change the ValueThis opens the option for How do you want to retrieve the reference value.
  6. Select Value Of. This opens the option for which value you want to reference.
  7. Click Select or create a new Value.
  8. Select the Working Type A Object / Label value.
  9. Click Apply Operation.

  10. You are going to add two more operations. Exactly like you did. Yes; easy peasy. Click New Operation.

  11. Click Select or create a new Value and select Working Type B Object / Value.
  12. Select Set Equal To as the option for How do you want to change the value.
  13. Select Value Of as the option for How do you want to retrieve the reference value.
  14. Click Select or create a new Value.
  15. Select Working Type A Object / Value.
  16. Click Apply Operation to save the operation.

  17. You are going to be adding the third operation next. Click New Operation.
  18. Click Select or create a new Value and select Type B Table List.
  19. Select Update as the option for How do you want to change the value.
  20. Select Value Of as the option for How do you want to retrieve the reference value.
  21. Click Select or create a new Value and select Working Type B Object.
  22. Click Apply Operation to save the operation.
  23. Click Save Operator to save the operations.

    This is what the canvas looks like now:
  24. Create an outcome from Check if Loop is Done to Operate Loop Phase 2 called Not Done. This is what the canvas looks like now:
  25. Create an outcome from Operate Loop Phase 2 to Operate Loop Phase 1 called Done. This is what the canvas looks like now:

ADDING THE DECISION

  1. We will need to check if the loop is complete. Let’s add a Decision element to the canvas.

    This opens a configuration panel.
  2. Copy-paste Check if Loop is Done in the Name field.
  3. Click Save Decision. This is what the canvas looks like now:

  1. We will need to check if the loop is complete. Let’s add a Decision element to the canvas.

    This opens a configuration panel.
  2. Copy-paste Check if Loop is Done in the Name field and click New Outcome.
  3. Copy-paste Working Object Empty: Is Done in the Name field.
  4. Click Apply Outcome.
  5. You are going to be adding another outcome. Click New Outcome again.
  6. Copy-paste Not Done in the Name field.
  7. Click Apply Outcome. Okay.. Let’s save the decision. Click Save Decision.

    This is what the canvas looks like now:
  8. Create an outcome from Operate Loop Phase 1 to Check if Loop is Done called Done.

IT’S A WRAP

Time to add the last piece to the app! The Show Results page.

  1. Drag a Page element to the canvas.

    This opens a configuration panel.
  2. Let’s call the page Show Results.
  3. Uncheck the option for Only show Page Layouts already being used in this Flow.

  4. Select the Show Result page from the Save Page dropdown menu.
  5. Click Save Page.

    This is what the canvas looks like now:
  6. Create an outcome from Check if Loop is Done element to the Show Result page called Working Object Empty: Is Done.

CONFIGURING THE DECISION

  1. We will need to check if the loop is complete. Let’s add a Decision element to the canvas.

    This opens a configuration panel.
  2. Copy-paste Check if Loop is Done in the Name field and click New Outcome.
  3. Copy-paste Working Object Empty: Is Done in the Name field.
  4. Click Apply Outcome.
  5. You are going to be adding another outcome. Click New Outcome again.
  6. Copy-paste Not Done in the Name field.
  7. Click Apply Outcome. Okay.. Let’s save the decision. Click Save Decision.

    This is what the canvas looks like now:
  8. Create an outcome from Operate Loop Phase 1 to Check if Loop is Done called Done.

IT’S A WRAP

Time to add the last piece to the app! The Show Results page.

  1. Create an outcome from Start to the Select Type A Records page called Go.
  2. Create an outcome from Check if Loop is Done element to the Show Result page called Working Object Empty: Is Done.

APPCHIEVEMENT

APPCHIEVEMENT

CREDITS

The solutions architect for this app is Dell Boomi’s very own Chris Cappetta. One of our brightest engineers, Chris is known within Boomi to be able to build applications without nourishment or sleep for hours, or even days, on ends. 

The editorial lead for the project is Sophie Banerjee.