Building a ridiculously complex page (rather easily)

Today we are going to be building a ridiculously complex page, as part of a smart farm IoT app we are working on. The page showcases case data from Salesforce, sensor data from an IoT gateway device, as well as device data including geo location, and device history, plus multiple charts. We will have groups and tabs and tables and business rules. All sorts of fun things!

Can you imagine how much time/effort it will take if we are to code this page?  Oh dear! Lucky we are going with the Flow!

Though the page is jam-packed with components, containers, charts, tables, geolocation data (Google Maps), inputs.. all we will need to do is drag and drop elements, copy-paste text, and save our work from time to time. We should be done building in less than an hour, give or take a bit of time for reading the instructions.

If you are building the smart farm app along with us, here is how we are building the case detail page.

If you are not building the app, but want to see how easy it is to build complex pages with charts, multiple components and containers, you may find the procedures super helpful. For the purpose of just learning how to build the page, we have hardcoded the values beforehand… in real-life we will be getting the values from the respective services.

This is a bird’s eye view (at 35% magnification) of what the page layout will look like, once we are done building:

If we overlay containers on top of this, this is a slice:

  • Click here to download the procedures without any screenshots
  • Click here to download a flow with the page layout already built in

Let’s get building!

  1. We will create a new page layout called Case Detail.
  2. Save the page. It is recommended that we keep saving the page periodically as we work.
  3. We will create two containers inside the main container called Detail and End respectively.

    We will leave the label fields blank for both.
    This is what the page layout will look like when we are done with this step.
  4. More containers needed! Let’s create a new container called Dashboard with Trend analysis as Label, inside the Details container. This is what the page layout looks like now:
  5. We will add two new containers additionally, inside the Details container next.

    The Names/Labels of the containers are Insights, and Device details. This is what the screen will look like when we are done:
  6. We will change the settings of the Device details container to Group.
  7. We will add six containers inside the Device details container now. The containers will have the Name/Label as Geo location, Device feed, Device control, and Device history respectively. This is what the Device Details container looks like now:
  8. Enough with the containers already! Time for columns and components! Time to add a few charts! Three charts to be precise. This is what the charts will look like in the app:
    Change the settings of the Trend analysis container from Rows to Columns.
  9. Let’s add the first column — We will use the Name as Lux and Label as Luminosity. Let’s add another column now.We will use the Name as Temp and Label as Temperature. This is what the page looks like so far:
  10. Drag a Charts>Line component to the Luminosity column.
  11. The chart will have the Name/Label as Lux.
  12. Remember the type called Chart we created earlier? The type of data to be provided under the Data Source option is going to be Chart. Click Select a Type and select Chart.
  13. The data will come from a list value. Let’s select Chart Data 1 as the value that holds the data.
  14. The Save the whole selection option under State should be checked. This is what the configuration looks like so far:
  15. Scroll down the configuration panel. We will add two columns for data presentation; showing the Label and Data properties respectively. Click Add Column to start adding the columns.

    We can label the columns as Label and Data as well. Both will be displayed. Click Apply Column when done, to add the column.
    Let’s take a look at what the configuration for the Label property looks like:

    We will do the same thing for the Data property. Once we are done, this is what the Data Presentation configuration will look like:
  16. Alrite! Chart 1; mission accomplished! Let’s save the component. This is what the page we’ve built (well, you’ve built 🙂 ) looks like now:
  17. Let’s invite a second line chart to the party in the Temperature column.
  18. Let’s name the chart Temperature and label it Temperature (in Centigrade).
  19. The type of data to be provided under the Data Source option is going to be Chart.
  20. The data will come from a list value. Click Select or create a new value and then select ChartTemp.
  21. The Save the whole selection option under State should be checked. This is what the configuration looks like so far:
  22. Scroll down the configuration panel. We will add four columns for Data Presentation; showing the Label, Data, Border color and Background color properties respectively. We will leave the labels blank for the columns. All four columns will be displayed. Once we are done, this is what the Data Presentation configuration will look like:
  23. Once we save the component, this is what the page will look like:
  24. It is time to add a third column.
  25. The column will sport Humidity as the Name and Label.
  26. We will add a line chart to this column.
  27. Let’s name the chart Humidity with the Label as Humidity (in %).
  28. We know the drill! The type of data to be provided under the Data Source option is going to be Chart.
  29. The data will come from a list value. We will click Select or create a new value and select the ChartHumid value.
  30. The Save the whole selection option under State should be checked. This is what the configuration looks like so far:
  31. Like before, we will add four columns for data presentation; showing the Label, Data, Border color and Background color properties respectively. We will leave the labels blank for the columns. All four columns will be displayed. Once we are done, this is what the configuration will look like:
  32. We must save the component, of course.
    This is what the page layout looks like now:
  33. We will configure the Insights row next. This row will also showcase columns; so we can change the settings from Row to Columns.
  34. We will use a presentation component.
  35. Let’s call the component Insights.
  36. Click View > Source code.

    This opens the Source code dialog box.
  37. Copy-paste the following code block in the dialog box:
  38. Click Ok.
  39. Click Save Component.

    This is what the page layout looks like now:
  40. We will add a second column to the Insights row now, with the Name of the container as Combined map.

    This column does not need a label.
  41. Change the setting of the Combined map column from Rows to Chart.
  42. We will use another line chart component in the Combined map column. Let’s name the chart Temp and use Temperature as Label.
  43. The type of data to be provided under the Data Source option is going to be Chart.
  44. The data will come from a list value. Click Select or create a new value and select ChartTemp.
  45. The Save the whole selection option under State should be checked. This is what the configuration looks like so far:
  46. Scroll down to Data Presentation. We will add two columns; showing the Label and Data properties respectively. Both will be displayed. We don’t need to add any labels for the table. This is what the configuration looks like:
  47. We will save the component.
  48. Let’s add another line chart to the Combined map column.
  49. We will use Humidity as the Name/Label for the chart.
  50. The type of data to be provided under the Data Source option is going to be Chart.
  51. The data will come from a list value. Let’s select ChartHumid.
  52. The Save the whole selection option under State should be checked. This is what the configuration looks like so far:
  53. Like before, we will add two columns for data presentation; showing the Label and Data properties respectively. Both will be displayed. We don’t need to add any labels for the table. This is what the configuration looks like:
  54. We can go ahead and save the component. This is where are now:

    The fun is just getting started!
  55. Let’s add a new container.
  56. The Name/Label of the container will be Case details.
  57. Let’s shake things up a bit! How about doing the whole attribute thing? Let’s add a new attribute for the container.

    We want the container to be aligned center. Enter align and center in the key and value fields respectively.
  58. Click Apply Attribute.
  59. Click Save Container.
  60. Change the Case details container from Row to Columns.
  61. Add two columns with the names Thing 1 and Thing 2 respectively. The label field can be empty.
    This is what the column looks like now:
  62. Drag an Input component to Thing 1.
  63. We will use Case# as the Name and Label.
  64. Uncheck the box for Editable… A Size of 25 and Maximum characters of 255 is good.
  65. Check the option for Save the whole selection. This is what the configuration looks like so far:
  66. Scroll down and click Select or create a new value.
  67. Select the CaseMock/Number value.
  68. Click Save Component to save the component.This is what the page layout looks like now:
  69. We will now create three additional rows of Input components in the Thing 1 column.

    We shall call the rows Date created, Reason, and Details. The rows will have the same label as the names. This is what the layout will look like when we are done:
  70. Let’s start with the rows one by one, and configure them. We begin with the Date Created row.
  71. Drag an Input component to the row. We will use the Name/Label as Date created.
    The option for Editable will be unchecked. The size and maximum characters can be 25 and 255 respectively. The option for Save the whole selection should be checked. This is what the configuration looks like now:
  72. Click Select or create a new Value.
  73. Select the CaseMock/Created Date value and click Save Component. This is what the page layout looks like now:
  74. Drag an Input component to the Reason row.
  75.  Copy-paste Reason in the Name and Label fields. The option for Editable will be unchecked. We will use 400 as the Size and 10001 as Maximum Characters for Reason, thusly:
  76.  The option for Save the whole selection should be checked. Click Select or create a new Value and select the CaseMock/Reason value.
  77. Click Save Component to save the component.
  78. Drag an Input component to the Details row.
  79.  Copy-paste Details in the Name and Label fields. The option for Editable will be unchecked. We will use 400 as the Size and 10001 as Maximum Characters.
  80. The option for Save the whole selection should be checked. Click Select or create a new Value and select the CaseMock/Description object value. Click Save Component when done. This is what the layout looks like now:
  81. We will use three Input components for the Thing 2 column as well.
  82. The first one will be called Asset ID. The option for Editable will be unchecked. We will use 25 as the Size and 255 as Maximum Characters. We will be saving the selection made by the user. Click Select or create a new Value, and save the selections to CaseMock/Asset ID. This is what the configuration looks like:
  83. Click Save Component when done.
  84. Drag another Input component to Thing 2. We will call this Source.
    The option for Editable will be unchecked. We will use 25 as the Size and 255 as Maximum Characters.  The option for Save the whole selection should be checked. Click Select or create a new Value and select the CaseMock/Origin value. Click Save Component when done. This is what the configuration looks like now:
  85. Drag another Input component to Thing 2. We will call this Type. The option for Editable will be unchecked. We will use 25 as the Size and 255 as Maximum Characters. The option for Save the whole selection should be checked. Click Select or create a new Value, and select the CaseMock/Type. Click Save Component when done. This is what the page layout looks like now:
  86. Scroll up to the Geo location row. Drag and drop a Presentation component.
  87. We will call the component Geo location. Click View > Source code and copy-paste this code in the Source code section of the content editor:

    Click Ok when done.

    Click Save Component. This is what the row will look like:
  88. We will use a table component for the Device feed row.
  89. We will name the table Data. It does not need a label. The table will be Searchable.
  90. Click Select a Type and select the Chart type. We will get the data from a list value. Click Select or create a new value and select the Chart Data 1 value.
  91. Scroll down to Data Presentation. We will add two columns. Select Label as the property to use for the first column. The label will be Date created. Select Data as the second property. The label will be Lux.
  92. Click Save Component when done.
  93. Change the Settings for the Device control container from Rows to Columns.
  94. Let’s drag and drop a presentation component in the Device control row. We can name the component XDK.
  95. Click View > Source code and copy-paste the following lines of code:
    <p style=”text-align: justify;”>
    <img src=”https://files-manywho-com.s3.amazonaws.com/0845f4fe-fba7-4482-a8f6-49ed44cbb9d2/download_v2.png” width=”300″ height=”147″ /></p>
    Click Ok.

    Click Save Component.
    This adds the XDK image. Neat, right? Okay. We are getting deliciously close to the finish line.
  96. Add a second container to the Device control row.
  97. We will call the container Image. This container does not need a label.
  98. We will add two toggle components to the Image column. Let’s start with the first one.
  99. We will call the first toggle Mode and label it Auto/Manual.
  100. The option for Editable should be checked. The option for saving the whole selection should be checked as well.
  101. Click Select or create a new value and then Create a new value. We will create a new Boolean value called DeviceMode to save the selection.
  102. Click Save to save the value. Click Save Component to save the component. This is what the row looks like now:
  103. Time to get the second toggle component! We will call the second toggle Device status and label it Device status (OFF/ON). The option for Editable should be checked. The option for saving the whole selection should be checked as well.
  104. We will create a new Boolean value called DeviceToggle to save the selection. So far all this has been exactly like the first toggle we configured earlier.. Here is a plot twist! We will add an attribute!
  105. Click New Attribute.

    The key for the attribute is background and the value for the attribute is danger.

    Click Apply Attribute to apply the attribute. Click Save Component to save the component. This is what the row looks like now:
  106.  Drag a Table to the Device History row. We will use Case history as the Name/Label for the table. The table will be searchable. Click Select a Type and CaseMockType as the type of data to be provided. We will be getting the data from a list value. Click Select or create a new value and CaseMockLists. This is what the configuration looks like so far:
  107. Scroll down to Data Presentation. We will add four columns for data presentation, to showcase the CreatedDate, Number, Reason, and Status properties. We will use the labels Date created, Number, Reason, and Status for the respective properties. This is what the configuration looks like:
  108. Click Save Component when done. This is what the row looks like:
  109. Scroll down the page. We will add an Outcomes component to the End row.
  110. Let’s call the component Outcome. We do not need a label. The option for Save the whole selection should be checked. This is what the configuration looks so far:
  111. We will add a new attribute with the key-value as justify and center.

    Let’s apply the attribute and save the component.
    This is what the row looks like now:
  112. Save the page. We are done! Well.. almost done. We will quickly add page conditions now. Click Page Conditions.

    This opens a configuration panel for page conditions.
  113. Click New Page Condition.
  114. We must have a page rule! Click New Page Rule.
  115. Alright! This is how the configuration will go:
    Select Mode as the Left Page Component.
    Select Value as the Metadata Type.
    Select Equal To as the Criteria.
    Select Value as the Metadata Type again.
    Select $True as the Right Value.

    Click Apply Rule.
  116. Select AND as the Comparison Type.
  117. Click New Page Operation.
  118. This how the configuration will go:
    Select Device status as the Assignee Page Component.
    Select Visibility as the Metadata Type.
    Select Value as the Metadata Type.
    Select $True as the Assignor Value.

    Click Apply Operation when done.
  119. Click Apply Condition.
  120. Click Save Page Conditions.
  121. Save the page!

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.