Smart city — Car park page

This page belongs to Implementation Guide: Smart city. This doc is a work in progress. We expect to ship this by October 17th. 2018. Thank you!

1. 1. We will create a new page layout called Car Park page.
      
   2. Add a container inside Main Container.
      
   3. Let’s call the container headercontainer. The Label field can be left blank.
      
   4. Click New Attribute. Copy-paste classes in the The key for the Attribute field and weatherbox in the The value for the Attribute field.
      
      Click Apply Attribute.
   5. Click Save Container to save the container.
      
      This is what the page layout looks like now:
      
   6. Click Rows and change the settings of headercontainer from Rows to Columns.
   7. Drag a Presentation component to headercontainer.
      
      This opens a configuration panel on the right.
   8. Copy-paste Welcome in the Name field. Copy-paste Welcome to our app! in the content editor.
      
      Click Save Component to save the component.
   9. Let’s add a new container inside the headercontainer now.
      
   10. Copy-paste weather conditional container in the Name field. The Label field can be empty. Click Save Container. This is what the page layout looks like now:
       
   11. Drag a Presentation component to weather conditional container. This opens a configuration panel on the right.
   12. Copy-paste weather rainfall in the Name field.
   13. Click View and then Source Code.
       
       This opens a dialog box for Source code.
   14. Copy-paste the following inside the dialog box:
       <h5 style=”text-align: center;”><strong>Weather near you:</strong></h5>
       <p style=”text-align: center;”>Air Temperature:&nbsp;{![air temp]} celsius</p>
       <h4 style=”text-align: left;”><img style=”display: block; margin-left: auto; margin-right: auto;” src=”https://files-manywho-com.s3.amazonaws.com/97d13c5b-c52a-4f69-a8d7-eee246bbacee/rainfall.png” alt=”” width=”25″ height=”25″ /></h4>
       
   15. Click Ok to insert the code in the editor.
   16. Click Save Component.
       
       This is what the page layout looks like now:
       
   17. Add a second Presentation component to the weather conditional container. Copy-paste weather in the Name field.
   18. Click View > Source Code and copy-paste the following in the dialog box:
       <h5 style=”text-align: center;”><strong>Weather near you:</strong></h5>
       <p style=”text-align: center;”>Air Temperature:&nbsp;{![air temp]} celsius</p>
       <h4 style=”text-align: left;”><img style=”display: block; margin-left: auto; margin-right: auto;” src=”https://files-manywho-com.s3.amazonaws.com/97d13c5b-c52a-4f69-a8d7-eee246bbacee/download.png” alt=”” width=”27″ height=”27″ /></h4>
       Click Ok to save the code.
   19. Click Save Component to save the component.
       
       This is what the page layout looks like now:
       
   20. Click the Add icon inside Main Container to add a second container.
       
   21. Let’s call this app container.
       
       Click Save Container.
   22. Click app container to pull up the settings menu. Change Rows to Columns.
       
   23. We will add two containers inside the app container called Thing 1 and Thing 2 respectively. The Label fields for both these containers will be blank. When we are done, this is what the page layout will look like:
       
   24. Create a new container inside Thing 1 called carpark map container. The Label field will be blank.
   25. Click New Attribute.
       
   26. Copy-paste classes in the key field and mapcontainer in the value field. Click Apply Attribute.
       
   27. Click Save Container.
       
   28. Add a new container inside Thing 2 called outcome container. The Label field will be blank. Click Save Container when done.
   29. Drag a Presentation component to the outcome container. Copy-paste Select in the Name field. Copy-paste View Taxi Availability in the content editor. You can format the text if you like, as well. Click Save Component.
   30.  Drag an Outcomes component to the outcome container. Copy-paste Taxi Outcome in the Name field. The Label field can be blank. The option for Save the whole selection should be checked. Click Save Component.
   31. Click the Save icon to 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.