Step 1: Log into your SAP Cloud Platform account
Log into SAP Cloud Platform by opening the following URL in a new tab: https://account.hanatrial.ondemand.com
Make sure you are using the Europe (Rot) - Trial landscape, and click on your account name to open the cockpit view.
In the left-hand navigation bar, select Services, then on the right panel, scroll down to the SAP Web IDE tile and click on the tile to open the overview page.
Step 2: Open SAP Web IDE
From the SAP Web IDE - Overview page, click on the Go to Service link which will open a new tab with the Web IDE.
Enter the URL for SAP Web IDE in your trial account below and click Validate.
Step 3: Create a new project
In SAP Web IDE, select from the menu bar File > New > Project from Template, or click on the New Project from Template button located on the main panel.
Step 4: Select the app template
In the Template Selection step, select SAP Innovation under SAPUI5 Version.
The list of templates will update. Select the SAP Fiori Master-Detail Application template and click Next.
Step 5: Name your project
In the Basic Information step, you will name your project te2016
(it is important to keep this name as it will be referenced later).
While not required, if you have the Hybrid App Toolkit plug-in enabled, you will see the Enable native mobile device functionality checkbox. You can click it if you’d like, but is not required for this series.
Click Next.
Step 6: Select the data connection
In the Data Connection step, on the left side, verify Service Catalog under Sources is selected.
Next, select the SAP Gateway ES5
destination from the pull down list.
Step 7: Select the OData service
Scroll down the list of services that appears and select the GWDEMO
service then click Next.
Step 8: Enter Application Settings information
In the next steps, you will enter a few sets of information related to titles and labels, but also select data fields to show in the app.
Do not advance to the next screen until all fields have been completed.
In the Application Settings area, enter the following information:
Field Name |
Value |
Type |
Standalone App |
Title |
Partner Contacts |
Namespace |
com.test.teched |
Description |
App Space application |
Step 9: Specify data for the "master" view
In the Data Binding - Object area, enter the following information:
Field Name |
Value |
Object Collection |
BusinessPartnerCollection |
Object Collection ID |
BusinessPartnerKey |
Object Title |
Company |
Object Numeric Attribute |
leave blank |
Object Unit of Measure |
leave blank |
Step 10: Specify data for the "detail" view
In the Data Binding - Line Item area, enter the following information:
Field Name |
Value |
Line Item Collection |
RelatedContacts |
Line Item Collection ID |
ContactKey |
Line Item Title |
FullName |
Line Item Numeric Attribute |
leave blank |
Line Item Unit of Measure |
CountryText |
Then click Finish.
Step 11: Open the internationalization file
In SAP Web IDE, click on the te2016
project folder to expand it.
Then navigate and expand webapp
> i18n
, and double-click the i18n.properties
file to open it in the editor.
Note: i18n
is a standard abbreviation for “internationalization”
Step 12: Insert the "Contacts" label
Find and replace all instances (three of them) of <RelatedContactsPlural>
(including the angle brackets) in the i18n.properties
file with Contacts
.
Note: you can use CTRL+H to open the “Find and Replace” box which includes a “Replace All” function if you click on “All”.
Step 13: Insert the "Business Partner" label
Find and replace all instances (three of them) of <BusinessPartnerCollectionPlural>
(including the angle brackets) in the i18n.properties
file with Business Partners
.
Step 14: Insert the "Business Partners" label
Find and replace all instances (five of them) of <BusinessPartnerCollection>
(including the angle brackets) in the i18n.properties
file with Business Partner
.
Step 15: Insert the "Related Contacts" label
Find and replace all instances <FirstColumnName>
(including the angle brackets) in the i18n.properties
file with Related Contacts
.
Step 16: Insert the "Country" label
Find and replace all instances <LastColumnName>
(including the angle brackets) in the i18n.properties
file with Country
.
Save your edits.
Step 17: Launch your app
To run your app, select your project folder and click the Run button.
A new tab will open in your browser showing your app running in a preview pane.
Step 18: Confirm your app looks like the example
Your app should look like the image below.
You can click on items in the master list and the right-hand (detail) pane will update.
Click on Baleda
in the master list, copy the alpha-numeric string below Jonathan Mason
, paste it into the text field below and click Validate.