SAP IoT Demo – Part 4

Hi All,

In this blog series I’ll continue to explain my learning journey on SAP IoT Application Enablement (CF). In this blog I’ll focus on the creation of the Fiori application using the “Freestyle IoT Application template”.

• part 1 – onboarding the device (prerequisite)
• part 2 – data ingestion (prerequisite)
• part 3 – SAP IoT Application Enablement (prerequisite)
• part 4 – creating an application using an IoT template in the Web IDE  

Proceed with next steps.

• Navigate to the SAP Web IDE Full-Stack.

• Enable the “IoT” Application Enablement” feature.

• Enable the “Storyboard” Feature.

• Navigate to “home” and create a “New Freestyle IoT Application”.

• Enter a Project Name, Namespace and Title.

• Select thing type “MT_GREENHOUSE” and click on button “OK”.

•  Click Next.

• Select “2 column layout”.

• The storyboard feature opens with an automatically created view called “Main.view.xml”.

• Add a new view called “GreenhouseConditions”. This view will show details for a selected thing.

• Result will look as next.

• Click on Design , then search for “Thinglist” in the controls and drag and drop the control in the first column. Then go to properties and select “List” for Control Type.

• Search for “Map” in the controls and drag and drop the control in the first column.

• Select the “Thing List” and navigate to events. Select “Wire to Action” for event Row Select.

• Select “doMapZoom” in the Action Configuration and click on button “Bind”.

• In this step we’ll enable the navigation to the screen “GreenhouseConditions”. Select “IoTThingCardElement” and select “Navigate to” for the event Single Thing Card Header Select

• Select “Propagate current context” for binding, for the other values keep the default.

• Select “Navigate to” for the event “Multi Thing Card Row Select”. Select “Propagate current context” for binding, for the other values keep the default.

• Switch back to Storyboard and notice that the navigation is created.

• Select the view “GreenhouseConditions”  and go to Design. Set property “Show Nav Button” to true

• Search for “SensorChart” in the controls and drag and drop the control in the view.

• Select the config button.

• Scroll down and double click on “ThingId”, then click on on button “Bind”.

• Run the application by clicking on button “Run”.

Thanks for reading and feel free to share comments/ feedback or any other meaningful inputs :).

Regards,

Bart