Creating the Case Detail page

Work in progress! The Flow team is working on finishing this…
Please browse the rest of the site.. or click the Help button (bottom-right corner) if we may help you with anything.
Live long and prosper! Thank you.
    1. We need to create a type called Chart with four properties – Label, Data, Border color, and Background color.
    2. We will create a new page layout called Case Detail.
    3. We will next 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 six new containers inside the Details container next. The Names/Labels of the containers are as as follows – Insights, Device details, Geo location, Device feed, Device control, Device history. This is what the page layout looks like now (from a bird’s eye view!):
    6. Time to add a few charts! Three charts to be precise. Won’t it be nice, if we can have the charts show side by side though? Yup! Change the settings of the Trend analysis container from Rows to Columns.
    7. Let’s add the first column.
    8. We will use the Name as Lux and Label as Luminosity.
    9. Let’s add another column now.

      We will use the Name as Temp and Label as Temperature. This is what the columns will look like:
    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.
    13. The data will come from a list value. Let’s create a new value, and call it Chart Data 1. Chart Data 1 is going to be a list of that Chart type.
    14. The data comes to us at roughly 5-second intervals. Let’s go ahead and add four default data objects. We will leave everything else blank; and populate the Label field as 5 secs, 10 secs, 15 secs, and 20 secs respectively.
    15. The Save the whole selection option under State should be checked.
    16. We will add two columns for data presentation; showing the Label and Data properties respectively.

      We can label the columns as Label and Data as well. Both will be displayed. Here is how the Label column configuration looks like:

      Once we are done, this is what the Data Presentation configuration will look like:
    17. Alrite! Chart 1; mission accomplished! Let’s save the component.
    18. Time to add a second column! We can name and label the column Temperature
    19. And invite a second line chart to the party in the Temperature column.
    20. Let’s name the chart Temperature and label it Temperature (in Centigrade).
    21. The type of data to be provided under the Data Source option is going to be Chart.
    22. The data will come from a list value. Let’s create a new value, and call it Chart Data 2. Chart Data 2 is going to be a list of that Chart type.
    23. The Save the whole selection option under State should be checked.
    24. 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:
    25. Once we save the component, it is time to add a third column.
    26. The column will sport Humidity as the Name and Label.
    27. We will add the third line chart in this column.
    28. Let’s name the chart Humidity with the Label as Humidity (in %).
    29. The type of data to be provided under the Data Source option is going to be Chart.
    30. The data will come from a list value. Let’s create a new value, and call it Chart Data 3. Chart Data 3 is going to be a list of that Chart type.
    31. The Save the whole selection option under State should be checked.
    32. 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 Data Presentation configuration will look like:
    33. Let’s save the component. This is what the page layout looks like now:
    34. Let’s configure the Insights row now. This row will also columns; so we can change the settings from Row to Columns.
    35. We will use a presentation component.
    36. Let’s call it Insights and click View > Source code.
    37. Copy-paste the following code block in the dialog box:
    38. Click Ok and then save the component.
    39. We will add a second column to the Insights row now, with the Name as Combined map. This column does not need a label.
    40. Change the setting of the Combined map column from Rows to Chart.
    41. We will use another line chart component in the Combined map column. Let’s name the chart Temp and use Temperature as Label.
    42. The type of data to be provided under the Data Source option is going to be Chart.
    43. The data will come from a list value. Let’s create a new value, and call it Chart Temp. Chart Temp is going to be a list of that Chart type.
    44. The Save the whole selection option under State should be checked.
    45. We will add two columns for data presentation; showing the Label and Data properties respectively. Both will be displayed. We do need to add any labels for the table.
    46. Let’s add another line chart to the Combined map column.
    47. We will use Humidity as the Name/Label for the chart.
    48. The type of data to be provided under the Data Source option is going to be Chart.
    49. The data will come from a list value. Let’s create a new value, and call it Chart Humid. Chart Humid is going to be a list of the Chart type.
    50. The Save the whole selection option under State should be checked.
    51. Like before, we will add two columns for data presentation; showing the Label and Data properties respectively. Both will be displayed. We do need to add any labels for the table.
    52. We can go ahead and save the component. This is where are now:

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.