Skip to Content

Building freestyle IoT application

0 %
Building freestyle IoT application
// Explore More Tutorials

Building freestyle IoT application


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

You will learn

  • How to build the freestyle IoT application using SAP Web IDE Full-Stack

Step 1: Start SAP Web IDE Full-Stack

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

Start SAP Web IDE in IoT Explore tenant using

Step 2: Enable IoT Application Enable feature

In SAP 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 a template.

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


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

On Data Source step select:

  • Freestyle-IOTAS-ADVANCEDLIST-THING-ODATA as a service
  • all property sets for sap.iotaehandson2.computeriotdevice:generic_computer_3 thing type
    Click Next
Data Source

Choose 2 Column Layout and click Finish


SAP 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_iotaehandson2_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 Events and open Action Configuration dialog by selecting Wire to Action for the Row Select event.

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 SAP Web IDE.


Once the application starts, find and click on your computer in the list of things on the left (you can also look at other people’s computers). 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.


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


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


Back to top