Integrate SAP BTP, Cloud Foundry Themes with SAP S/4HANA

In this tutorial, you’ll configure your ABAP system to use the CF theming service as a destination for “remote theming”. The CF theming service requires authenticated requests. Your ABAP system will use OAuth2 client credentials to authenticate. In this step, you’ll create a service key for the CF theming service in the SAP BTP Cloud Foundry cockpit. Optionally, you can use the cf CLI as an alternative route to get this service key.

1. In the BTP Cockpit of your subaccount, from the Cloud Foundry space, choose Services > Instances from the left-hand navigation:

   

2. Select the service with UI Theme Designer in plan standard to view its details:

   

3. Under Service Keys choose Create:

   

4. In the New Service Key dialog, provide a meaningful machine-friendly Service Key Name like “abap-remote-theming”, leave binding parameters as the default {} and choose Create:

   

5. Under Service Keys select the newly created service key:

   

6. From the Credentials dialog, copy uaa.clientid, uaa.clientsecret, uaa.url and uri (you will need uaa.clientid in step 2.3, uaa.url in step 2.4, uaa.clientsecret in step 2.6 and uri in step 3.4):

   

7. Alternative: Use the cf CLI to create the service key. See Cloud Foundry Documentation: Using the Cloud Foundry Command Line Interface (cf CLI) for details on how to interact with the cf CLI.

   Shell Copy

   # 1. login to your CF space, given $CF_API_URL, $CF_ORG and $CF_SPACE
   cf login -a $CF_API_URL -o $CF_ORG -s $CF_SPACE
   # 2. find the name of the service with offering=theming and plan=standard
   THEMING_SERVICE=$(cf services | awk '$2 == "theming" && $3 == "standard" {print $1}')
   # 3. create a service key named "abap-remote-theming" for that service
   cf create-service-key $THEMING_SERVICE abap-remote-theming --wait
   # 4. view uaa.clientid, uaa.clientsecret, uaa.url and uri of that service key
   cf service-key $THEMING_SERVICE abap-remote-theming | tail -n +3 | jq '{clientid: .credentials.uaa.clientid, clientsecret: .credentials.uaa.clientsecret, url: .credentials.uaa.url, uri: .credentials.uri}'

You have just created a service key for your CF theming service. Now you’ll create an OAuth2 client in your ABAP system so that destinations can authenticate against your CF theming service with that service key.

1. In your ABAP system, start the transaction SOAUTH2_CLIENT:

   

2. In transaction SOAUTH2_CLIENT, select Create:

   

3. In the Select Profiles dialog, select /UI5/THEMING_REMOTE as OAuth 2.0 Client Profile, use uaa.clientid (from step 1.6) as OAuth 2.0 Client ID and confirm with OK (the checkmark button in the dialog footer toolbar):

   

4. Back in General Settings, use uaa.url (from step 1.6), without the leading https:// and with an additional trailing /oauth/token as Token Endpoint. Example: if your uaa.url is “https://example.com”, your Token Endpoint is “example.com/oauth/token”:

   

5. Select the tab Client Authentication, under Authentication Methods choose Form Fields and select Edit (the pen button next to Client Secret):

   

6. In the Client Secret dialog, use uaa.clientsecret (from step 1.6) as New Client Secret and confirm with OK (the checkmark button in the dialog footer toolbar):

   

7. Back in Client Authentication, under PSE for Https/TLS Communication, set “DFAULT” as SSL Client PSE:

   

8. Select the tab Grant Types, choose Client Credentials, confirm everything with Save (the disk button next to the OKCode field), and switch back to Display mode:

   

9. In Display mode, in the header toolbar, select Token:

   

10. In the Token Status dialog, select Request Token in the footer toolbar:

    

11. If the Token Status dialog has a section Access Token with an entry Valid, expires in 29 minutes, you’ve successfully created an OAuth2 client with the CF theming service client credentials. You can now close the SOAUTH2_CLIENT transaction:

    

You have successfully created a service key for your CF theming service and created an OAuth2 client in your ABAP system that uses the service key to authenticate. Now, you’ll create a destination in the ABAP system that uses the just created OAuth2 client.

1. In your ABAP system, start the transaction SM59:

   

2. In SM59, select Create (the document button in the table header toolbar):

   

3. In the Create Destination dialog, pick a machine-friendly name as Destination, for example “abap-remote-theming” (you will need this name in step 4.4), select Connection Type “G HTTP connection to external server” and confirm with OK (the checkmark button in the dialog footer toolbar):

   

4. Back in SM59, select the tab Technical Settings. Under Target System Settings, use the hostname of the uri of your service key (from step 1.6), without https:// and any path, as Host and “/themeroot/v1” as Path Prefix. For example, if your uri is “https://example.com/any/path", your Host is “example.com”:

   

5. Select the tab Logon & Security. Under Logon Procedure, section Logon with User, choose OAuth Settings:

   

6. In the OAUTH Settings dialog, select the Value Help of the Profl. input:

   

7. In the value help dialog, select the value where OAuth 2.0 Client Profile and OAuth 2.0 Client Configuration are “/UI5/THEMING_REMOTE”. Confirm with OK (the checkmark button in the dialog footer toolbar):

   

8. Back in the OAUTH Settings dialog, confirm the changes with Save (the disk button in the dialog footer toolbar):

   

9. Back in Logon & Security, under Security Options, subsection Status of Secure Protocol, choose Active for SSL. Confirm the profile creation with Save (the disk button next to the OKCode field). You can now close the SM59 transaction:

   

You already have a service key for your CF theming service, and in your ABAP system an OAuth2 client that uses the service key, and a destination that uses the OAuth2 client. The last setup step is to create a customizing in the SPRO transaction that tells UI theme designer in the ABAP system to use the remote theming scenario.

1. In your ABAP system, start the transaction SPRO:

   

2. In SPRO, select SAP Reference IMG from the header toolbar:

   

3. Under SAP Customizing Implementation Guide expand the following hierarchy: ABAP Platform, UI Technologies, UI Theme Designer. Choose Activate (the clock/checkmark button) for Select the Theming Scenario:

   

4. In the /UI5/THEM_CUSTOMIZE customization, under Select the theming scenario, select Remote theming scenario. Use the name of the destination you created (in step 2.3) as RFC Destination (Type G). Confirm with Save. You can now close the SPRO transaction:

   

Congratulations, you have gone through all configuration steps: you have a service key for your CF theming service, and in your ABAP system an OAuth2 client that uses the service key, a destination that uses the OAuth2 client, and a customization that tells UI theme designer to use the remote theming scenario. Now you can verify that this setup works as intended.

1. In your ABAP system, start the transaction /UI5/THEME_DESIGNER:

   

2. Instead of opening the theme designer web app in the browser, the transaction shows an error: The system is connected to a remote theming infrastructure. You can now close the /UI5/THEME_DESIGNER transaction:

   

3. Make sure you have a published theme in your CF theming service instance. Follow the Create a Theme with the UI Theme Designer tutorial or UI Theme Designer: Create and Edit Themes and Theme Sets to create one:

   

4. In your ABAP system, start the transaction /UI2/FLP:

   

5. In the FLP, select your Avatar (the circle in the top-right corner) to open the User Menu:

   

6. From the User Menu, select Settings:

   

7. From the Settings dialog, select Appearance:

   

8. In addition to the SAP-provided themes, the list of available themes should contain exactly the published themes from your CF theming service. Select your published theme and confirm with Save.

   

9. Reload the page. It should now appear in the theme you published in your CF theming service instance: