Skip to Content
Previous

Building freestyle IoT application

By Vitaliy Rudnytskiy

Building freestyle IoT application using SAP Web IDE Multi-Cloud in SAP Cloud Platform

You will learn

You will learn the workflow of building the freestyle IoT application using SAP Web IDE Multi-Cloud

Details


Step 1: Start SAP Web IDE Multi-Cloud Version

SAP Web IDE, multi-cloud version is a powerful, extensible, web-based integrated development tool that simplifies end-to-end application development for SAP Cloud Platform.

Start Web IDE in IoT Explore tenant using https://webidecp-a8a3863fc.dispatcher.hana.ondemand.com/

Web IDE MC
Step 2: Enable IoT Application Enable feature

In Web IDE go to Preferences, then Features. Find IoT Application Enablement feature and turn it on.

Make sure following features are turned on as well: Layout Editor and Storyboard.

Web IDE MC - Features
Step 3: Start the new project from the template

Now go to Development. Right click on Workspace and choose the creation of a new project from the template.

New
Step 4: Create the app using wizard

Choose Freestyle IoT Application from the Internet of Things category. Click Next
Choose template

Type computeriot as a project name and your user id as the namespace. Click Next
Names

Leave everything as it is on the Template Customization step. Click Next

On Data Source step select:
- Freestyle IoT: Things OData Service as a service
- all property sets for sap.iotaeexplore.computeriotdevice:generic_computer thing type
Click Next

Data Source

Choose 2 Column Layout and click Finish

Layout

The Web IDE will generate the code and will open the new application in the Layout Editor.
Layout Editor

Step 5: Place components on the layout

Drag the ThingList control to the left pane of the application’s view. Drag SensorChart control to the right pane.

Controls on the layout

Now you can hide the controls to increase the real estate of the workspace.
Hide controls pane

Step 6: Customize the list of things

First bind the data. Click anywhere on the ThingList Element to select it. Then go to Properties and open a Query Designer by clicking on cogs.
Open query designer

In the Query Designer select /Things entity set. Then expand associations to all displayed sets. Then click Ok.

Query Designer

A dialog “A template will be created from selected control…” will be displayed. Click Ok

Now bind columns to data values. Select the first thing list column element (with element id __column0) and change its Text value from Row 0 Column 1 to {ThingId}. You can do it using a data binding dialog.

Data binding for column 1

Repeat the same for the thing list column element from the second column (with element id __column1). Change its Text value to {ThingName}.

Repeat the same for the third column changing its Text to {DYN_ENT_sap_iotaeexplore_computeriotdevice__Default/Default.common_name}. That’s the common name property from the associated Default properties set. The easiest is to do this using the dialog for the text’s data binding.
Text data binding

Next change column names to ID, Name and Common name.
Column names

Next define the action of the chart refresh when another thing is selected from the list. Click on the higher element ThingList, then Actions and open Action Configuration dialog for the Row Select action.
Open action configuration

Select doReload action with the thing context. Click Ok
Action configuration

Step 7: Customize sensors chart

Now select SensorChart element and change its properties:
- No of Hours to 1
- Header Title to Resources usage
- Subheader Title to in %
Customize chart

Step 8: Run the application

Run your developed application by clicking on the green Run button in the upper left corner of the Web IDE.
Run

Once the application started find and click on your computer in the list of things on the left. The chart on the right will be refreshed with the collected measurements sent by the Python program from the physical computer.

Alert thresholds of 45% and 90%, which you defined in the Thing Modeler earlier, are displayed on the chart.
Application!

Congratulations! You built your IoT application using your computer as an IoT device and its CPU as a sensor.


Optional

Step 9: Play with other parameters

You can play now with different parameters in the Layout Editor and see how it changes your application.

Next Steps

Updated 12/12/2017

Time to Complete

20 Min

Beginner

Next Steps

Next
Back to top