SAP IoT – WebIDE templates and controls

In our previous blogs we have defined our Devices and Things as well as how to analyze the data to create Rules and Actions. In this blog I’ll like to present the available SAP IoT WebIDE templates and controls.

SAP Web IDE is a powerful, extensible, web-based integrated development tool that simplifies end-to-end full-stack SAP application development.

A generic Internet of Things application for all use cases or for a specific domain is difficult to define because requirements can vary across use cases. However, there is a set of user interface components and functionality that is required in most IoT applications. For example, maps are useful to visualize the overall status. Graphs are useful to analyze the data and determine where action must be taken.

SAP WebIDE offers a set of SAP IoT Reuse Controls and Templates that have been designed specifically for IoT applications.

SAP IoT controls

IoT reuse controls offer you a focused scope of SAPUI5 controls that is most relevant for IoT applications. You can of course use all SAPUI5 controls combined with IoT specific ones to build your own application.

You can check the specifics of each control by following the links in the list just here:

• Map
• Thing Card
• Thing Table
• Measured Values Table
• Event Table
• Sensor Chart
• Gauge
• Image Marker
  • Sensor Marker
  • Thing Marker

Check also the Reuse Controls and Templates – Developer Guide for more details on each control usage.

SAP IoT templates

On top on the specific IoT controls, IoT specific templates help you get a quick start in creating IoT applications by a wizard-based approach.

There are two IoT templates offered:

• Freestyle IoT Application
• IoT Application

Freestyle IoT Application template

Creates a SAPUI5 project already connected to your SAP IoT service in which you can add specific controls to show the available Things, measures, events,…
Check the help documentation on Creating IoT Applications Using the Project Template to learn the steps required.

The following videos also show the process with screens, just pay attention to the fact that webIDE screens have evolved since the videos were recorded and process might be simplified in your current WebIDE version:

• Building a Freestyle IoT Application Frame in SAP Web IDE
• Developing an IoT Application with Thing List and Map in SAP Web IDE
• Developing an IoT Application to View Events on Chart

IoT Application template

Provides four basic pages that can be configured as a wizard. The outcome of the template is a running application that is meant as a template to help you create your own application. You can change and add code in the SAP Web IDE code editor to enhance the application further.
The following videos show step by step the process:

• SAP HANA Academy – SAP IoT: IoT App Enablement 6of8 : SAPUI5 IoT App
• SAP HANA Academy – SAP IoT: IoT App Enablement 7of8 : Updating App
• SAP HANA Academy – SAP IoT: IoT App Enablement 8of8 : IoT Freestyle App

Prerequisites

In order to use WebIDE IoT specific controls and templates Ensure that your account is onboarded as described in Get Started with your SAP IoT Account Step by Step Guide.

To create applications in SAP Web IDE, the configuration steps required for SAP Web IDE must also have been completed as described in Configure SAP Web IDE for SAP IoT.

More resources

Check the full set SAP IoT blog series:

• SAP IoT for SMBs
• SAP IoT – How to define your Device Model and start persisting measures
• SAP IoT – Digital Twin
• SAP IoT – Services
• SAP IoT – WebIDE templates and controls
• SMB.io: IoT mobile app prototype

Along the blog I provide many pointers to already available documents and tutorials covering the different topics I talk about; my goal is to compile all the links together on these blogs and not to repeat the materials already available. Please play the game and click on the different links not to miss any detail!

Happy IoT!