Build an app using the SAP Web IDE template wizard
You will learn
The SAP Web IDE (Integrated Development Environment) has a project template wizard, which makes it easy to create new applications quickly. In this tutorial you will build an app that reads product and supplier information from an OData source and displays it in a responsive mobile web app.
You will be setting a few configurations, then filling out a few forms in this step, but the end result is an application which can be run on a mobile device. Ready? Let’s get started…
The first configuration step is to enable the Hybrid App Toolkit plugin (this is required for Web IDE to show the hybrid template you will use later). In the Web IDE tab, click on the Tools menu, then Preferences.
In the Preferences page, click on Plugins on the left, scroll down to find the Hybrid App Toolkit plugin then enable it by clicking on the slider.
Click Save, and you will see a dialog box explaining that Web IDE will refresh. The purpose of the refresh is that after selecting the Hybrid App Toolkit plugin, Web IDE will download with the hybrid app configured templates you will use in this tutorial.
On the Template Selection page, click on the Category pulldown menu (where you see Featured) and select SAPUI5 Mobile Application. When the mobile templates are displayed, select the SAPUI5 Master Detail Kapsel Application template, then click Next.
If you only have one WebIDEEnabled destination in SAP Cloud Platform, it will be selected automatically. If you don’t see the Northwind OData Service selected (the destination you created in the previous tutorial), click on the pull down menu and select it.
Note: If you don’t see the the Northwind OData Service in the pull down menu, go back to your destination in the SAP Cloud Platform cockpit and double-check the entries from the previous tutorial. If you make changes, reload Web IDE, then restart the procedure in this tutorial.
After selecting the Northwind OData Service entry, enter the relative path (see below) to the OData service you will use in the field under the drop-down list-box (where it says “Paste URL here”). Be sure not to include any trailing space characters.
The relative path to enter is:
The URL you entered for your destination plus the relative path you enter here points to the OData Service you will use for your app.
Click the Test button to test the connection. If the connection is successful, the Service and its Collections of the Northwind OData Service will appear. This demonstrates that your destination is working properly. Click Next to advance to the Template Customization page.
On the Template Customization page you will specify the displayed values on the Project Settings, Master Section (Products List), Main Data Fields, the Detail Section (Selected Product Details) and the Information Section area.
Fill out the Project Settings and Master Section as displayed in the screenshot.