Technical Articles

Lukas Riederle

March 7, 2020 9 minute read

Experience Management – Create your first “Close the Loop” Integration with Qualtrics and SAP S/4HANA

Experience Management is a trending topic today. There is great potential and value in doing things right and replace guessing with knowing when it comes to human behavior within today’s Experience Economy. To be able to do that properly in a business context its crucial to combine the context – which is known already pretty often in the SAP Systems – with the experience information in the Experience Management Platform from Qualtrics. Having those two types of information combined you can get all necessary insights to improve and react properly on “Moments that Matter” to drive your business even better.

With this blog post I want to give a hands-on introduction how easy it is to enrich a feedback process in the Qualtrics XM Platform with operational data from an SAP System to react properly on a situation.

Target Process Overview

After running through the steps of this tutorial you have an up and running exemplary integrated feedback process combining Qualtrics CoreXM and SAP S/4HANA Cloud.

Source: Own Graphic

We include Service Order Details during a Customer Feedback and combine the mentioned satisfaction with the actual order gross amount to react properly.

Source: Screenshots from Qualtrics CoreXM

The process consists of the following steps:

We simulate the context of one of two customers. As this is just exemplary we just give the choice in the first step. I a real world scenario this would be already known by either Single-Sign-On or any other context.
With the customer information we query for the latest Service Orders for the customer number and ask for which one the feedback is relevant.
We query additional data to the selected service order and store it as context for the feedback.
We ask for the satisfaction with that process and for some concrete experiences, having that we can apply the powerful iQ capabilities of the Qualtrics XM Platform to analyze improvement potentials and strengths.
Finally we react depending on the combination of Experience and Operational data e.g. asking for allowance of a direct follow up which can then be assigned to the responsible person as a task or ticket.

Then scenario just showcases an example on how to combine SAP S/4HANA and the Qualtrics XM Platform within the process of the feedback gathering while only using functionality which is available as free trial.

This is only setting the foundation for applying all the powerful insight, analytics and follow-up functionalities which the platforms provide. If you want to learn more about it, feel free to reach out to us and have a first look here:

https://www.sap.com/products/experience-management-xm.html

https://www.qualtrics.com/

Preconditions

Every step of this blog post can be done with free trial accounts of SAP Cloud Platform and Qualtrics CoreXM combined with the SAP S/4HANA Cloud API Sandbox.
But keep in mind: This comes with very limited functionalities compared to a paid version of the platform. Reach out to us if you have any questions.

Needed Accounts

Qualtics CoreXM Trial Account: https://www.qualtrics.com/free-account/

SAP Cloud Platform Trial Account: https://developers.sap.com/tutorials/hcp-create-trial-account.html

Needed Knowledge

For the Qualtrics side you don’t need knowledge upfront to run this tutorial. But to better understand possibilites and adopt the scenario to your own I suggest to go through the “Basecamp” most important: Introduction into the basics and how to create a project in Qualtrics CoreXM: https://basecamp.qualtrics.com/series/learn-to-use-qualtrics-research-core/rc-configuring-your-project

For the middleware on SAP Cloud Platform you need knowledge about the Platform, expecially the Cloud Foundry environment and at least some about JavaScript/NodeJS/TypeScript.

There are great Tutorials on https://developers.sap.com/

as well as courses on https://open.sap.com/

Our target architecture

Source: Own Graphic

Setup your SAP and Qualtrics Integration Service

There are different great options available for doing this and I will give a bit more insights in the outlook.

Now lets get started to build the necessary integration middleware.

For that purpose I decided to build a simple a simple application leveraging the power of the SAP Cloud SDK as part of the SAP Cloud Platform Extension Factory and will run in it the Cloud Foundry environment. I went for the JavaScript (more concrete TypeScript) Version due to the flexibility and native JSON Support.

First, you need to setup your development environment. I went with my existing local installation of Visual Studio Code already prepared for developing NodeJS Applications with tools like npm ready to use, but you can also go with the great SAP Business Application Studio if you prefer a managed cloud environment: https://help.sap.com/viewer/product/SAP%20Business%20Application%20Studio/Cloud/en-US?task=discover_task

Build the integration

I will just mention the most important steps with the special needs for our case. A great generic tutorial with all the details can be found here: https://developers.sap.com/group.s4sdk-js-cloud-foundry.html

Prepare the app

Create a new project folder I called it “xmblog”.
Install the command line interface (CLI) for SAP Cloud SDK
```
npm install -g @sap-cloud-sdk/cli
```
Scaffold the SAP Cloud SDK Template replace <yourid> with a personal identifier
```
sap-cloud-sdk init <yourid>-s4xmblog
```
Now you can already try the dummy app running
```
npm run start:dev
```
and see a “Hello World” at http://localhost:3000/

Setup the SAP S/4HANA Cloud Query

Security

First we want to at least have a very basic security by requiring a key as its only a playground app but still we don’t want it to be accessible by everyone.

With NestJS as our base we will add a new guard for this.

add a new file “auth.guards.ts” within folder “src”.

Put the following code checking the value of the header “secret” and change the “secretkey” value to a random one.

import { Injectable, CanActivate, ExecutionContext } from '@nestjs/common';
import { Observable } from 'rxjs';

@Injectable()
export class AuthGuard implements CanActivate {
    secretkey:String = 'key';
  canActivate(
    context: ExecutionContext,
  ): boolean | Promise<boolean> | Observable<boolean> {
    const request = context.switchToHttp().getRequest();
    return this.validateRequest(request);
  }
  validateRequest(request: Request):boolean {
    return request.headers.['secret'] === this.secretkey;
  }
}

Adopt the beginning of the file “app.controller.ts” to include the guard like this

import { Controller, Get, UseGuards } from '@nestjs/common';
import { AppService } from './app.service';
import { AuthGuard } from './auth.guards';

@UseGuards(AuthGuard)
@Controller()
export class AppController {
[...]

Now your access to the application should return “forbidden” if you don’t provide the proper header.

More thoughts about Security will follow in the outlook.

Connect to SAP S/4HANA Cloud Sandbox Instance

In our example we want to access some information of the service order from the SAP S/4HANA Cloud system therefore we need to perform the following steps:

add a new file “s4hana.controller.ts” within folder “src”.

Put the following code

import { Controller, Get, UseGuards } from '@nestjs/common';
import { AuthGuard } from './auth.guards';

@UseGuards(AuthGuard)
@Controller()
export class S4HANAController{
  @Get('service-orders')
  getServiceOrders() {
    return 'We will implement this in a minute.';
  }
}

import { Module } from '@nestjs/common';
import { AppController } from './app.controller';
import { AppService } from './app.service';
import { S4HANAController } from './s4hana.controller';

@Module({
  imports: [],
  controllers: [AppController,S4HANAController],
  providers: [AppService],
})
export class AppModule {}

Now we need to install the virtual data model (VDM) from the SAP Cloud SDK for JavaScript to ease our connection to SAP S/4HANA. For our example we use the Service Order Service.
Its documented here: Service Order Service
Side-note: The SAP Cloud SDK for JavaScript offers packages for each OData service exposed by SAP S/4HANA Cloud. You can find a list of these services in the SAP API Business Hub and a list of the corresponding packages in the documentation.So just run:
```
npm install @sap/cloud-sdk-vdm-service-order-service
```
Next we will import the ServiceOrder and ServiceOrderItem Entities from the VDM into our s4hana.controller.ts file
```
import { ServiceOrder, ServiceOrderItem } from '@sap/cloud-sdk-vdm-service-order-service';
```

Now we add the logic to call an SAP S/4HANA API, you can get your own API key from the SAP API Business hub. Just login and select “Show API Key” at the top. https://api.sap.com/api/API_SERVICE_ORDER_SRV/resource

import { Controller, Get, Query, UseGuards } from '@nestjs/common';
import { ServiceOrder, ServiceOrderItem } from '@sap/cloud-sdk-vdm-service-order-service';
import { AuthGuard } from './auth.guards';

// Our API Key to access the SAP S/4HANA Cloud System
const apiKey = '<yourAPIKey>';
// Our SAP S/4HANA Cloud URL
const s4Url = 'https://sandbox.api.sap.com/s4hanacloud';
// Our simulated customer id
const customer = '17100003';

@UseGuards(AuthGuard)
@Controller()
export class S4HANAController{
  @Get('service-orders')
  getServiceOrders(@Query('customerid')customerid:string) {
    console.log(customerid)
    return this.getLatestOrders(customerid||customer);
  }
  getLatestOrders(customerid:string): Promise<ServiceOrder[]> {
   return ServiceOrder.requestBuilder()
      .getAll().top(3)
      .filter(ServiceOrder.SHIP_TO_PARTY.equals(customerid))
      .withCustomHeaders({ APIKey: apiKey})
      .execute({
        url: s4Url
      });
  }
  @Get('service-order-items')
  getOrderItems(@Query('order')order:string) {
    console.log(order)
    if(!order){
        return {};
    }
    return this.getMyOrderItems(order);
  }
  getMyOrderItems(order:string): Promise<ServiceOrderItem[]> {
   return ServiceOrderItem.requestBuilder()
      .getAll().top(2)
      .filter(ServiceOrderItem.SERVICE_ORDER.equals(order))
      .withCustomHeaders({ APIKey: apiKey})
      .execute({
        url: s4Url
      });
  }
}

NOTE: For a real world scenario you should use the SAP Cloud Platform Destination service instead of the direct URL.

And that’s it, now you can try it out!

Deploy application to Cloud Foundry

In your command line, run:
```
npm run ci-build
```
then run
```
npm run ci-package
```
logon to your cloud platform account using cf login and deploy your application using cf push
finally it will display you the route like “-s4xmblog.cfapps.eu10.hana.ondemand.com” you can use to access the app.

Setup your Qualtrics CoreXM project

Now we setup the Qualtrics CoreXM survey. If you don’t have a Qualtrics CoreXM account you can create one here: https://www.qualtrics.com/free-account/

Please keep in mind always that the trial account only provides a very limited set of the Qualtrics XM Platform power but this tutorial is designed to work with this limitations.

If you want to learn more have a look into the chapter “Trial limitations”

Create Sample Project

Login into your Qualtrics XM Platform Account
Click on “Create new project”
Click on “Survey”
Click on “From a File” and select “BLOGPOST_XO_Demo_Cloud_SDK.qsf” which is available here: https://techsalesemea.eu.qualtrics.com/WRQualtricsControlPanel_rel/File.php?F=F_eWC7moH2OxrJ057&download=1
Select “Get Started”

Adopt Survey Flow

Click on “Survey Flow”
There are two “Web Service” Calls in the Flow. please change the URL to match your deployed middleware from the first chapter.
And change also the Custom Header to match your secret. Source: Screenshot from Qualtrics CoreXM
Save the flow

Test the survey

Finally, click on “Publish” and you’re done!

Congratulations! You have created your first Qualtrics CoreXM Feedback Channel which collects data from SAP S/4HANA Cloud and adopts to it.

Now get engaged on your own.

Adopt, change and improve what you have done in this first step. Apply it to other processes!
How about one for employees?
How about one for a supplier?
How about checking whether the phone number is already available in the customer information before asking for it?

Let me know what you did on top!

This is my first public blog post, so please help me improve and share possible corrections or unclear parts with me.

Last but not least:

This blog post is just out of my personal experience and learning of the topic. It doesn’t represent any official statements for SAP’s product directions or functionalities.

About Me

I am working as Innovation Lead and Architect within a team in the Customer Advisory which is focused on driving customer innovations around XM (Experience Management) and Business Technology for Middle and Eastern Europe.

I am with SAP for more then 10 years in different customer facing roles and my motivation is to improve and innovate on business processes around all industries by applying technology in a way no one has done before.

You can also connect with me on LinkedIn http://linkedin.com/in/riederle

Outlook

I will add further insights about the trial limitation, other ways of adding more intelligence, sources to get more into detail and alternative integration options in future.

As a next step maybe you want to continue embedding employee feedback into your SAP Fiori Launchpad? Have a look here: https://blogs.sap.com/2020/05/07/experience-management-collect-feedback-from-within-your-sap-fiori-launchpad-with-qualtrics/

1 Comment

You must be Logged on to comment or reply to a post.

Winters Rang

March 22, 2020 at 11:39 am

Hello Lukas,

Great blog, thanks for sharing!

Cheers,

Winters