Description
Create a simple version of the Address Manager application using TypeScript and the Nest framework. Run and debug it locally, connected to the SAP API Business Hub sandbox and to a local replica of the SAP S/4HANA Cloud system. Deploy the application to Cloud Foundry, run and debug it remotely. Create a Destination service and use it to connect the application to the back-end.
Prerequisites
For the complete execution of the current exercise, you must first execute the following exercises:
- Creating your Pay-As-You-Go Account in SAP BTP
- Activating the APIs in SAP S/4HANA Cloud: this exercise activates the required API in the S/4HANA Cloud tenant.
Some steps of this exercise depend on the https://api.sap.com website. As a consequence, they may not run properly if the website is not running 100% correctly. In this case, proceed with the exercise to reach the part that runs against the local SAP S/4HANA Cloud instance. That part will always run properly.
Information for execution
The exercise comes with an archive file:
ts-adman-solution.zip
[download] contains the npm project in its final status after the correct execution of the exercise. This project can be used to clarify the correct solution or to copy and paste parts of the source code.
To configure the application, the following environment variables can be set, such variables need to be properly set for the application to interact with the back-end service:
Variable | Content |
---|---|
S4_DESTINATION | The name of the destination defined within the Destination service of Cloud Foundry. Use it when running in Cloud Foundry, bound to a Destination and an Authorization services. |
S4_URL | The URL of the back-end S/4HANA system. Use it when running locally. |
S4_USERNAME | The user name to access the back-end S/4HANA system. Use it when running locally. |
S4_PASSWORD | The user name to access the back-end S/4HANA system. Use it when running locally. |
S4_APIKEY | Your API Key identifier, required to access the SAP API Business Hub. You can get your apikey at: https://api.sap.com . |
Two authentication methods are possible. Based on the method, you will provide the corresponding environment variables:
- Basic user and password authentication: used by the S/4HANA Cloud system.
- NoAuthentication plus API key: used by the SAP API Business Hub sandbox system.
Task 1: Creating the Nest Development Project in SAP Business Application Studio
Steps
Open the SAP Business Application Studio, open the training development space.
In your Web browser (for example, Google Chrome), open your SAP BTP Cockpit based on the link you received at subscription time (for example: https://cockpit.eu20.hana.ondemand.com). If requested, enter your user and password.
Choose the training subaccount, that you created in a previous exercise.
Choose Services → Instances and Subscriptions.
Choose SAP Business Application Studio.
Eventually start the training development space.
Once the space is running, click on training to enter the development space.
Open a terminal window and verify if the Nest CLI is already installed (in the global NPM packages). If it is missing, install it.
Choose File → Open Workspace... (Ctrl+Alt+W), choose the
projects
folder and choose Open.Choose Terminal → New Terminal. A terminal window appears in the lower part of the screen.
In the terminal, execute the following command:
A list of NPM global packages displays with their version.If the list does not contain package: @nestjs/cli, execute the following command:
List the packages again; the list now contains the new package.
In your
projects
folder, use the Nest CLI to generate a new application namedts-adman
.In the terminal, execute the following command:
Provide the following answers to the questions you are asked during the creation process:
The initial application is created. The process will last several minutes as all of the dependent node packages are downloaded from the internet. The final result is a Hello World application based on TypeScript and the Nest framework.Question Answer Which package manager would you like to use? npm
Open the
projects/ts-adman
folder as a workspace.Choose File → Open Folder..., choose the
projects/ts-adman
folder and choose Open.
Review the main project files.
Review the following files:
- The
package.json
file: containing project dependencies on external node packages. - All the files in the
src
folder: containing the TypeScript application, based on the Nest framework.
- The
By default, the application uses port 3000, this won't work in SAP Business Application Studio. Change the application port to 3002.
In the
src/main.ts
file, replace the 3000 with 3002.
Build and start the application from the command line. Open it in the browser, then stop the application.
Choose Terminal → New Terminal. A terminal window appears in the lower part of the screen.
In the terminal, run the following commands:
Wait till a pop-up window appears:
A service is listening to port 3002
. Choose Expose and Open then press enter. A new tab is opened in the browser, showingHello World!
.Back to the terminal, choose Ctrl+C, to terminate the batch job.
In SAP Business Application Studio, build the application, then run it in debug mode.
In the terminal, run:
The TypeScript files are converted to JavaScript and stored in the
dist
folder.Choose Run → Add Configuration ... → Node.js. The
launch.json
file is opened.In the
launch.json
file, replace the existing configuration with the following code block (replace the entire content in the square brackets with the following):As an alternative, you can copy the fullCode snippetExpand{ "name": "Launch Application", "type": "pwa-node", "request": "launch", "program": "${workspaceFolder}/dist/main", "skipFiles": [ "<node_internals>/**" ] }
ts_adman_01b_launch_json.txt
file [download], and replace the full content of thelaunch.json
file.Choose F5 (Run → Start Debugging). Wait till a pop-up window appears:
A service is listening to port 3002
. Choose Open in New Tab. A new tab is opened in the browser, showingHello World!
.
Open the
src/app.controller.ts
file and set a breakpoint at line 10. Refresh the application page and verify that the execution stops at the breakpoint.In the Explorertab, open the
src/app.controller.ts
file and click on the border of the editor window, on the left side of the line number 10. A red dot appears.Switch back to the application tab (containing
Hello World!
) and refresh the browser window.The program execution stops at the breakpoint. Switch the tab back to SAP Business Application Studio.
In SAP Business Application Studio, choose Continue (F5). The program execution continues and
Hello World!
appears in the application tab.Return to the
src/app.controller.ts
file, click on the red dot aside line 10 and remove the breakpoint.Choose Stop to stop the application execution.
Commit changes in Source Control.
Choose the Source Control tab.
In the Message field, enter any text (for example initial), choose Commit.. In case you are requested to stage all the changes, choose Yes.
Switch back to the Explorer tab.
Adapt the project for deployment to Cloud Foundry.
Open the
src/main.ts
file.In the root project folder, create a new file with name
manifest.yml
, containing the following text.Code snippetExpandapplications: - name: ts-adman path: ./ buildpacks: - nodejs_buildpack memory: 256M command: npm run start:prod random-route: true
This text can also be found in the provided
ts_adman_02_manifest_yml.txt
file [download].In the root project folder, create a new file with name
.cfignore
, containing the following text.
Deploy the application to Cloud Foundry.
In the Visual Studio Code, if a Terminal window is not opened yet, choose Terminal → New Terminal.
If required, in the Windows PowerShell, execute the following command:
Enter your SAP BTP API endpoint, e-mail, and password.In the terminal, run:
The TypeScript files are converted to JavaScript and stored in the
dist
folder.In the terminal, run:
In the SAP BTP Cockpit, navigate to the running application and open it.
In a web browser, open your SAP BTP Cockpit based on the url you received at subscription time (for example: https://cockpit.eu20.hana.ondemand.com. If required, enter your e-mail and password.
In the SAP BTP Cockpit, navigate to the training Subaccount. Navigate to the dev space.
Choose the ts-adman application name.
Choose the Application Route. The application opens and Hello SAP! is returned in the browser page.
In SAP Business Application Studio, commit changes in Source Control.
Choose the Source Control tab.
In the Message field, enter any text (for example Deployed to Cloud Foundry), choose Commit.
Switch back to the Explorer tab.
In SAP Business Application Studio, create a debug configuration to attach the remote Nest application in Cloud Foundry.
Choose Run → Open Configurations. The
launch.json
file is opened.In the
launch.json
file, add the following debug configuration (you can copy the entire content of thets_adman_03b_launch_json.txt
file [download] ):Code snippetExpand{ "name": "Attach Application", "type": "pwa-node", "request": "attach", "port": 9229, "localRoot": "${workspaceFolder}", "remoteRoot": "/home/vcap/app", "skipFiles": [ "<node_internals>/**" ] }
Debug the remote application running in Cloud Foundry using the debugger in SAP Business Application Studio: set a breakpoint and make execution stop at line 10 of the
src/app.controller.ts
file.Open the
manifest.yml
file and observe the command to run the application in Cloud Foundry:Open the
package.json
file and search for the following line:Deploy the previous change. In Visual Studio Code. In the terminal window, run:
To enable the application for debug, execute the following commands (you can find them in the
ts_adman_enable_cf_debug.txt
file [download] ):Ignore the proposal to "Open in a New Tab" the service listening to port 9229.Code snippetExpandcf enable-ssh ts-adman cf restage ts-adman cf ssh -N -T -L 9229:localhost:9229 ts-adman
In SAP Business Application Studio, in the Debug window, run the Attach Application configuration. The debugger attaches to the remote application.
In the Run window, run the new configuration. The debugger attaches to the remote application.
Open the
src/app.controller.ts
file and set a breakpoint (red dot aside the line number) at line 10:Switch back to the application tab (containing
Hello SAP!
) and refresh the browser window.The program execution stops at the breakpoint. Switch the tab back to SAP Business Application Studio.
In the SAP Business Application Studio, choose Continue (F5). The program execution continues and
Hello SAP!
appears in the application tab.In SAP Business Application Studio, stop the debugger.
In the Terminal, choose Ctrl + C and terminate the
cf ssh
command.
In SAP Business Application Studio, commit changes in Source Control.
Choose the Source Control tab.
In the Message field, enter any text (for example Ready for remote debugging), choose Commit.
Switch back to the Explorer tab.
Task 2: Creating the Address Manager Application
Steps
Back to the application project in Visual Studio Code, add the following packages in the dependencies then install them so they are available for the application programs.
Package Version @sap-cloud-sdk/connectivity ^2.11.0 @sap-cloud-sdk/odata-v2 ^2.11.0 @sap/cloud-sdk-vdm-business-partner-service ^2.1.0 Open the
package.json
file.In the file, at the end of the dependencies section, add the following text:
Code snippetExpand, "@sap-cloud-sdk/connectivity": "^2.11.0", "@sap-cloud-sdk/odata-v2": "^2.11.0", "@sap/cloud-sdk-vdm-business-partner-service": "^2.1.0"
Choose Terminal → New Terminal. In the Terminal, run the following command:
The dependent node modules are downloaded to thenode_modules
folder.
On top of the initial application, create an Address Manager back-end application. The Address Manager is able to maintain the address information of SAP S/4HANA Cloud business partners. The application code for the back-end is provided in the
ts_adman_backend.zip
file [download] .Right-click on the
ts-adman/src
folder, choose Reveal in File Explorer, extract the content of thets_adman_backend.zip
archive [download] to thesrc
folder.In Visual Studio Code, verify that the new
src/adman
folder is visible. The folder contains the following TypeScript source files:Content ofNote
To better analyze the following source code, we recommend you review the following sections in the standard SAP Cloud SDK documentation:backend-connector.ts
Content ofCode snippetExpandimport { DestinationOrFetchOptions } from '@sap-cloud-sdk/connectivity'; export class BackendConnector { private static destination: DestinationOrFetchOptions; private static apikey: string; public static getDestination(): DestinationOrFetchOptions { if (this.destination == null) { // Get the environment variables let destinationName: string = process.env.S4_DESTINATION; let url: string = process.env.S4_URL; let username: string = process.env.S4_USERNAME; let password: string = process.env.S4_PASSWORD; if (destinationName != null){ // Get the destination via the Destination service // of Cloud Foundry, in the SCP. this.destination = { destinationName: destinationName }; } else { // Create the destination at run time, // using the URI and credentials // provided in the environment variables. if(username != null && password != null) { // BasicAuthentication this.destination = { url: url, username: username, password: password }; } else { // NoAuthentication this.destination = { url: url } } } } return this.destination; } public static getApikey(): string { if (this.apikey == null) { if (process.env.S4_APIKEY == null) this.apikey = ""; else this.apikey = process.env.S4_APIKEY; } return this.apikey; } }
business-partner.service.ts
Content ofCode snippetExpandimport { Injectable } from '@nestjs/common'; import { BusinessPartner, businessPartnerService } from '@sap/cloud-sdk-vdm-business-partner-service'; import { BackendConnector } from './backend-connector' import { asc } from '@sap-cloud-sdk/odata-v2'; const { businessPartnerApi, businessPartnerAddressApi } = businessPartnerService(); @Injectable() export class BusinessPartnerService { static findAll(): Promise<BusinessPartner[]> { return businessPartnerApi.requestBuilder() .getAll() .select( businessPartnerApi.schema.BUSINESS_PARTNER, businessPartnerApi.schema.LAST_NAME, businessPartnerApi.schema.FIRST_NAME ) .filter( businessPartnerApi.schema.BUSINESS_PARTNER_CATEGORY .equals("1") ) .orderBy(asc(businessPartnerApi.schema.LAST_NAME)) .addCustomHeaders({ APIKey: BackendConnector.getApikey() }) .execute( BackendConnector.getDestination() ); } static findById(id: string): Promise<BusinessPartner> { return businessPartnerApi.requestBuilder() .getByKey(id) .select(businessPartnerApi.schema.BUSINESS_PARTNER, businessPartnerApi.schema.LAST_NAME, businessPartnerApi.schema.FIRST_NAME, businessPartnerApi.schema.IS_MALE, businessPartnerApi.schema.IS_FEMALE, businessPartnerApi.schema.CREATION_DATE, businessPartnerApi.schema.TO_BUSINESS_PARTNER_ADDRESS .select( businessPartnerAddressApi.schema.BUSINESS_PARTNER, businessPartnerAddressApi.schema.ADDRESS_ID, businessPartnerAddressApi.schema.COUNTRY, businessPartnerAddressApi.schema.POSTAL_CODE, businessPartnerAddressApi.schema.CITY_NAME, businessPartnerAddressApi.schema.STREET_NAME, businessPartnerAddressApi.schema.HOUSE_NUMBER)) .addCustomHeaders({ APIKey: BackendConnector.getApikey() }) .execute( BackendConnector.getDestination() ); } }
business-partner.controller.ts
Content ofCode snippetExpandimport { Controller, Get, Query } from '@nestjs/common'; import { BusinessPartnerService } from './business-partner.service'; import { BusinessPartner } from '@sap/cloud-sdk-vdm-business-partner-service'; @Controller('api/business-partners') export class BusinessPartnerController { @Get() async getBusinessPartners(@Query('id') id: string) : Promise<BusinessPartner[] | BusinessPartner> { if (id == null) { return BusinessPartnerService.findAll() .catch(error => { console.log(`Failed to get business partners - ${error.message}`); return null; }); } else { return BusinessPartnerService.findById(id) .catch(error => { console.log(`Failed to get business partner ${id} - ${error.message}`); return null; }); } } }
business-partner-address.service.ts
Content ofCode snippetExpandimport { Injectable } from '@nestjs/common'; import { BusinessPartnerAddress, businessPartnerService } from '@sap/cloud-sdk-vdm-business-partner-service'; import { BackendConnector } from './backend-connector' const { businessPartnerAddressApi } = businessPartnerService(); @Injectable() export class BusinessPartnerAddressService { public static async create(address: BusinessPartnerAddress) : Promise<BusinessPartnerAddress> { return businessPartnerAddressApi.requestBuilder() .create(address) .addCustomHeaders({ APIKey: BackendConnector.getApikey() }) .execute( BackendConnector.getDestination() ); } public static update(address: BusinessPartnerAddress) : Promise<BusinessPartnerAddress> { return businessPartnerAddressApi.requestBuilder() .update(address) .ignoreVersionIdentifier() .addCustomHeaders({ APIKey: BackendConnector.getApikey() }) .execute( BackendConnector.getDestination() ); } public static delete(businessPartner: string, addressId: string) : Promise<void> { return businessPartnerAddressApi.requestBuilder() .delete(businessPartner, addressId) .addCustomHeaders({ APIKey: BackendConnector.getApikey() }) .execute( BackendConnector.getDestination() ); } }
business-partner-address.controller.ts
Code snippetExpandimport { Controller, Post, Body, Patch, Delete, Query } from '@nestjs/common'; import { BusinessPartnerAddressService } from './business-partner-address.service'; import { businessPartnerService } from '@sap/cloud-sdk-vdm-business-partner-service'; const { businessPartnerAddressApi } = businessPartnerService(); @Controller('api/addresses') export class BusinessPartnerAddressController { @Post() async postBusinessPartnerAddress( @Body() body ) { let bpa = businessPartnerAddressApi.entityBuilder().fromJson(body); //BusinessPartnerAddress.builder().fromJson(body); await BusinessPartnerAddressService.create(bpa) .catch(error => { console.log(`Failed to create business partner address - ${error.message}`); }); } @Patch() async patchBusinessPartnerAddress( @Body() body ) { let bpa = businessPartnerAddressApi.entityBuilder().fromJson(body); //BusinessPartnerAddress.builder().fromJson(body); await BusinessPartnerAddressService.update(bpa) .catch(error => { console.log(`Failed to update business partner address ` + `${bpa.addressId} of business partner ${bpa.businessPartner} ` + ` - ${error.message}`); }); } @Delete() async deleteBusinessPartnerAddress( @Query('businessPartnerId') businessPartnerId: string, @Query('addressId') addressId: string) { await BusinessPartnerAddressService.delete(businessPartnerId, addressId) .catch(error => { console.log(`Failed to update business partner address ` + `${addressId} of business partner ${businessPartnerId} ` + ` - ${error.message}`); }); } }
Open the
src/app.module.ts
file and add the controllers and providers of the new application (with corresponding import statements). You can pick (from the provided exercise files) the content of thets_adman_04_app_module_ts.txt
file [download] , and copy it in the project of thesrc/app.module.ts
file.Code snippetExpandimport { Module } from '@nestjs/common'; import { AppController } from './app.controller'; import { AppService } from './app.service'; import { BusinessPartnerController } from './adman/business-partner.controller'; import { BusinessPartnerService } from './adman/business-partner.service'; import { BusinessPartnerAddressController } from './adman/business-partner-address.controller'; import { BusinessPartnerAddressService } from './adman/business-partner-address.service'; @Module({ imports: [], controllers: [ AppController, BusinessPartnerController, BusinessPartnerAddressController], providers: [ AppService, BusinessPartnerService, BusinessPartnerAddressService], }) export class AppModule {}
In the terminal, run:
The TypeScript files are converted to JavaScript and stored in the
dist
folder.
Run the application against the SAP API Business Hub sandbox.
Start the application with the following environment variables set (replace >>>YOUR API KEY<<< with your own API Key, for example,
FDqbnElM7mgmgqbIKBFHRpS1dvpt6sHD
. To get your API Key, open https://api.sap.com/api/API_BUSINESS_PARTNER, then log on, and choose Show API Key):Name Value S4_URL https://sandbox.api.sap.com/s4hanacloud S4_APIKEY >>>YOUR API KEY<<< Open the
.vscode/launch.json
file.In the Launch Application configuration, add the values of environment variables (replace >>>YOUR API KEY<<< with your own API Key, for example,
FDqbnElM7mgmgqbIKBFHRpS1dvpt6sHD
).As an alternative, you can copy the entireCode snippetExpand{ "name": "Launch Application", "type": "pwa-node", "request": "launch", "program": "${workspaceFolder}/dist/main", "skipFiles": [ "<node_internals>/**" ], "env": { "S4_APIKEY": ">>>YOUR API KEY<<<", "S4_URL": "https://sandbox.api.sap.com/s4hanacloud" } }
ts_adman_05_launch_json.txt
file [download] , and replace the full content of thelaunch.json
file (replace >>>YOUR API KEY<<< with your own API Key).In Visual Studio Code, in the Run and Debug tab, run the Launch Application configuration.
Open the browser at http://localhost:3000, the page shows
Hello World!
.In the browser, in the application page, edit the URL and add the following suffix:
The service you defined in thebusiness-partner.service.ts
file is executed and the business partner information is extracted in JSON format.In Visual Studio Code, choose Stop (Shift+F5). The application execution is stopped.
In Visual Studio Code, commit changes in Source Control.
Choose the Source Control tab.
In the Message field, enter any text (for example Back-end service is working.), choose Commit.
Switch back to the Explorer tab.
Re-map the Hello World service to the
/hello
path, to avoid impacting the next step.In the
/src/app.controller.ts
file, replace the@Get()
statement with@Get('hello')
.
Enable the application to serve static HTML content, using the Nest's @nestjs/serve-static module. The HTML content will be stored in the project within a folder named
client
.Open the
package.json
file.In the file, look for the following text:
In the Terminal, run the following command:
The new node package is downloaded to thenode_modules
folder. Once the action is complete, close the terminal window.Open the
tsconfig.json
file (main configuration file for TypeScript).In the file, look for the following code:
In the project root folder, create a sub-folder called
client
.In the
client
folder, create aindex.html
containing the following HTML code:Copy the content of theCode snippetExpand<!DOCTYPE html> <html> <body> <a href="address-manager">Address Manager</a> </body> </html>
ts_adman_06_index_html.txt
file [download] , to the projectclient/index.html
file.Open the
app.module.ts
file.Add the following import statements at the beginning of the file:
Look for the following statement:Modify it in this way:Code snippetExpandimport { ServeStaticModule } from '@nestjs/serve-static'; import { join } from 'path';
You can pick (from the provided exercise files) the content of theCode snippetExpand@Module({ imports: [ ServeStaticModule.forRoot({ rootPath: join(__dirname, '..', 'client'), }), ],
ts_adman_06_app_module_ts.txt
file [download], and copy it to the projectsrc/app.module.ts
file.
Create the Address Manager front-end application, then build and open it. The application code for the front-end is provided in the
ts_adman_frontend.zip
file [download] .Right-click on the
ts-adman/client
folder, choose Reveal in File Explorer,Extract the content of the
ts_adman_frontend.zip
archive [download]to theclient
folder. The archive contains anaddress-manager
sub folder.In the terminal, run:
The TypeScript files are converted to JavaScript and stored in the
dist
folder.in the Run and Debug tab, run the Launch Application configuration.
Open the browser at http://localhost:3000, the page shows the
Address Manager
link..Click on Address Manager.
The Address Manager application is opened. You can browse business partners and addresses, but you cannot modify addresses as the SAP API Business Hub sandbox is read-only.
Close the application page.
In Visual Studio Code, choose Stop (Shift+F5) twice. The application execution is stopped.
In Visual Studio Code, commit changes in Source Control.
Choose the Source Control tab.
In the Message field, enter any text (for example User interface is working.), choose Commit.
Switch back to the Explorer tab.
Log on to your SAP S/4HANA Cloud tenant.
In the Web browser (for example, Google Chrome), on your SAP S/4HANA Cloud tenant, access the SAP Fiori Launchpad at
[S/4HANA tenant url]/ui
, for example (https://my000000.s4hana.ondemand.com/ui
). If requested, enter your user and password.
In SAP S/4HANA Cloud, if it is not yet assigned, assign role: BR_BUPA_MASTER_SPECIALIST to your user.
In the Home page, choose Search and search for the Maintain Business Users app.
In the app, search for your user and display the details by selecting the line of the list.
In the user detail screen, scroll down and check the Assigned Business Roles section.
If the BR_BUPA_MASTER_SPECIALIST is missing from the list, choose Add.
Search for the BR_BUPA_MASTER_SPECIALIST role, select the box beside it and choose OK. Choose Save.
Select the SAP logo to navigate back to the Home page.
Refresh the Web browser page to see the additional apps provided with the new role.
In SAP S/4HANA Cloud, in the Manage Business Partner Master Data app, create a new business partner based on the following information (replace ### with your user number) if it doesn't already exist:
Field Value BP Category Person Grouping Internal numbering for standard use BP Role CRM000 Sold-to-party First Name John Last Name Doe ### City New York Country US Language EN In the home page, search and open the Manage Business Partner Master Data app.
Choose Create → Person.
In the Create Person dialog, enter the information provided in the table.
Choose OK
Choose Save.
Select the SAP logo to navigate back to the Home page.
Run the application against your SAP S/4HANA Cloud tenant. Use the following environment variables to configure the connection information (replace ### with your user number):
Name Value S4_URL Your S/4HANA Client tenant URL, for example https://my000000.s4hana.ondemand.com S4_USERNAME ADDRESS_MANAGER_### S4_PASSWORD WelcomeToTheClouds1! Note
As a prerequisite, for this API to be accessible in the S/4HANA Cloud tenant, you need to execute the previous exercise: Activating the APIs in SAP S/4HANA Cloud.Open the
.vscode/launch.json
file.In the Launch Application configuration, replace the values of the environment variables:
As an alternative, copy the fullCode snippetExpand{ "name": "Launch Application", "type": "pwa-node", "request": "launch", "program": "${workspaceFolder}/dist/main", "skipFiles": [ "<node_internals>/**" ], "env": { "S4_URL": "https://my000000.s4hana.ondemand.com", "S4_USERNAME": "ADDRESS_MANAGER_###", "S4_PASSWORD": "WelcomeToTheClouds1!" } }
ts_adman_07_launch_json.txt
file [download] , and replace the full content of thelaunch.json
file.Choose F5 (Run → Start Debugging).
Open the browser at http://localhost:3000, the page shows the
Address Manager
link..Click Address Manager.. The Address Manager application is opened. Search your John Doe ### business partner and add a new address to it.
Close the application page.
In Visual Studio Code, choose Stop (Shift+F5) twice. The application execution is stopped.
Deploy the application to Cloud Foundry.
Choose Terminal → New Terminal. A terminal window appears in the lower part of the screen.
In the Terminal, execute the following command:
If required, enter your SAP BTP API endpoint, e-mail, and password.In the Terminal, execute the following command:
Navigate to the running application in the SAP BTP Cockpit. Configure the environment variables for it to run against the SAP API Business Hub sandbox, then open it.
In a web browser, open your SAP BTP Cockpit based on the url you received at subscription time (for example: https://cockpit.eu20.hana.ondemand.com. If required, enter your e-mail and password.
In the SAP BTP Cockpit, navigate to the training Subaccount. Navigate to the dev space.
Choose the ts-adman application name.
In the Application: ts-adman - Overview page, go to the User-Provided Variables tab. Add the following variables (replace >>>YOUR API KEY<<< with your own API Key, for example,
FDqbnElM7mgmgqbIKBFHRpS1dvpt6sHD
. To get your API Key, open https://api.sap.com/api/API_BUSINESS_PARTNER, then log on, and choose Show API Key):Key Value S4_URL https://sandbox.api.sap.com/s4hanacloud S4_APIKEY >>>YOUR API KEY<<< Go to the Overview tab and restart the application.
Choose the Application Route. The application is opened.
Click on Address Manager. The Address Manager application is opened, reading the data from the SAP API Business Hub sandbox system.
In Cloud Foundry, create an instance of the Authorization & Trust Management service with name my-xsuaa.
In Visual Studio Code, in the project root folder, create a new file named
xs-security.json
with the following content:You can pick (from the provided exercise files) the content of thets_adman_08_xs_security_json.txt
file [download] , and copy it in the project to thexs-security.json
file.In the SAP BTP Cockpit, navigate to the trial sub-account, then to the dev space.
In the dev space, navigate to Services → Service Marketplace tab. Choose the Authorization & Trust Management tile.
In the Authorization & Trust Management screen, choose Create. Create a new instance based on the following information:
Field Value Service Authorization & Trust Management Plan application Instance Name my-xsuaa Specify Parameters in JSON format { "xsappname": "ts-adman", "tenant-mode": "shared" }
Connect the my-xsuaa service to the ts-adman application.
In the SAP BTP Cockpit, navigate to the dev space, then to the ts-adman application.
In the Application: ts-adman - Overview page, go to the Service Bindings page.
Choose Bind Service.
Select Service from the catalog. Choose Next.
Choose the Authorization & Trust Management service. Choose Next.
Choose the Re-use existing instance. Select the my-xsuaa Instance. Choose Next.
Choose Finish.
In Cloud Foundry, in the case it does not exist yet, create an instance of the Destination service named my-destinations.
In the SAP BTP Cockpit, navigate to the trial sub-account, then navigate to the dev space.
In the dev space, navigate to the Services → Service Instances tab.
In the Service Instances screen, choose Create Instance. Create a new instance based on the following information:
Field Value Service Destination Service Plan lite Instance Name my-destinations
Bind the my-destinations service to the ts-adman application.
In the SAP BTP Cockpit, navigate to the dev space, then to the ts-adman application.
In the Application: ts-adman - Overview page, go to the Service Bindings page.
Choose Bind Service.
Select Service from the catalog. Choose Next.
Choose the Destination service. Choose Next.
Choose the Re-use existing instance. Select the my-destinations Instance. Choose Next.
Choose Finish.
In the my-destinations service, in the case it does not exist yet, create a destination named sandbox, referring to the SAP API Business Hub sandbox.
In the SAP BTP Cockpit, navigate to the dev space, then to the Services → Service Instances tab.
In the Service Instances screen, choose the my-destinations instance.
In the my-destinations pane, choose More information is available for this instance. See here
Choose the Destinations tab.
Chose New Destination create a destination based on the following information:
Once you have saved the destination, choose Check Connection to verify that the destination can be reached.Field Value Name sandbox Type HTTP Description SAP API Business Hub sandbox system URL https://sandbox.api.sap.com/s4hanacloud Proxy Type Internet Authentication NoAuthentication Use default JDK truststore checked
Adapt the environment variables of your application so that it reads the system information from the destination service. Then restart and open the application again.
Navigate to the dev space, then to the ts-adman application, then to the User-Provided Variables tab.
Delete the S4_URL variable.
Enter a new variable with the name: S4_DESTINATION and value sandbox.
Go to the Overview tab and restart the application.
Choose the Application Route. The application opens in the Address Manager link page.
Click Address Manager. The Address Manager application is opened, reading the data from the SAP API Business Hub sandbox system, configured via the sandbox destination in the my-destinations service.
In the my-destinations service, create a destination named s4cloud, referring to your SAP S/4HANA Cloud tenant if required.
Return to the main page of the dev space, navigate to Services → Service Instances page. Choose the my-destinations instance. Click on More information is available for this instance. See here
Choose the Destinations page.
Chose New Destination create a destination based on the following information (replace ### with your user number, replace the URL value with your own SAP S/4HANA Cloud tenant URL):
Field Value Name s4cloud Type HTTP Description SAP S/4HANA Cloud tenant URL Your S/4HANA Client tenant URL, for example https://my000000.s4hana.ondemand.com Proxy Type Internet Authentication BasicAuthentication User ADDRESS_MANAGER_### Password WelcomeToTheClouds1!
Adapt the environment variables of your application so that it reads the s4cloud system information from the destination service. Restart and open the application again.
Navigate to the dev space, then to your application, then to the User-Provided Variables tab.
Change the value of the S4_DESTINATION variable to s4cloud.
Optionally, delete the S4_APIKEY variable.
Go to the Overview tab.
Restart the application.
Choose the Application Route. The application opens on the Address Manager link page.
Click Address manager. The Address Manager application is opened, reading the data from your SAP S/4HANA Cloud tenant, configured via the s4cloud destination in the my-destinations service. Search your John Doe ### business partner and add a new address to it.