Build an App From a SAP Web IDE Template

1. Click on Services Tab

Click on the Services tab in the navigation bar.

2. Open SAP Web IDE

Scroll down and then click the SAP Web IDE tile to open the SAP Web IDE service page.

3. Click on Link

On the service page, click on the Open SAP Web IDE link to open Web IDE in a new browser tab.

4. Go to Preferences

The first configuration step is to enable the Hybrid App Toolkit plugin. In the Web IDE tab, click on the Tools menu, then Preferences.

5. Enable Hybrid App Toolkit Plugin

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.

6. Click Save

Click Save, and you will see a dialog box explaining that Web IDE will refresh. 

7. Click Refresh

Click 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.

8. Close the Tips and Tricks Dialog Box

Close the Tips and Tricks dialog box.

9. Open the New Project Creation Wizard

Click on File, New and then on Project from Template to open the new project creation wizard.

10. Select SAPUI5 Mobile Application

On the Template Selection page, click on the Category pulldown menu (where you see Featured) and select SAPUI5 Mobile Application.

11. Select the SAPUI5 Master Detail Kapsel Application Template

When the mobile templates are displayed, select the SAPUI5 Master Detail Kapsel Application template, then click Next.

12. Enter Project Name

On the Basic Information page of the New Project wizard enter the project name and click Next. The project name will also become the name of your app when deployed.

13. Select Service Source

The next step is to select the data source for your app. On the Data Connection page, click on Service URL as service source.

14. Select Service

If you only have one WebIDEEnabled destination in HCP, it will be selected automatically. If you don’t see the Northwind OData Service selected (the destination your created in the previous tutorial), click on the pull down menu and select it.

15. Enter Relative Path

After selecting the Northwind OData Service entry, enter the relative path to the OData service you will use in the field under the drop-down list-box. Be sure not to include any trailing space characters. The relative path to enter is: /V3/Northwind/Northwind.svc

16. Test Connection and Click Next

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.

17. Specify the Displayed Value in the Project Settings

Fill out the Project Settings and Master Section as displayed in the screenshot.

18. Specify the Displayed Value in the Main Data Fields

Scroll down to the Main Data Fields Section. Fill out the Main Data Fields as displayed in the screenshot.

19. Specify the Displayed Value in the Detail Section

Scroll down to the Detail Section. Fill out the Detail Section as displayed in the screenshot.

20. Specify the Displayed Value in the Information Section

Scroll down to the Information Section. Fill out the Information Section as displayed in the screenshot.

21. Click Finish

Click Finish to create the new Northwind application.

22. Click the Northwind Project Folder Icon

When the generation finishes, click the Northwind project folder icon to see the project structure.

23. Run Your Application

To run your application, select the index.html file, and click the Run button. Your Northwind application will open in a Web IDE preview pane.

24. Your Application Developed Successfully

Congratulations! You have successfully developed your application that shows the products and supplier data!