Tutorial: Types with aliens (Episode 1)

What would you do, if you had to onboard a group of aliens living in the Delta quadrant to a mathematics program on Earth?

Don’t panic. We will build an app for that.

The app will use a Flow built-in element called type.

Here’s what we want to know about types. We can use types to create representations of real world things we are likely to use in our app. A type is very much like a value in that. (Quick refresher. Values in Boomi Flow are similar to variables in programming. They are containers that have a name, and contain data.) Here is where it gets better. A type can have properties! Why is this better? Because instead of creating hundreds of values, we can define a custom type with multiple properties, and create values that are of this custom type. This not only reduces time and effort, but makes app design and implementation exponentially simpler.

Here is a real-world example. Say, we are a university starting a new course on intergalactic mathematics. We want to build an app that gathers student information. What are some of the things we would want to collect? Home planet and age of the student. Name and telephone number for sure. Coursework. Emergency contacts. Grades and payment information perhaps. It would also be nice to know how many arms and legs our students have.

What is the best way to design this app?

If we want to build the app using values only, we can create a bunch of values that store our data: Student – Name, Student – Telephone, Student – Coursework, Student – Payment details, and so on. As we can imagine, this architecture is difficult to scale up for hundreds or thousands of students. Imagine having to keep track of multiple values per student! Not impossible, but unpleasant for sure. Besides, this model is also hard to extend. What if a student has the option of taking multiple courses? Do we then define a value for each course?

Of course, we don’t. A faster way to design/implement the information structure is to define a custom type called ‘Student’, and to add Name, Telephone, Coursework, Payment details, as properties of the student type. The coursework property can be a type itself – with a picklist of predefined courses (Linear algebra, Fourier analysis, Algebraic combinatorics, and so on).

Types are extensible. Let’s say we want to add a new property – we can update the Student type – and the changes will be available to all values of the Student type. Juxtapose that, with having to create new values for all the students!

Okay, end of lecture. Let’s get building!

This is what our canvas will look like, once we are done:

What we will need

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

We will build the app in multiple phases. The first step for man – creating a student type and displaying the data.


Creating a student type and displaying the data

The first thing we will do is create a type called Students.

  1.  Click LOG IN to login to the Boomi Flow Drawing Tool.
  2. Select Types.

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

    This takes us to the type creation screen.
  4. Enter Student in the Name field.
  5. Hmm.. what are some properties our intergalactic students will have? They will probably have arms and legs. A name for sure. Each of these characteristics will be a property of the Student type. Click New Property. This opens the screen for Student/Property.
  6. Type Name in the Name field. The next bit we need to figure out, is what kind of property is Name. Kinds are the basic data types supported by the Flow engine. A name is a string; let’s select String.
  7. Click Apply Property. This adds the Name property to our Student type.
  8. We will add a few more properties. Click New Property.
  9. Type Arms in the Name field, the What kind of property is this field should say String.
  10. Click Apply Property.

    This adds Arms as a property of the Alien type.
  11. Click New Property again.

    This time around, we account for Legs.
  12. Type Legs in the Name field, the What kind of property is this field should say String. We are saving the number of arms and legs as strings, because we will not be doing mathematical operations with the numbers.
  13. Click Apply Property.

    This adds Legs to the property list.
  14. Click New Property.
  15. Copy-paste Coursework Details in the Name field, select String for the What kind of property is this field.
  16. Click Apply Property.

    This adds Coursework Details to the property list.
  17. We can continue to add as many properties we need this way. For now, let’s save the type. Click Save Type.

    This saves the Student type (including the properties). We can access the type anytime from the Types tab in our tenant.
  18. What we will do next is create the flow that will use the types. Click Flows to open the Flows tab.
  19. Click New Flow.
  20. Select the ManyWho Identity Service for authentication and click Continue.
  21. Copy-paste Student List in the Name field. The Access field should say Anyone can run this flow. The Social feed for collaboration will be None.
  22. Click Start Building.

    This opens the canvas where we will build the flow.
  23. Drag a Page element from the sidebar to the canvas.

    This opens the Page configuration panel.
  24. Copy-paste Input in the Name field.
  25. Click New Page Layout. This opens a new tab called New Page.
  26. Click the gears icon on the right-hand-side.

    This opens the Settings screen for the page.
  27. Type Input in the Name and Label fields.
  28. Click Save.

    This saves the Name and Label for the page.
  29. Click the Save icon the right-hand-side navigation to save the page.

    The page name changes to Input.
  30. Drag a Input component to Main container.

    This opens the configuration panel for the Page Component.
  31. Type Name in the Name and Label fields.
  32. Check the box for Required.
  33. The Save the whole selection option under State should be checked.
  34. Click Select or create a new Value.
  35. Click Create a new Value.
  36. Copy-paste AlienName in the Name field. The What kind of value is this field should be String.
  37. Click Save.
  38. Click Save Component.

    This is what the screen looks like now:
  39. Drag another Input component to Main container. This opens the configuration panel for the Page Component.
  40. Type Arms in the Name and Label fields.
  41. Check the box for Required.
  42. The Save the whole selection option under State should be checked.
  43. Click Select or create a new Value.
  44. Click Create a new Value.
  45. Copy-paste AlienArms in the Name field. The What kind of value is this field should be String.
  46. Click Save.
  47. Click Save Component. This is what the screen looks like now:
  48. Drag another Input component to Main container. This opens the configuration panel for the Page Component.
  49. Type Legs in the Name and Label fields.
  50. Check the box for Required.
  51. The Save the whole selection option under State should be checked.
  52. Click Select or create a new Value.
  53. Click Create a new Value.
  54. Copy-paste AlienLegs in the Name field. The What kind of value is this field should be String.
  55. Click Save.
  56. Click Save Component.
  57. Click the Save icon to save the page. This is what the screen looks like now:
  58. Drag another Input component to Main container. This opens the configuration panel for the Page Component.
  59. Type Coursework in the Name and Label fields.
  60. Check the box for Required.
  61. The Save the whole selection option under State should be checked.
  62. Click Select or create a new Value.
  63. Click Create a new Value.
  64. Copy-paste AlienCoursework in the Name field. The What kind of value is this field should be String.
  65. Click Save.
  66. Click Save Component.
  67. Click Save to save the page. This is what the screen looks like now:
  68. Click the Student List tab to go back to the canvas.
  69. Click Save Page.

    This is what the canvas looks like now:
  70. Hover your mouse on StartThe mouse pointer changes from a crossbar to a hand.
  71. Drag an arrow from Start to Input. This opens a configuration panel on the right-hand side.
  72. Type Go in the Name text field.
  73. Click Save Outcome.

    This is what the canvas looks like now:
  74. Drag a Step element from the sidebar to the canvas.

    This opens the Step configuration panel.
  75. Copy-paste Student Data in the Name field.
  76. Copy-paste Name — in the content editor.
  77. Click Insert Value.

    This opens the Insert a Value dialog box.
  78. Select the AlienName value.

    This inserts a reference to the AlienName value in the content editor. When an user runs the app, it is going to show the data she entered for Name here.
  79. Copy-paste Arms — in the content editor.
  80. Click Insert Value.
  81. Select the AlienArms value.

    This inserts a reference to the AlienArms value in the content editor.
  82. Copy-paste Legs — in the content editor.
  83. Click Insert Value.
  84. Select the AlienLegs value.

    This inserts a reference to the AlienLegs value in the content editor.
  85. Copy-paste Coursework — in the content editor.
  86. Click Insert Value.
  87. Select the AlienCoursework value.

    This inserts a reference to the AlienCoursework value in the content editor.
  88. Click Save Step. This is what the canvas looks like now:
  89. Hover your mouse on InputThe mouse pointer changes from a crossbar to a hand.
  90. Drag an arrow from Input to Student Data.
  91. Type Go in the Name and Label text fields.
  92. 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 20 minutes to create a custom type and build an app using it.

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

Let’s go ahead and enter some information…

.. and click Go.

This is an example of a student type.

Next we will learn how to create a list of students of Type: Student (Episode 2), and how to add a picklist of subjects in coursework (Episode 3).


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.