Embed Size (px)
Citation preview
Build an App From a SAP Web IDE Template
Page 1/26
1. Click on Services Tab
Click on the Services tab in the navigation bar.
Page 2/26
2. Open SAP Web IDE
Scroll down and then click the SAP Web IDE tile to open the SAP Web IDE service page.
Page 3/26
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.
Page 4/26
4. Go to Preferences
The first configuration step is to enable the Hybrid App Toolkit plugin. In the Web IDE tab, click onthe Tools menu, then Preferences.
Page 5/26
5. Enable Hybrid App Toolkit Plugin
In the Preferences page, click on Plugins on the left, scroll down to find the Hybrid App Toolkitplugin then enable it by clicking on the slider.
Page 6/26
6. Click Save
Click Save, and you will see a dialog box explaining that Web IDE will refresh.
Page 7/26
7. Click Refresh
Click Refresh. The purpose of the refresh is that after selecting the Hybrid App Toolkit plugin, WebIDE will download with the hybrid app configured templates you will use in this tutorial.
Page 8/26
8. Close the Tips and Tricks Dialog Box
Close the Tips and Tricks dialog box.
Page 9/26
9. Open the New Project Creation Wizard
Click on File, New and then on Project from Template to open the new project creation wizard.
Page 10/26
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.
Page 11/26
11. Select the SAPUI5 Master Detail Kapsel Application Template
When the mobile templates are displayed, select the SAPUI5 Master Detail Kapsel Applicationtemplate, then click Next.
Page 12/26
12. Enter Project Name
On the Basic Information page of the New Project wizard enter the project name and click Next. Theproject name will also become the name of your app when deployed.
Page 13/26
13. Select Service Source
The next step is to select the data source for your app. On the Data Connection page, click onService URL as service source.
Page 14/26
14. Select Service
If you only have one WebIDEEnabled destination in HCP, it will be selected automatically. If youdon’t see the Northwind OData Service selected (the destination your created in the previoustutorial), click on the pull down menu and select it.
Page 15/26
15. Enter Relative Path
After selecting the Northwind OData Service entry, enter the relative path to the OData service youwill use in the field under the drop-down list-box. Be sure not to include any trailing spacecharacters. The relative path to enter is: /V3/Northwind/Northwind.svc
Page 16/26
16. Test Connection and Click Next
Click the Test button to test the connection. If the connection is successful, the Service and itsCollections of the Northwind OData Service will appear. This demonstrates that your destination isworking properly. Click Next to advance to the Template Customization page.
Page 17/26
17. Specify the Displayed Value in the Project Settings
Fill out the Project Settings and Master Section as displayed in the screenshot.
Page 18/26
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 thescreenshot.
Page 19/26
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.
Page 20/26
20. Specify the Displayed Value in the Information Section
Scroll down to the Information Section. Fill out the Information Section as displayed in thescreenshot.
Page 21/26
21. Click Finish
Click Finish to create the new Northwind application.
Page 22/26
22. Click the Northwind Project Folder Icon
When the generation finishes, click the Northwind project folder icon to see the project structure.
Page 23/26
23. Run Your Application
To run your application, select the index.html file, and click the Run button. Your Northwindapplication will open in a Web IDE preview pane.
Page 24/26
24. Your Application Developed Successfully
Congratulations! You have successfully developed your application that shows the products andsupplier data!
Page 25/26
THANK YOU
Page 26/26
