Develop a Custom UI on SAP Business Technology Platform and Deploy It to SAP S/ 4HANA Cloud Company

Extensibility Guide | PUBLIC

THE BEST RUN 2021 SAP SE or an SAP © Content

1 Overview...... 4 1.1 Business Scenario...... 4 Scenario Process Flow...... 5

2 Preparation...... 7 2.1 Prerequisites...... 7

3 Implementation...... 9 3.1 Configure and Create the Custom Business Object in the SAP S/4HANA Cloud System...... 9 Create the Code Lists Used in the Custom Business Object...... 9 Create a Custom Business Object...... 11 Implement Custom Logic for the Custom Business Object (Optional)...... 13 3.2 Prepare Your SAP Business Technology Platform Environment...... 15 3.3 Set Up Trust Between Identity Authentication and Your SAP Business Technology Platform Subaccount...... 16 3.4 Configure Trust Between SAP S/4HANA Cloud and Your SAP Business Technology Platform Subccount...... 23 Create a Communication System...... 24 Create a Communication Arrangement...... 27 Configure the Destination on SAP Business Technology Platform...... 28 3.5 Expose the Custom Business Object as an External Web Service...... 32 Check OData Service for the Custom Business Object...... 33 Create Custom Communication Scenario...... 34 Create Communication Arrangement...... 34 3.6 Configure the Delivered Sample App for Use in the S/4HANA Cloud System...... 35 Import and Test the SAP Fiori Sample App to Your SAP Web IDE Environment...... 36 Deploy the SAP Fiori App Back to Your SAP S/4HANA Cloud System...... 38 Extend a Business Catalog and Embed an App in the SAP Fiori Launchpad...... 40

4 Test the Custom UI...... 42

5 Transport the Extensions from Quality to Productive System...... 43 5.1 Export Extensions from the Quality System...... 43 5.2 Import Extensions to the Productive System...... 44 5.3 Test Imported Extensions in the Productive System...... 44

6 Appendix...... 46 6.1 Issues...... 46

Develop a Custom UI on SAP Business Technology Platform and Deploy it to SAP S/4HANA Cloud 2 PUBLIC Content 6.2 Document History...... 46

Develop a Custom UI on SAP Business Technology Platform and Deploy it to SAP S/4HANA Cloud Content PUBLIC 3 1 Overview

1.1 Business Scenario

 Note

This sample scenario is for learning purposes only. It is intended to give you an understanding of the various technical aspects related to extending SAP S/4HANA Cloud. The sample scenario may not always be available in a readily consumable state due to the continuous improvements being made in the underlying products or services. If this is the case, appropriate adaptations based on the latest documentation of the respective products or services are required.

This guide describes a simple SAP Fiori UI sample application scenario that showcases an extension to an SAP S/4HANA Cloud system. The app uses a custom business object to store equipment data. Within this custom business object, you can maintain equipment records and temporarily assign equipment to your employees.

The sample SAP Fiori app must be seen in the context of the overall scenario which includes several focal topics. With this scenario, you learn how to create in-app extensions on SAP S/4HANA Cloud using a custom business object, expose a service for it, and consume this service in a custom SAP Fiori UI on SAP Business Technology Platform. This scenario also describes how to deploy the custom UI from SAP Business Technology Platform to SAP S/4HANA Cloud and how to transport extensions from a quality system to a productive system.

Please note that this example focuses on deployment to SAP S/4HANA Cloud and, therefore, only describes a basic check logic (see Implement Custom Logic for the Custom Business Object (Optional)). The basic check logic is intended to give you an insight into how this kind of logic might be implemented.

Develop a Custom UI on SAP Business Technology Platform and Deploy it to SAP S/4HANA Cloud 4 PUBLIC Overview 1.1.1 Scenario Process Flow

The following diagram shows the technical steps and the system landscape required to run and understand the sample:

The following table gives you a brief overview of the steps in this scenario:

Step Details

1 Creating a Custom Business Object You create a custom business object on SAP S/4HANA Cloud. In this example, the object is called Equipment.

2 Exposing the Custom Business Object You expose the business object using (CDS view) as an OData Service an OData service. This means that data from the custom business object can be consumed on SAP Business Tech nology Platform.

3 Creating a Custom Fiori UI Using SAP You develop a custom Fiori UI and up Web IDE load the source code for the application to SAP Web IDE.

Develop a Custom UI on SAP Business Technology Platform and Deploy it to SAP S/4HANA Cloud Overview PUBLIC 5 Step Details

4 Setting Up a Shared Identity Provider In order to deploy the app back to SAP (IdP) for Single Sign-on S/4HANA Cloud, you need to establish the trust between the SAP S/4HANA system and SAP Business Technology Platform subaccount using a shared identity provider.

You also need to configure the trusted connection between the SAP Web IDE and SAP S/4HANA Cloud

5 Deploying the Fiori UI to SAP S/4HANA You deploy the app back to the SAP S/ Cloud 4HANA Cloud ABAP repository.

6 Making a Custom Fiori UI Available on You extend a business catalog to make SAP Fiori launchpad the app available on the SAP Fiori launchpad.

7 Transporting Extensions and the UI Finally, you execute the required steps from Q to P System to transport your extension from the quality system to the productive SAP S/4HANA Cloud system.

Develop a Custom UI on SAP Business Technology Platform and Deploy it to SAP S/4HANA Cloud 6 PUBLIC Overview 2 Preparation

2.1 Prerequisites

To perform the steps in this document, you need to make sure that the following prerequisites are met:

Prerequisites Details

SAP S/4HANA Cloud system You have access to an SAP S/4HANA Cloud system with all the necessary users and authorizations (refer to the follow ing prerequisites).

SAP Business Technology Platform You have an SAP Business Technology Platform account. You can use an SAP Business Technology Platform trial account. Find more information here, on how to get a trial account .

You have access to the SAP Web IDE. For more information, refer to Open SAP Web IDE.

For more information on account types and on purchasing an enterprise account, refer to SAP Business Technology Platform Accounts.

Moreover, if want to try out this sample scenario, you need to have a productive SAP Business Technology Platform Neo subaccount.

Identity Provider In the Deploy the SAP Fiori App Back to Your SAP S/4HANA Cloud System [page 38] section, you learn how to deploy an app developed in the SAP Web IDE to your SAP S/4HANA Cloud. You need to configure the connectivity based on OAuth authentication.

OAuth can be used only when a common identity provider is configured for both systems. As a prerequisite, a trust be tween the identity authentication tenant and your SAP S/ 4HANA Cloud has already been established. For identity au thentication, you must have a user with administration au thorization for the tenant’s administration console.

Develop a Custom UI on SAP Business Technology Platform and Deploy it to SAP S/4HANA Cloud Preparation PUBLIC 7 Prerequisites Details

Personas/users and authorizations Make sure that roles that contain the following business cat alogs have been assigned to your users (depending on the persona):

● SAP_CORE_BC_EXT (Extensibility) ● SAP_CORE_BC_EXT_UI (Extensibility - Fiori App Devel opment) ● SAP_CORE_BC_EXT_TST (Extensibility - Custom Apps and Services) ● SAP_CORE_BC_COM (Communication Management) ● SAP_CORE_BC_SL_EXP (Transport Management – Ex port) [for the quality system] ● SAP_CORE_BC_SL_IMP (Transport Management – Im port) [for the productive system]

This ensures that users have the necessary authorizations and can access the respective apps on the SAP Fiori launch pad. An administrator user who has the necessary authori zation can take care of the role administration (a role that contains the SAP_CORE_BC_IAM - Identity and Access Man agement catalog has been assigned to the administrator). You can, for example, create a new custom business role if necessary. To do so, go to the Maintain Business Roles app. Add the business catalogs on the Assigned Business Catalogs tab. Once created, you can assign this role to a business user.

The following personas can be involved in the scenarios. However, depending on your use case, there might be differ ences.

SAP S/4HANA key users: They have the key user authoriza tions in the SAP S/4HANA Cloud system that are required to create in-app extensions (for example, they can create cus tom fields and so on).

SAP S/4HANA administrators: They have the administra tion authorizations in the SAP S/4HANA Cloud system that are required, for example, to create communication arrange ments, or to assign business roles to users.

SAP Business Technology Platform administrators: They have the administration authorizations that are required, for example, to set up the account in general, to add developers as members to the account, or to create destinations.

Developers: SAP Fiori developers who use, for example, SAP Web IDE to develop the extension app.

Develop a Custom UI on SAP Business Technology Platform and Deploy it to SAP S/4HANA Cloud 8 PUBLIC Preparation 3 Implementation

Use

This section describes the required steps for configuring the sample app in detail. To perform the complete configuration process, you need access to the following systems:

● SAP S/4HANA Cloud System ● SAP Business Technology Platform Identity Authentication service ● SAP Business Technology Platform (subaccount)

3.1 Configure and Create the Custom Business Object in the SAP S/4HANA Cloud System

The sample app uses the custom business object Equipment. You configure the custom business object in the SAP S/4HANA Cloud system.

 Note

During this example, you make certain entries and provide custom names, such as for the custom business object and the code lists. It is important to write the names exactly as shown in this guide. Otherwise, you need to adapt all of the sample code to reflect the changes you make.

3.1.1 Create the Code Lists Used in the Custom Business Object

Use

Multiple code lists are used within the custom business object. In this section, you create these code lists.

Develop a Custom UI on SAP Business Technology Platform and Deploy it to SAP S/4HANA Cloud Implementation PUBLIC 9 Procedure

1. On the SAP Fiori launchpad, open the Custom Reusable Elements app. 2. Choose the Custom Code Lists tab and choose the New (+) icon. 3. In the Name field, enter Equipment Type. 4. In the Code Values section, choose the New (+) icon. 5. Enter the following code values:

Code Description

01 Laptop

02 Mobile Phone

03 Video Projector

6. Choose Save and Publish.

Repeat these steps to create the following code lists in the same way:

Name: YY1_EQUIPMENTSTATUS

Code Description

01 Bookable

02 Not Bookable

Name: YY1_EQUIPMENTSTATUS1

Code Description

01 Handed over to end user

02 Available on stock

03 Prepared and ready for handover

04 Overdue

Result

You have created the code lists that will be reused in the custom business object.

Develop a Custom UI on SAP Business Technology Platform and Deploy it to SAP S/4HANA Cloud 10 PUBLIC Implementation 3.1.2 Create a Custom Business Object

 Note

Use

In this section, you create a custom business object and learn how to maintain data for this specific example.

Procedure

1. On the SAP Fiori launchpad, open the Custom Business Objects app. 2. Choose New. 3. In the Name field, enter Equipment. Leave the identifier as the default and choose Create. 4. In the Features section, select the following checkboxes: ○ Determination and Validation ○ UI Generation ○ Service Generation 5. On the Nodes tab, choose New. A new subnode appears in the table underneath the Equipment node.. 6. For the new subnode, in the Name column, enter AssignedTo. 7. Go to the Fields tab and choose the Equipment node. 8. Choose New and add the following fields:

Label Type Key Property

Equipment Number Text X Length: 20

Equipment Type Code List Code List:

YY1_EQUIPMENTTYPE

Manufacturer Text Length: 20

Technical Type ID Text Length: 20

Link to Manufacturer Web Address Length: 80 Specification

Develop a Custom UI on SAP Business Technology Platform and Deploy it to SAP S/4HANA Cloud Implementation PUBLIC 11 Label Type Key Property

Purchase Price Amount with Currency

Purchase Date Date

Operation Time Date

Equipment Status Code List Code List: YY1_EQUIPMENTSTATUS

9. In the Nodes section, choose the AssignedTo node. 10. Choose New and add the following fields:

Label Type Property

UserID Text Length: 20

Last Name Text Length: 20

First Name Text Length: 20

Booked From Date

Booked To Date

Booking Status Code List Code List: YY1_EQUIPMENTSTATUS1

Develop a Custom UI on SAP Business Technology Platform and Deploy it to SAP S/4HANA Cloud 12 PUBLIC Implementation 11. Choose Publish.

Result

You have created and published a custom business object.

3.1.3 Implement Custom Logic for the Custom Business Object (Optional)

Use

In this section, you include some validation checks in the custom logic of the custom business object. The checks are not intended to cover all business situations – they are intended to provide some examples of how you can implement check logic using the available BAdIs for custom business objects.

For this example, you implement the following checks:

● Check whether UserID and BookingDates are mandatory fields. ● When starting to work on an assignment record, check whether the BookedFrom date is earlier than or the same as the BookedTo date . ● When starting to work on an assignment record, check in the Equipment Master whether the EquipmentStatus field is set to Not Bookable. If it is set to Not Bookable, you cannot temporarily assign the equipment to users. ● When starting to work on an assignment record, check that no conflicting bookings have already been created for the specified time frame.

Develop a Custom UI on SAP Business Technology Platform and Deploy it to SAP S/4HANA Cloud Implementation PUBLIC 13 Procedure

1. On the SAP Fiori launchpad, open the Custom Business Objects app. 2. Choose the Equipment business object that you created earlier.. 3. On the Logic tab, in the Nodes section, choose AssignedTo. 4. Under Determination and Validation, choose Before Save. 5. Choose Create Draft. 6. Copy the following ABAP code and paste it into the Draft Logic section:

valid = abap_true.

data ls_equipment type YY1_EQUIPMENT. data lt_assignedto_equipment type table of YY1_ASSIGNEDTO_EQUIPMENT. data ls_assignedto_equipment type YY1_ASSIGNEDTO_EQUIPMENT. data message1 type String.

data lt_equipment type yy1_ir_assignedto_equipment=>ty_equipment. lt_equipment = association->to_equipment( ).

IF lt_equipment-equipment-equipmentstatus EQ '02'. message = 'The equipment status is not bookable!'. valid = abap_false. RETURN. ELSEIF assignedto-userid IS INITIAL. message = 'Please enter the User ID!'. valid = abap_false. RETURN. ELSEIF assignedto-bookedfrom IS INITIAL OR assignedto-bookedto IS INITIAL. message = 'Please enter the booking dates!'. valid = abap_false. RETURN. ELSEIF assignedto-bookedfrom > assignedto-bookedto. message ='Booked To Date must be later than Booked From Date!'. valid = abap_false. RETURN. ELSE. valid = abap_true. ENDIF.

select single * from yy1_equipment into @ls_equipment where equipmentnumber eq @lt_equipment-equipment-equipmentnumber.

select * from yy1_assignedto_equipment into table @lt_assignedto_equipment where sap_parent_uuid eq @ls_equipment-sap_uuid.

data SD type sy-datum. data ED type sy-datum. SD = assignedto-bookedfrom. ED = assignedto-bookedto.

data SD1 type sy-datum. data ED1 type sy-datum.

LOOP at lt_assignedto_equipment INTO data(each_assignment).

SD1 = each_assignment-bookedfrom. ED1 = each_assignment-bookedto. IF not ( SD > ED1 OR ED < SD1 ). IF ( assignedto-userid eq each_assignment-userid ). valid = abap_true. ELSE. valid = abap_false. message = 'The equipment is already booked during this period.'. ENDIF.

Develop a Custom UI on SAP Business Technology Platform and Deploy it to SAP S/4HANA Cloud 14 PUBLIC Implementation RETURN. ENDIF. ENDLOOP.

 Note

If the YY1 namespace changes, you need to also adjust the code accordingly.

7. Save the draft and choose Publish.

3.2 Prepare Your SAP Business Technology Platform Environment

Use

In this section, you perform the initial setup of an SAP Business Technology Platform account and assign the required permissions.

Procedure

1. Go to your SAP Business Technology Platform account and select your global account. 2. Choose Subaccounts. 3. Choose New Subaccount and enter the following data:. 4. Label Field Value

Display Name

Description (optional)

Environment Neo

Provider SAP

Region choose

5. Choose Create. 6. The subaccount appears as a new tile. Choose the tile to enter your subaccount. 7. Choose Services and search for the SAP Web IDE Full-Stack.

Develop a Custom UI on SAP Business Technology Platform and Deploy it to SAP S/4HANA Cloud Implementation PUBLIC 15 8. Choose the SAP Web IDE Full-Stack service and then choose Enable to activate it. 9. Choose Configure Service. 10. Select the DiDeveloper role. 11. Choose Assign. 12. In the Assign role “DiDeveloper” to user dialog, enter your user ID and choose Assign. Repeat this step for all required users.

Result

You have created a subaccount on SAP Business Technology Platform and the SAP Web IDE Full-Stack service is activated and configured.

3.3 Set Up Trust Between Identity Authentication and Your SAP Business Technology Platform Subaccount

Use

Within an SAP S/4HANA Cloud environment, not only is an SAP S/4 HANA Cloud system delivered to customers, but also an SAP Business Technology Platform Identity Authentication service. The trust between these is already preconfigured.

In the given scenario, you must use the same SAP Cloud Identity Authentication service for both your SAP Business Technology Platform subaccount and the SAP S/4HANA Cloud system. This establishes trust between these systems

Develop a Custom UI on SAP Business Technology Platform and Deploy it to SAP S/4HANA Cloud 16 PUBLIC Implementation Procedure

Follow the steps below to enable single sign-on (SSO) between SAP Business Technology Platform Identity Authentication service and SAP Business Technology Platform (alternatively you can check chapter Single Sign-On Configuration in Neo Environment).Enabling principal propagation ensures secure and consistent access to extension solutions.

Enter your SAP Business Technology Platform subaccount information and choose Security → Trust in the SAP Business Technology Platform Cockpit.

Develop a Custom UI on SAP Business Technology Platform and Deploy it to SAP S/4HANA Cloud Implementation PUBLIC 17 1. Choose Edit and maintain the following values:

Configuration Type Custom

Local Provider Name Filled Automatically – no change required

Principal Propagation Enabled

Force Authentication Disabled

Choose Generate Key Pair.

Develop a Custom UI on SAP Business Technology Platform and Deploy it to SAP S/4HANA Cloud 18 PUBLIC Implementation 2. Choose Save. 3. Choose Get Metadata. Store the downloaded file locally. It is required to set up the trust between the SAP Business Technology Platform Identity Authenticationserviceand your SAP Business Technology Platform subaccount. Access the administration console of the identity authentication tenant, using the following URL: https://.accounts.ondemand.com/admin You can also get the URL from the identity authentication tenant registration e-mail. The administation console of your identity authentication tenant looks like this:

4. Choose Application & Resources -> Applications. 5. Choose Add ( +) and Maintain a name for your SAP Business Technology Platform Subaccount. 6. Choose Save.

Develop a Custom UI on SAP Business Technology Platform and Deploy it to SAP S/4HANA Cloud Implementation PUBLIC 19 Choose the just created application in the list and choose SAML 2.0 Configuration in the Trust area.

Choose Browse and upload the Metadata.xml file you have downloaded from your SAP Business Technology Platform subaccount in the Trust Management settings previously. The required properties are then inserted via this file.

7. Choose Save. In this step you need to define the attribute to be used for the identification. The User ID is used by default – it needs to be switched to Login Name. Choose Subject Name Identifier in the Application screen.

Select Login Name as Basic Configuration and Save your edits.

Develop a Custom UI on SAP Business Technology Platform and Deploy it to SAP S/4HANA Cloud 20 PUBLIC Implementation 8. As in most common use cases the SAP Business Technology Platform Identity Authentication service does not act as an identity provider itself but as a proxy for a probably already existing corporate identity provider which needs to be configured. In case you are not using a corporate identity provider you can skip this step. Choose Conditional Authentication in the application screen.

Select your corporate identity provider and Save your settings.

9. In order to configure the trust between the SAP Business Technology Platform subaccount and the SAP Business Technology Platform Identity Authentication service the credentials from the authentication service need to be configured in your SAP Business Technology Platform subaccount as well. The required meta data from the SAP Business Technology Platform Identity Athentication service are retrieved as follows: In the administration console of the identity authentication tenant choose Application & Resources -> Tenant Settings. 10. Choose SAML 2.0 Configuration in the tenants settings screen. 11. Choose Download Metadata File and store the file. It’ll be used in the next steps.

Develop a Custom UI on SAP Business Technology Platform and Deploy it to SAP S/4HANA Cloud Implementation PUBLIC 21 12. Switch now to your SAP Business Technology Platform subaccount and access the Trust Settings. Choose the Application Identity Provider tab.

13. Choose Add Trusted Identity Provider and choose Browse to upload the Metadata XML File downloaded previouslyfrom your SAP Business Technology Platform Identity Authentication service.

14. Save your changes.

To check your configuration follow these steps:

1. Access your SAP Business Technology Platform subaccount. 2. Choose Services and access SAP Web IDE Full-Stack by double clicking on the corresponding tile. 3. Choose Go to Service. 4. SAP web IDE opens in a new window. You are redirected to the logon page of the IDP that you just configured.

 Note

When you open the application andare logged on automatically and can’t see the logon page, then you need to open the app in private (incognito) mode. To do so, without closing the opened window, you can copy the application URL, and paste it in a private window. You can even choose another browser to be sure that the session is not shared.

5. The logon screen of the identity authentication is displayed. Log on with your SAP S/4HANA Cloud account user.

Develop a Custom UI on SAP Business Technology Platform and Deploy it to SAP S/4HANA Cloud 22 PUBLIC Implementation Result

You’ve established a trust between the SAP Business Technology Platform Identity Authentication service and your SAP Business Technology Platform subaccount.

3.4 Configure Trust Between SAP S/4HANA Cloud and Your SAP Business Technology Platform Subccount

Use

In this step, you configure a communication system using OAuth on your SAP S/4HANA Cloud system. You then assign a communication user to this communication system. You assign the URL of your SAP Web IDE development environment to this inbound communication user. You then upload the certificate of your SAP Business Technology Platform account to the S/4HANA Cloud system. In the last step, you configure a communication arrangement to establish trust between SAP S/4HANA Cloud and your SAP Business Technology Platform subaccount.

Develop a Custom UI on SAP Business Technology Platform and Deploy it to SAP S/4HANA Cloud Implementation PUBLIC 23 3.4.1 Create a Communication System

Use

In this step, you create a communication system. This system represents the remote system with which the SAP S/4HANA Cloud system communicates (in this case, the SAP Web IDE system).

Procedure

1. Log on to the SAP Fiori launchpad on your SAP S/4HANA Cloud system. 2. Under Communication Management, open the Communication Systems app. 3. Choose New. 4. In the dialog box, enter a system ID and a system name. 5. Choose Create. 6. Leave your browser session open and, in a new tab, open your SAP Business Technology Platform account. 7. Go to Services and choose SAP Web IDE Full-Stack. 8. Right-click on Go to Service and choose Copy Link Address. Paste the URL into a text editor and delete the https:// prefix from the URL. The result should be in the following format: webidecp-.dispatcher.eu2.hana.ondemand.com/

Develop a Custom UI on SAP Business Technology Platform and Deploy it to SAP S/4HANA Cloud 24 PUBLIC Implementation 9. Switch back to the Communication System creation screen in your SAP S/4HANA Cloud system. In the General Data section, under Host Name, paste the modified URL of your SAP Web IDE account that you prepared in the previous step.

10. In User for Inbound Communication section choose Add (+). An inbound communication user is used to enable an external system to call the S/4HANA Cloud system. 11. In the New Inbound Communication User dialog box, choose New User . 12. Enter a user name, description, and password in the corresponding fields, and choose Create. 13. In the New Inbound Communication User dialog box, choose OK to add this user as an inbound communication user. 14. On the Communication System editing screen, choose Save. 15. Switch back to your SAP Business Technology Platform account and go to Security Trust . 16. Copy the content of the Signing Certificate section into a text editor.

Develop a Custom UI on SAP Business Technology Platform and Deploy it to SAP S/4HANA Cloud Implementation PUBLIC 25 17. In your text editor, add the line -----BEGIN CERTIFICATE----- at the top and -----END CERTIFICATE----- at the end of the file and save.

18. Switch to your SAP S/4HANA Cloud system. Open the communication system that you created in previous step and choose Edit. 19. In the OAuth 2.0 Identity Provider section, toggle the switch to On. 20.To upload the certificate from the SAP Business Technology Platform account that you prepared earlier, choose Upload Signing Certificate. 21. After uploading the certificate, copy the value of the CN attribute and paste it into the Provider Name field. 22.Choose Save.

Develop a Custom UI on SAP Business Technology Platform and Deploy it to SAP S/4HANA Cloud 26 PUBLIC Implementation Result

You have created a communication system. The SAP S/4HANA Cloud system now trusts your SAP Business Technology Platform subaccount.

3.4.2 Create a Communication Arrangement

Use

In this section, you create a communication arrangement that describes a communication scenario with a remote system.

Procedure

1. Log on to the SAP Fiori launchpad on your SAP S/4HANA Cloud system.

Develop a Custom UI on SAP Business Technology Platform and Deploy it to SAP S/4HANA Cloud Implementation PUBLIC 27 2. Under Communication Management, open the Communication Arrangements app. 3. Choose New. 4. In the dialog box, select the SAP_COM_0013 scenario (SAP Web IDE integration scenario). 5. Enter the communication arrangement name SAP_COM_0013_DEV, and choose Create. 6. In the Common Data section, select the Communication System BTP_DEV_SYSTEM that you created in the previous step. 7. The communication user you created previously is automatically added to the Inbound Communication section. Make sure that the Authentication Method is set to OAuth 2.0. If not, in the User field, select the OAuth 2.0 user using the value help. 8. In the Launch SAP Web IDE section, select the Active checkbox for the Service Status field. This ensures that there is a tile in the Extensibility group on the SAP Fiori launchpad. From this tile, you can go directly to the SAP Web IDE. 9. Choose Save.

Result

The communication is now fully configured.

3.4.3 Configure the Destination on SAP Business Technology Platform

Use

In this section, you create a destination that is used for the outbound communication between your application and a remote system (SAP S/4HANA Cloud). Note that you need to create a destination using OAuth authentication.

Procedure

To create the destination on SAP Business Technology Platform, you need to get information from the communication arrangement that you created previously. Open the communication arrangement SAP _COM_0013 _ DEV and choose OAuth 2.0 Details.

Develop a Custom UI on SAP Business Technology Platform and Deploy it to SAP S/4HANA Cloud 28 PUBLIC Implementation The following table describes the mapping of the labels that you need in this procedure:

Label in S/ 4HANA OAuth De tails Label in SAP Business Technology Platform destination Equals to

Client ID Client Key Communications System Inbound User

User Name Token Service User Comminucations System Inbound User

Token Token Service URL Service URL

Develop a Custom UI on SAP Business Technology Platform and Deploy it to SAP S/4HANA Cloud Implementation PUBLIC 29 Label in S/ 4HANA OAuth De tails Label in SAP Business Technology Platform destination Equals to

Token URL Service URL: first parts (pro tocol + do main, for exam ple:https :// myXXXXXX - api.s4ha na.ondem and.com)

SAML2 Audience Audience

1. Log on to the SAP Business Technology Platform cockpit of your subaccount. 2. Go to Connectivity Destinations . 3. Choose New Destination. 4. Maintain the following values:

Property Name Property Value

Name S4H_Equipment

Note: If you enter a different name, then you need to ad just the delivered code accordingly

Type http

Description (Optional)

URL For example: https://XXXXX- api.s4hana.ondemand.com

Token Service URL: first parts (protocol + domain, for ex ample: https://myXXXXXX- api.s4hana.ondemand.com)

Proxy Type Internet

Develop a Custom UI on SAP Business Technology Platform and Deploy it to SAP S/4HANA Cloud 30 PUBLIC Implementation Property Name Property Value

Authentication OAuth2SAMLBearerAssertion

Audience For example: https:// myaccount.s4hana.ondemand.com

SAML2 Audience in S/4HANA Web IDE communication ar rangement OAuth details for inbound communication

Client Key

This is the name of the inbound communication user you created previously.

Token Service URL For example: https://XXXXX- api.s4hana.ondemand.com/sap/bc/sec/ oauth2/token

URL +/sap/bc/sec/oauth2/token

Token Service User This is the name of the in bound communication user you created previously.

Token Service Password This is the password of the inbound communication user you created previously.

SystemUser This parameter is not used. Leave it blank.

Develop a Custom UI on SAP Business Technology Platform and Deploy it to SAP S/4HANA Cloud Implementation PUBLIC 31 5. Choose New Property and add the following properties:

Additional Property Name Additional Propery Value

WEBIDEEnabled true

WEBIDEUsage odata_abap,ui5_execute_abap,dev_abap

TrustAll true

authnContextClassRef urn:oasis:names:tc:SAML: 2.0:ac:classes:X509

For detailed documentation on the additional properties, see Connect to ABAP Systems.

6. Choose Save.

Result

The destination on SAP Business Technology Platform in now configured. This destination is used in the sample app for the following purposes:

● Reading business data from the SAP S/4HANA Cloud system and displaying this data in the sample app on the SAP Fiori Sandbox system on SAP Business Technology Platform. ● Deploying the sample app back to the SAP S/4HANA Cloud system.

3.5 Expose the Custom Business Object as an External Web Service

Use

You have already configured the custom business object Equipment. The next stage is to expose real data from the SAP S/4HANA Cloud system so that you can continue to develop the sample app in SAP Web IDE.

Develop a Custom UI on SAP Business Technology Platform and Deploy it to SAP S/4HANA Cloud 32 PUBLIC Implementation 3.5.1 Check OData Service for the Custom Business Object

Use

You already generated an OData service for the custom business object in the Create a Custom Business Object [page 11] section. In this step, you check that it was generated successfully.

Procedure

1. Log on to the SAP Fiori launchpad on your SAP S/4HANA Cloud system. 2. Under Extensibility, open the Custom Business Objects app. 3. Choose the custom business object Equipment from the list to open the object details screen. 4. Make sure that the custom business object has the status Published and make sure that the checkboxes for Determination and Validation, UI Generation, and Service Generation are selected.

Result

You have confirmed that the OData service for the custom business object was successfully generated.

Develop a Custom UI on SAP Business Technology Platform and Deploy it to SAP S/4HANA Cloud Implementation PUBLIC 33 3.5.2 Create Custom Communication Scenario

Use

A communication scenario bundles design-time artifacts of inbound and outbound communication. It is the basis for communication between different systems. Each communication arrangement must be assigned to a communication scenario. In this step, you create a custom communication scenario.

Procedure

1. Log on to the SAP Fiori launchpad on your SAP S/4HANA Cloud system. 2. In the Extensibility section, open the Custom Communication Scenarios app. 3. To create a new communication scenario, choose New. 4. In both the Communication Scenario ID and the Description fields, enter Equipment. 5. In the Inbound Services section, choose Add and select the view YY1_Equipment _CDS from the list of services. 6. Choose Publish.

Result

You have created a custom communication scenario.

3.5.3 Create Communication Arrangement

Use

In this step, you create the communication arrangement, which exposes the data of your custom business object Equipment.

Develop a Custom UI on SAP Business Technology Platform and Deploy it to SAP S/4HANA Cloud 34 PUBLIC Implementation Procedure

1. Log on to the SAP Fiori launchpad on your SAP S/4HANA Cloud system. 2. In the Communication Management section, open the Communication Arrangementsapp. 3. To create a new Communication Arrangement, choose New. 4. Select the scenario YY1_EQUIPMENT from the scenario list and enter a name. 5. Choose Create. 6. In the Communication System field, select BTP_DEV_SYSTEM from the input help. 7. Check the User Name field to make sure that the communication user BTP_DEV using OAuth 2.0 was automatically assigned.. 8. Choose Save .

Result

The communication arrangement is now configured. The YY 1 _Equipment service is now available as a data source in SAP Web IDE.

3.6 Configure the Delivered Sample App for Use in the S/ 4HANA Cloud System

Use

The section covers the following steps, which you need to complete in order to use the SAP-delivered sample app for Equipment in your SAP S/4HANA Cloud system:

● Download the code of the sample app from the GitHub repository. ● Upload the sample app code to your SAP Web IDE account. ● Test the sample app in SAP Web IDE in the SAP Fiori Sandbox environment on SAP Business Technology Platform. ● Deploy the app back to the ABAP repository of your SAP S/4 HANA Cloud system. ● Integrate the app in the SAP Fiori launchpad of your SAP S/4 HANA Cloud system. ● Test the sample app in your SAP S/4 HANA Cloud system.

Develop a Custom UI on SAP Business Technology Platform and Deploy it to SAP S/4HANA Cloud Implementation PUBLIC 35 3.6.1 Import and Test the SAP Fiori Sample App to Your SAP Web IDE Environment

Use

In this section, you download the sample app from the Github repository and import it to your SAP Web IDE environment. Finally, you test the app in the SAP Fiori Sandbox environment on SAP Business Technology Platform.

You can access the sample app repository on GitHub .

Procedure

1. Download the zipped and ready-to-use sample app to your local drive. 2. Access SAP Web IDE Full-Stack as follows: 1. From the SAP Business Technology Platform cockpit, in the navigation bar on the left, choose Services. 2. On the right, scroll down and choose the SAP Web IDE Full-Stack tile to open the SAP Web IDE Service page. 3. On the Service page, choose the Go to Service link to open the SAP Web IDE in a new browser tab (you can bookmark this URL to access it easily). 3. Go to File Import File or Project . 4. Select the ZIP file and import it. The file is extracted automatically. You’ve imported the app code into your SAP Web IDE. 5. If you named the destination anything other than S4H_Equipment in your SAP Business Technology Platform subaccount (as described in the Configure the Destination on SAP Business Technology Platform [page 28] section), you need to update the destination name in the file neo-app.json. Otherwise, you can ignore this step. To update neo-app.json, proceed as follows: ○ In SAP Web IDE, double-click on the neo-app.json file ○ Scroll down to the very end of the file and make the following changes Before:

…

}, { "path": "/sap/opu/odata", "target": { "type": "destination", "name": "S4H_Equipment", "entryPath": "/sap/opu/odata" }, "description": "Destination to S/4HANA Cloud System" }],

After:

…

}, {

Develop a Custom UI on SAP Business Technology Platform and Deploy it to SAP S/4HANA Cloud 36 PUBLIC Implementation "path": "/sap/opu/odata", "target": { "type": "destination", "name": "", "entryPath": "/sap/opu/odata" }, "description": "Destination to S/4HANA Cloud System" }],

6. Choose Save .

 Caution

The walk-through described here is closely connected to the sample app code. For example, if you chose a different name for the CDS view/OData service, the app won’t work. If this is the case, check the code of the following files in SAP Web IDE and edit them to match your names. You need to search for, and replace, the service name YY1_EQUIPMENT_CDS (or the destination name/custom field name respectively) in the code.

7. To test the app in the SAP Fiori launchpad Sandbox environment, right-click the root folder of your app and go to Run Run as SAP Fiori Launchpad Sandbox . 8. The application opens in an SAP Web IDE preview pane. It displays data from the SAP S/4HANA Cloud system.

 Note

As you haven’t created any data so far, no data is displayed in the app.

Develop a Custom UI on SAP Business Technology Platform and Deploy it to SAP S/4HANA Cloud Implementation PUBLIC 37 Result

You’ve now imported the predelivered Equipment-app to your SAP Web IDE account. Running the app in the SAP Fiori App Sandbox environment enables you to test the app in your development environment.

3.6.2 Deploy the SAP Fiori App Back to Your SAP S/4HANA Cloud System

Use

In this section, you deploy the SAP Fiori app from the SAP Business Technology Platform back to the SAPUI5 ABAP repository of your SAP S/4HANA Cloud system.

Procedure

1. Access your SAP Web IDE development environment. 2. Right-click the root folder of the app that you want to deploy. 3. Go to Deploy Deploy to SAPUI5 ABAP Repository .

4. In the wizard, select the system to which you want to deploy the app. In this case, select the name of the destination you created (default S4H_Equipment) when setting up the SAP Web IDE integration.

Develop a Custom UI on SAP Business Technology Platform and Deploy it to SAP S/4HANA Cloud 38 PUBLIC Implementation If you cannot see any system, refresh the browser to refresh the SAP Web IDE. 5. Choose Next. 6. Choose Deploy a New Application and then Next. 7. Enter Equipment as the name for the app and as the description, then choose Next.

8. Choose Finish. You can open the console in SAP Web IDE to track the deployment.

 Note

If the system times out during the deployment, access your SAP Business Technology Platform subaccount and choose Connectivity Destination . Select the destination S4H_Equipment and choose Edit. Choose New Properties and add the following parameters to your destination:

Additional Property Name Additional Property Value

HTML5.ConnectionTimeoutInSeconds 120

HTML5.SocketReadTimeoutInSeconds 300

Develop a Custom UI on SAP Business Technology Platform and Deploy it to SAP S/4HANA Cloud Implementation PUBLIC 39 Choose Save.

Try again to deploy the app to the SAPUI5 ABAP Repository.

Result

You have now deployed the app to the ABAP repository of your SAP S/4HANA Cloud account.

3.6.3 Extend a Business Catalog and Embed an App in the SAP Fiori Launchpad

Procedure

1. Log on to SAP Fiori launchpad on your SAP S/4HANA Cloud system. 2. Under Extensibility group, open the Custom Catalog Extensions app. 3. Search for your catalog extension: YY1_EQUIPMENT_UI5R.

 Note

If you gave the app a different name, you can simply search for UI5R.

4. Select the app from the Custom Catalog Extension list. 5. To add the app to a business catalog, choose Add and select all business catalogs in which you want the app to be available, for example, Extensibility.

Develop a Custom UI on SAP Business Technology Platform and Deploy it to SAP S/4HANA Cloud 40 PUBLIC Implementation 6. Once the business catalogs are available in the Used in Business Catalog list, select them and choose Publish. 7. There is now a tile for the app in each of the selected business catalogs on your SAP Fiori launchpad. If you cannot find the app tile on your SAP Fiori launchpad, choose the user icon in the upper-right corner of the screen and go to the App Finder. Locate the app tile. If the pin on the app tile is white, the app is currently hidden on the SAP Fiori launchpad. Select it to add the app manually. The app and its respective tile are both called Equipment V2.

Result

The app is now available as a tile in the Fiori launchpad of your SAP S/4HANA Cloud system.

Develop a Custom UI on SAP Business Technology Platform and Deploy it to SAP S/4HANA Cloud Implementation PUBLIC 41 4 Test the Custom UI

Use

In this section, you test the setup of the custom UI.

Prerequisites

The respective role for accessing the app has been assigned to you.

Procedure

1. Log on to the SAP Fiori launchpad on your SAP S/4HANA Cloud system. 2. Open the new custom UI from the SAP Fiori launchpad, that is, the tile called Equipment V2. 3. Create a new piece of Equipment and choose Add (+). 4. Maintain the equipment details and choose Save. 5. To assign the piece of equipment to a user, choose Add Assignee. Enter the relevant details and choose Save. 6. You can also create, change, or delete any existing assignments or equipment records.

Develop a Custom UI on SAP Business Technology Platform and Deploy it to SAP S/4HANA Cloud 42 PUBLIC Test the Custom UI 5 Transport the Extensions from Quality to Productive System

The following steps describe how to transport your extensions (including the custom app) from your quality system to your productive system.

If you want to export custom extension items, such as custom fields, to the productive system, they need to be added to a Software Collection in the quality system.

5.1 Export Extensions from the Quality System

Procedure

1. Log on to the SAP Fiori launchpad on your SAP S/4HANA Cloud quality system. 2. Under Extensibility – Transport Management, open the Export Software Collection app. 3. To create a new software collection, on the left of the screen choose Create Software Collection (+) and enter a Name, for example, ExtensionCollection. Then choose Create. 4. You can also add items to the default collection. Select the ExtensionCollection collection from the list on the left side of the screen. 5. Choose Add Items to add the required extension items. 6. In the Add Items dialog box, select the checkboxes for the following items and choose OK to add them to the software collection: ○ Custom Code List: YY1_EQUIPMENTTYPE, YY1_EQUIPMENTSTATUS, YY1_EQUIPMENTSTATUS1 ○ Custom Business Object: YY1_EQUIPMENT ○ Custom Catalog Extension (one or more if you assigned the app to several catalogs) ○ Custom UI From the list of items included in the software collection, choose Check to check for any existing inconsistencies and dependencies. 7. Choose Export to export the software collection and to transport the extension items that you added to the software collection.

Develop a Custom UI on SAP Business Technology Platform and Deploy it to SAP S/4HANA Cloud Transport the Extensions from Quality to Productive System PUBLIC 43 5.2 Import Extensions to the Productive System

Procedure

1. Log on to the SAP Fiori launchpad on your SAP S/4HANA Cloud productive system. 2. Under Extensibility – Transport Management, open the Import Software Collection app. The number displayed on the app tile indicates how many software collections are ready to be imported. 3. Under Version, find ExtensionCollection and check that the status is Ready for Import. 4. Select the collection and choose Import. 5. Confirm the Import Version dialog box and choose Import. When the import is complete, a success message is displayed. 6. On the Import Software Collection Details screen, the status is now Status: Imported. 7. Choose OK.

5.3 Test Imported Extensions in the Productive System

Use

In this step you test the custom UI to make sure that the transportation procedure from the quality system to the productive system is working correctly.

Procedure

Develop a Custom UI on SAP Business Technology Platform and Deploy it to SAP S/4HANA Cloud 44 PUBLIC Transport the Extensions from Quality to Productive System Result

You have successfully:

● Created a custom UI with SAP Web IDE on SAP Business Technology Platform, consuming a custom API from SAP S/4HANA Cloud ● Deployed a custom UI from SAP Business Technology Platform to your SAP S/4HANA Cloud quality system ● Transported a custom UI and in-app extensions from your SAP S/4HANA Cloud quality system to the productive system

Develop a Custom UI on SAP Business Technology Platform and Deploy it to SAP S/4HANA Cloud Transport the Extensions from Quality to Productive System PUBLIC 45 6 Appendix

6.1 Issues

Please note that SAP does not offer any official support for the sample code (see the SAP SAMPLE CODE LICENSE AGREEMENT on GitHub). However, feel free to use the Issues section on GitHub if you have any problems. We recommend that you browse through the known issues section before creating a new issue .

6.2 Document History

Revision Date Change

1.0 2018-05-28 Document created.

1.1 2018-06-04 Purpose section added.

1.2 2018-08-28 Set Up Trust Between Identity Authenti cation and SAP Cloud Platform section replaced by Configure Single Sign-On section.

1.3 2018-10-30 Minor amendments added.

2.0 2019-02-01 Sample reworked based on the Custom Business Object Equipment.

2.1 2019-05-31 Prerequisites updated with new URL.

2.2 2019-07-25 Table headings updated in Configure the Destination on SAP Cloud Platform.

2.3 2019-09-13 Issues section added.

3.0 2019-12-19 Complete restructuring of this guide. Now, one destination using OAuth 2.0 can be used for data connection and back deployment.

Develop a Custom UI on SAP Business Technology Platform and Deploy it to SAP S/4HANA Cloud 46 PUBLIC Appendix Important Disclaimers and Legal Information

Hyperlinks

Some links are classified by an icon and/or a mouseover text. These links provide additional information. About the icons:

● Links with the icon : You are entering a Web site that is not hosted by SAP. By using such links, you agree (unless expressly stated otherwise in your agreements with SAP) to this:

● The content of the linked-to site is not SAP documentation. You may not infer any product claims against SAP based on this information. ● SAP does not agree or disagree with the content on the linked-to site, nor does SAP warrant the availability and correctness. SAP shall not be liable for any damages caused by the use of such content unless damages have been caused by SAP's gross negligence or willful misconduct.

● Links with the icon : You are leaving the documentation for that particular SAP product or service and are entering a SAP-hosted Web site. By using such links, you agree that (unless expressly stated otherwise in your agreements with SAP) you may not infer any product claims against SAP based on this information.

Videos Hosted on External Platforms

Some videos may point to third-party video hosting platforms. SAP cannot guarantee the future availability of videos stored on these platforms. Furthermore, any advertisements or other content hosted on these platforms (for example, suggested videos or by navigating to other videos hosted on the same site), are not within the control or responsibility of SAP.

Beta and Other Experimental Features

Experimental features are not part of the officially delivered scope that SAP guarantees for future releases. This means that experimental features may be changed by SAP at any time for any reason without notice. Experimental features are not for productive use. You may not demonstrate, test, examine, evaluate or otherwise use the experimental features in a live operating environment or with data that has not been sufficiently backed up. The purpose of experimental features is to get feedback early on, allowing customers and partners to influence the future product accordingly. By providing your feedback (e.g. in the SAP Community), you accept that intellectual property rights of the contributions or derivative works shall remain the exclusive property of SAP.

Example Code

Any software coding and/or code snippets are examples. They are not for productive use. The example code is only intended to better explain and visualize the syntax and phrasing rules. SAP does not warrant the correctness and completeness of the example code. SAP shall not be liable for errors or damages caused by the use of example code unless damages have been caused by SAP's gross negligence or willful misconduct.

Gender-Related Language

We try not to use genderspecific word forms and formulations. As appropriate for context and readability, SAP may use masculine word forms to refer to all genders.

Develop a Custom UI on SAP Business Technology Platform and Deploy it to SAP S/4HANA Cloud Important Disclaimers and Legal Information PUBLIC 47 www.sap.com/contactsap

No part of this publication may be reproduced or transmitted in any form or for any purpose without the express permission of SAP SE or an SAP affiliate company. The information contained herein may be changed without prior notice.

Some software products marketed by SAP SE and its distributors contain proprietary software components of other software vendors. National product specifications may vary.

These materials are provided by SAP SE or an SAP affiliate company for informational purposes only, without representation or warranty of any kind, and SAP or its affiliated companies shall not be liable for errors or omissions with respect to the materials. The only warranties for SAP or SAP affiliate company products and services are those that are set forth in the express warranty statements accompanying such products and services, if any. Nothing herein should be construed as constituting an additional warranty.

SAP and other SAP products and services mentioned herein as well as their respective logos are trademarks or registered trademarks of SAP SE (or an SAP affiliate company) in Germany and other countries. All other product and service names mentioned are the trademarks of their respective companies.

Please see https://www.sap.com/about/legal/trademark.html for additional trademark information and notices.

THE BEST RUN