This page belongs to Implementation Guide: Smart city. This doc is a work in progress. We expect to ship this by March 10th. 2018. Thank you!
-
- We will create a new page layout called Car Park page.
- Add a container inside Main Container.
- Let’s call the container headercontainer. The Label field can be left blank.
- 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. - Click Save Container to save the container.
This is what the page layout looks like now: - Click Rows and change the settings of headercontainer from Rows to Columns.
- Drag a Presentation component to headercontainer.
This opens a configuration panel on the right. - Copy-paste Welcome in the Name field. Copy-paste Welcome to our app! in the content editor.
Click Save Component to save the component. - Let’s add a new container inside the headercontainer now.
- 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:
- Drag a Presentation component to weather conditional container. This opens a configuration panel on the right.
- Copy-paste weather rainfall in the Name field.
- Click View and then Source Code.
This opens a dialog box for Source code. - 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: {![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> - Click Ok to insert the code in the editor.
- Click Save Component.
This is what the page layout looks like now: - Add a second Presentation component to the weather conditional container. Copy-paste weather in the Name field.
- 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: {![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. - Click Save Component to save the component.
This is what the page layout looks like now: - Click the Add icon inside Main Container to add a second container.
- Let’s call this app container.
Click Save Container. - Click app container to pull up the settings menu. Change Rows to Columns.
- 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:
- Create a new container inside Thing 1 called carpark map container. The Label field will be blank.
- Click New Attribute.
- Copy-paste classes in the key field and mapcontainer in the value field. Click Apply Attribute.
- Click Save Container.
- Add a new container inside Thing 2 called outcome container. The Label field will be blank. Click Save Container when done.
- 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.
- 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.
- Click the Save icon to save the page.
- We will create a new page layout called Car Park page.