Anpassen des SAP Customer Engagement Centers – Hinzufügen einer eigenen WorkAreaView

Das Customer Engagement Center ist die SAP-Lösung, mit der deine Servicemitarbeiter konsistente, kontextuelle und relevante Erfahrungen unabhängig von Kanal und Gerät liefern können. Dies wird durch drei Eckpfeiler erreicht. Erstens, eine einheitliche Agentenerfahrung mit Kontaktkanälen, Kundeninformationen und Ticketingmöglichkeiten. Zweitens, durch die Bereitstellung eines konsistenten, qualitativ hochwertigen Kundenservice über Telefon, Chat, Video-Chat in derselben Schnittstelle, über integrierte Kommunikationskanäle, kompetenzbasiertes Routing und Warteschlangenmanagement. Und nicht zuletzt mit der Integration in verschiedene Systeme, z.B. SAP Backend-Systeme.

In diesem Beitrag werfen wir einen Blick auf deine Möglichkeiten, eigene Workarea Views und Integrationen in andere Systeme zu erstellen. Du wirst das SAP Customer Engagement Center anpassen, indem du eine einfache eigene Workarea View erstellst. Es ist nicht notwendig, dass du mit der Lösung vertraut bist, um die in diesem Beitrag vorgestellten Schritte abzuschließen. Bitte beachte, dass dies nur ein sehr einfaches Beispiel ist, um die Integration zu veranschaulichen. Es gibt in diesem Zusammenhang keine weitere Diskussion über Sicherheit, Internationalisierung oder dergleichen. Wenn Du daran interessiert bist, können wir dies in einem anderen Artikel näher betrachten.

Was du lernen wirst

Nachdem Du diesen Artikel durchgearbeitet hast, wirst Du wissen, wie man:

  • die Entwicklungsumgebung für das Customer Engagement Center einrichtet
  • eine grundlegende Workarea View strukturiert
  • eine eigene Workarea View erstellt, die sich nativ in das Customer Engagement Center integriert.
  • das Customer Engagement Center so konfiguriert, dass es deine eigenen Funktionen integriert.
  • Daten von einem OData-Service in einem SAP-Backend-System abruft, das über eine Destination erreichbar ist
  • eine lokale Entwicklungsumgebung für einen schnelleren Entwicklungszyklus nutzt
  • seine Anwendung in einem SAP Cloud Platform Cloud Foundry Space bereit stellt

Was du erstellen wirst

Ziel ist es, ein leicht verständliches Beispiel für die Erweiterung des Customer Engagement Centers zu schaffen. Du wirst eine einfache Workarea View implementieren, die der erste Schritt ist, um deine Benutzeroberfläche über das Customer Engagement Center zugänglich zu machen. In der kundeneigenen View ist es möglich, die Geschäftspartnerdaten aus dem Backend-System durch Eingabe der Geschäftspartner-ID abzurufen. Dies kann entweder über einen OData-Service oder über JSON-RPC erfolgen. In diesem ersten Beispiel wird nur auf die OData-Variante eingegangen.

SAP Customer Engagement Center eigene View mit Daten
Eingabe der Geschäftspartner ID
Ausgabe der Antwort aus der OData-Anfrage
Eigene WorkAreaView

Das Bild zeigt, was du nach Abschluss dieses Beitrags erstellt hast.

Einrichten deiner Customer Engagement Center Entwicklungsumgebung

Du benötigst die folgende Software, um dieses Beispiel abzuschließen:

Außerdem benötigst du ein Cloud Platform Cloud Foundry Konto mit ausreichenden freien Ressourcen und eine Subskription für das Customer Engagement Center. Der Cloud Connector muss ebenfalls eingerichtet und mit dem Backend-System verbunden sein.

Ich gehe an dieser Stelle davon aus, dass die Installation und Einrichtung der Software bereits abgeschlossen ist. Die Software ist nicht spezifisch für das Customer Engagement Center, sondern wird in der Regel für die Arbeit in der SAP Cloud Platform Cloud Foundry-Umgebung verwendet. Wenn du auf Schwierigkeiten stößt, hinterlasse bitte einen Kommentar. In diesem Fall werde ich diesen Abschnitt erweitern.

Erstellen der Projektstruktur

Lege zunächst einen Ordner für dein Projekt an. Ich nenne meinen Ordner Custom Workarea View Guide.

Die Struktur wird ähnlich sein wie folgt:

SAP Customer Engagement Center Visual Studio Code UI Module

Erstelle im Ordner Custom Workarea View Guide eine mta.yaml Datei und kopiere folgenden Code hinein:

[cc lang=“XML“ escaped=“true“ line_numbers=“true“ first_line=“1″ lines=“40″ highlight=““ noborder=“true“ nowrap=“true“]ID: com.cec_customer.isu_business_partner
_schema-version: ‚2.1‘
description: Extension of the Customer Engagement Center with a custom workarea view
version: 0.0.1

modules:
– name: com.cec_customer.isu_business_partner.ui
type: nodejs
path: ui_module
parameters:
memory: „256M“
disk-quota: „256M“
host: ${org}-${space}-.isu_business_partner-ui
[/cc]

Erstelle unter diesem Ordner einen weiteren Ordner mit dem Namen ui_module. Erstelle in diesem eine package.json Datei und kopiere folgenden Code hinein:

[cc lang=“html“ escaped=“true“ line_numbers=“true“ first_line=“1″ lines=“40″ highlight=““ noborder=“true“ nowrap=“true“]
{
„name“: „com.cec_customer.isu_business_partner.ui“,
„version“: „0.0.1“,
„license“: „UNLICENSED“,
„dependencies“: {
„cors“: „^2.8.4“,
„express“: „^4.16.4“
},
„engines“: {
„node“: „>= 6.11.0“
}
}
[/cc]

Erstelle ebenfalls im Ordner ui_module eine server.js Datei und füge dort folgenden Code ein:

[cc lang=“html“ escaped=“true“ line_numbers=“true“ first_line=“1″ lines=“40″ highlight=““ noborder=“true“ nowrap=“true“]
const express = require(‚express‘);
const app = express();
const port = process.env.PORT || 3001;

var cors = require(‚cors‘);
app.use(cors());

app.use(express.static(‚public‘));
app.listen(port, () => console.log(`Server listens on port ${port} – Service URL: http://localhost:${port}/`));
[/cc]

Erstellen der eigenen Workarea View

In diesem Schritt beginnen wir mit der Erstellung der View und des entsprechenden Controllers.

Danach wird Deine Ordnerstruktur ähnlich aussehen:

SAP Customer Engagement Center Visual Studio Code

Erstelle unterhalb des Ordners ui_module einen weiteren Ordner mit dem Namen public. Erstelle unter dem Ordner public einen weiteren Ordner view mit einer Datei Namens SearchBusinessPartnerData.view.xml.

Füge den folgenden Code in diese Datei ein:

[cc lang=“xml“ escaped=“true“ line_numbers=“true“ first_line=“1″ lines=“40″ highlight=““ noborder=“true“ nowrap=“true“]
<?xml version=“1.0″ encoding=“UTF-8″?>
<mvc:View xmlns:mvc=“sap.ui.core.mvc“
xmlns=“sap.m“
xmlns:f=“sap.ui.layout.form“ controllerName=“com.cec_customer.isu_business_partner.ui.controller.SearchBusinessPartnerData“>

<Text text=“This is where business partner data is retrieved via OData“/>

<f:SimpleForm id=“AccountOverview“ editable=“true“ layout=“ResponsiveGridLayout“>

<f:content>
<Label text=“Business Partner ID“ labelFor=“input-AccountID“ design=“Bold“/>
<Input id=“input-AccountID“ required=“true“ value=“{/AccountID}“/>
<Label text=“First name“ labelFor=“input-FirstName“/>
<Input id=“input-FirstName“ editable=“false“ value=“{/FirstName}“/>
<Label text=“Last name“ labelFor=“input-LastName“/>
<Input id=“input-LastName“ editable=“false“ value=“{/LastName}“/>
</f:content>

</f:SimpleForm>

<Button id=“btnOnSubmit“ type=“Emphasized“ text=“Submit“ press=“onSubmit“ enabled=“true“/>

</mvc:View>
[/cc]

Erstelle ebenfalls unter dem Ordner public einen weiteren Ordner Namens controller. Lege darin eine Datei namens SearchBusinessPartnerData.controller.js an.

Kopiere den folgenden Code in diese Datei:

[cc lang=“xml“ escaped=“true“ line_numbers=“true“ first_line=“1″ lines=“40″ highlight=““ noborder=“true“ nowrap=“true“]

sap.ui.define([
„sap/ui/core/mvc/Controller“,
„com/sap/ec/engagementcontext/ui/customcontrols/WorkareaViewController“
], function (Controller, oWorkareaViewController) {
„use strict“;

return oWorkareaViewController.extend(„com.cec_customer.isu_business_partner.ui.controller.SearchBusinessPartnerData“, {

onInit: function () {
Object
.getPrototypeOf(com.cec_customer.isu_business_partner.ui.controller.SearchBusinessPartnerData.prototype).initWorkareaView
.call(this, {
„beforeCancelContext“: false,
„beforeCloseContext“: false
});

// view initialization parameters & global object references are accessible with controller variable oViewData
this.getBCD().subscribe(com.sap.ec.engagementcontext.ui.bcd.Events.AccountConfirmed, this.onAccountConfirmed, this);
this.getBCD().subscribe(com.sap.ec.engagementcontext.ui.bcd.Events.AccountUnconfirmed, this.onAccountUnconfirmed, this);

},

onAccountConfirmed: function () {},

onAccountUnconfirmed: function () {},

// Called when the Controller is destroyed. Use this one to free resources and finalize activities.
onExit: function () {
this.getBCD().unsubscribe(com.sap.ec.engagementcontext.ui.bcd.Events.AccountConfirmed, this.onAccountConfirmed, this);
this.getBCD().unsubscribe(com.sap.ec.engagementcontext.ui.bcd.Events.AccountUnconfirmed, this.onAccountUnconfirmed, this);
Object.getPrototypeOf(com.cec_customer.isu_business_partner.ui.controller.SearchBusinessPartnerData.prototype).onExit.call(this);
},

// return business document type
getBusinessDocumentType: function () {
return this.getView().getViewData().oData.businessDocumentType;
},

// return business document id
getBusinessDocumentId: function () {
return this.getView().getViewData().oData.businessDocumentId;
},

/*
* Mandatory function for the Engagement Context
*
* If you specify the opened View then the Engagement
* Context need to know some ID of this view. E.g. if this
* is a creation view of a document with the ID xy, then the
* Object ID is xy. The title is the title of the opened
* view and the tooltip is used for some feedback messages
* that references on this view.
*/
getWorkareaViewTexts: function () {
return {
„title“: „IS-U Business Partner“,
„tooltip“: „IS-U Business Partner“
};
},

});
});

[/cc]

Nun haben wir eine grundlegende View mit einem zugehörigen Controller. Allerdings müssen wir diese noch in das Customer Engagement Center integrieren.

Hinzufügen der lokalen Version deiner Work Area View zum Customer Engagement Center

Um einen schnelleren Entwicklungszyklus zu erreichen und nicht nach jeder Änderung auf die SAP Cloud Platform zu deployen, empfehle ich dir, die lokale Version deines Codes zu implementieren, bis du mit deiner Entwicklung fertig bist.

Um eine lokale Entwicklung durchzuführen, werde ich eine Erweiterung für Visual Studio-Code namens Live Server verwenden. Du kannst deinen lokalen Server so betreiben, wie du willst.

Derzeit benötigst du ein Programm wie Postman, um alle notwendigen Konfigurationen vorzunehmen. Dies kann sich mit einem späteren Update ändern.

Um Änderungen vornehmen zu können, musst du einen Token beschaffen. Die URL für Tenants in Europa lautet derzeit: https://sap-cec-ec-prod-cecenter-fiorilaunchpad.cfapps.eu10.hana.ondemand.com/v1/security/access-token. Du kannst die für deinen Tenant geltende URL über eine Supportnachricht anfordern.

Du musst die Basisauthentifizierung mit einem Benutzernamen und einem Passwort verwenden. Der Benutzer muss über die Berechtigungen verfügen, um die Konfiguration durchführen zu können. Füge im Body deiner Post Anfrage deine Tenant-ID hinzu.

Wenn du deine Tenant-ID nicht kennst, schau dir einfach den ersten Teil deiner Engagement Center Lauchpad URL an: https://deintenantname.servicecloud.cfapps.eu10.hana.ondemand.com/sites#EngagementContext-Display.

[cc lang=“xml“ escaped=“true“ line_numbers=“true“ first_line=“1″ lines=“40″ highlight=““ noborder=“true“ nowrap=“true“]{„tenantId“: „deintenantname“}[/cc]

In den nächsten Konfigurationsschritten wählst du die Autorisierungsart Bearer Token und verwendest den Token, den du gerade von der Post-Anfrage zurückbekommen hast.

Während der folgenden Konfiguration musst du Folgendes hinzufügen:

Die Entität Modul enthält Attribute, die für das Laden des Moduls relevant sind, was für die korrekte Anzeige der Views erforderlich ist.
z.B. URL: https://sap-cec-ec-prod-engagement-context-odata.cfapps.eu10.hana.ondemand.com/customizingengagementcontext.xsodata/Module

[cc lang=“js“ escaped=“true“ line_numbers=“true“ first_line=“1″ lines=“40″ highlight=““ noborder=“true“ nowrap=“true“]{
„id“: „Z_MODULE_ISU_BUSINESS_PARTNER“,
„isActive“: 1,
„description“: „Module for a basic example of the integration of a custom Workarea View“,
„baseUrl“: „http://127.0.0.1:5500/Custom%20Workarea%20View%20Guide/ui_module/public/“,
„path“: „com.cec_customer.isu_business_partner.ui“,
„isDefault“: 0,
„namespace“: „CUST“,
„release“: „0.0.1“
}​
[/cc]

Die WorkAreaView wird im Arbeitsbereich des Agent Desktop angezeigt.
z.B. URL: https://sap-cec-ec-prod-engagement-context-odata.cfapps.eu10.hana.ondemand.com/customizingengagementcontext.xsodata/WorkAreaView

[cc lang=“js“ escaped=“true“ line_numbers=“true“ first_line=“1″ lines=“40″ highlight=““ noborder=“true“ nowrap=“true“]{
„id“: „Z_WAV_ISU_BUSINESS_PARTNER_SEARCH“,
„isActive“: 1,
„description“: „Example of a custom Workarea View“,
„path“: „com.cec_customer.isu_business_partner.ui.view.SearchBusinessPartnerData“,
„icon“: „sap-icon://hint“,
„isClosable“: 1,
„isOneInstanceOnly“: 0,
„namespace“: „CUST“,
„release“: „1.0.0“
}[/cc]

Die ActionAreaView wird im Aktionsbereich des Agent Desktop angezeigt.
z.B. URL: https://sap-cec-ec-prod-engagement-context-odata.cfapps.eu10.hana.ondemand.com/customizingengagementcontext.xsodata/ActionAreaView

[cc lang=“js“ escaped=“true“ line_numbers=“true“ first_line=“1″ lines=“40″ highlight=““ noborder=“true“ nowrap=“true“]{
„id“: „Z_AAV_ISU_BUSINESS_PARTNER“,
„isActive“: 1,
„profilesLink.viewId“: „Z_AAV_ISU_BUSINESS_PARTNER“,
„description“: „AAV for basic guide“,
„viewPath“: „com.sap.ec.engagementcontext.ui.view.actionarea.tiles.AAV“,
„displayOrder“: 5,
„isCreateLinkActive“: 0,
„isSearchLinkActive“: 1,
„isPopoverLinkActive“: 0,
„createLinkTextId“: „“,
„searchLinkTextId“: „Search for IS-U BP Data“,
„popoverLinkTextId“: „“,
„needCreateLinkConfirmation“: 0,
„namespace“: „CUST“,
„release“: „1.0.0“
} ​[/cc]

Ein BusinessDocumentType (BDT) repräsentiert ein Objekt im Agent Desktop. Beispielsweise ServiceTicket, das Interaction Log, Geschäftspartner, usw.
z.B. URL: https://sap-cec-ec-prod-engagement-context-odata.cfapps.eu10.hana.ondemand.com/customizingengagementcontext.xsodata/BusinessDocumentType

[cc lang=“js“ escaped=“true“ line_numbers=“true“ first_line=“1″ lines=“40″ highlight=““ noborder=“true“ nowrap=“true“]{
„id“: „Z_BDT_ISU_BUSINESS_PARTNER“,
„category“: „“,
„description“: „CEC BDT for basic guide“,
„module.id“: „Z_MODULE_ISU_BUSINESS_PARTNER“,
„actionAreaView.id“: „Z_AAV_ISU_BUSINESS_PARTNER“,
„workareaViewDisplay.id“: „“,
„workareaViewSearch.id“: „Z_WAV_ISU_BUSINESS_PARTNER_SEARCH“,
„workareaViewEdit.id“: „“,
„workareaViewCreate.id“: „“,
„isActive“: 1,
„isInteractionLogRelevant“: 0,
„recentItemsUrl“: „“,
„recentItemsUpdateDelay“: 0,
„recentItemsDisplayOrder“: 0,
„itemHandlerClass“: „com.sap.ec.engagementcontext.ui.bcd.bcditem.AutoAAVBCDItem“,
„textIdSingular“: „ISU Business Partner“,
„textIdPlural“: „ISU Business Partners“,
„isLeadingBDT“: 0,
„isCommPopoverOpener“: 0,
„viewStartupParameters“: „“,
„namespace“: „CUST“,
„release“: „1.0.0“
}​[/cc]

Nach Durchführung der oben genannten Konfigurationen und dem Start eines lokalen Servers ist unser einfaches Beispiel, das lokal läuft, in unser Customer Engagement Center aufgenommen. Sobald wir das Customer Engagement Center aktualisiert und den Agent-Desktop geöffnet haben, sollten wir es sehen können.

SAP Customer Engagement Center eigene View (AAV)

So können wir einen Blick auf unsere Workarea View werfen.

SAP Customer Engagement Center eigene WorkAreaView

Allerdings haben wir noch keine Funktionalität zum Abrufen der Daten implementiert.

Erweitern des Controllers um weitere Funktionen

Zuerst müssen wir sicherstellen, dass der OData-Service über eine Destination auf unserem Cloud Platform Account verfügbar ist:

SAP Cloud Platform Destination

In diesem Beispiel zeigt die Destination direkt auf unseren OData-Service.

Wir müssen die onSubmit-Funktion implementieren, das Modell instanziieren und gegebenenfalls auf Fehler reagieren.

Unser Controller könnte so aussehen:

[cc lang=“js“ escaped=“true“ line_numbers=“true“ first_line=“1″ lines=“40″ highlight=““ noborder=“true“ nowrap=“true“]

sap.ui.define([
„sap/ui/core/mvc/Controller“,
„com/sap/ec/engagementcontext/ui/customcontrols/WorkareaViewController“
], function (Controller, oWorkareaViewController) {
„use strict“;

return oWorkareaViewController.extend(„com.cec_customer.isu_business_partner.ui.controller.SearchBusinessPartnerData“, {

onInit: function () {
Object
.getPrototypeOf(com.cec_customer.isu_business_partner.ui.controller.SearchBusinessPartnerData.prototype).initWorkareaView
.call(this, {
„beforeCancelContext“: false,
„beforeCloseContext“: false
});

// view initialization parameters & global object references are accessible with controller variable oViewData
this.getBCD().subscribe(com.sap.ec.engagementcontext.ui.bcd.Events.AccountConfirmed, this.onAccountConfirmed, this);
this.getBCD().subscribe(com.sap.ec.engagementcontext.ui.bcd.Events.AccountUnconfirmed, this.onAccountUnconfirmed, this);

var oModel = new sap.ui.model.json.JSONModel();
this.getView().setModel(oModel);

},

onAccountConfirmed: function () {},

onAccountUnconfirmed: function () {},

onExit: function () {
this.getBCD().unsubscribe(com.sap.ec.engagementcontext.ui.bcd.Events.AccountConfirmed, this.onAccountConfirmed, this);
this.getBCD().unsubscribe(com.sap.ec.engagementcontext.ui.bcd.Events.AccountUnconfirmed, this.onAccountUnconfirmed, this);
Object.getPrototypeOf(com.cec_customer.isu_business_partner.ui.controller.SearchBusinessPartnerData.prototype).onExit.call(this);
},

getBusinessDocumentType: function () {
return this.getView().getViewData().oData.businessDocumentType;
},

getBusinessDocumentId: function () {
return this.getView().getViewData().oData.businessDocumentId;
},

getWorkareaViewTexts: function () {
return {
„title“: „IS-U Business Partner“,
„tooltip“: „IS-U Business Partner“
};
},

// /scc/ is the external service proxy of the customer engagement center
// we may use our destinations via /scc/destinationname/
onSubmit: function () {
var oDataSrvURL = „./scc/utilities_odata/Accounts(‚“ + this.getView().getModel().getProperty(„/AccountID“) + „‚)?$format=json“;

// Get the data for the entered bp id
$.ajax(oDataSrvURL, {
success: $.proxy(function (data, textStatus, req) {
this.getView().getModel().setData(data.d);

}, this),
error: $.proxy(function () {
this.logMessage(„OData request failed“, „The OData request failed. Check what you have done ;)“)
}, this),
});
},

logMessage: function (sErrorMessage, sErrorMessageLong) {

this.raiseErrorMessage({
„messageShort“: sErrorMessage,
„messageLong“: sErrorMessageLong,
„isGlobalMessage“: false
});
this.updateMessageArea();
},

});
});

[/cc]

Mit der nun hinzugefügten Logik sollten die Daten für die eingegebene Geschäftspartner-ID nach einem Klick auf Senden geladen und angezeigt werden. Wenn die Anfrage einen Fehler zurückgibt, sollten wir eine Nachricht im Nachrichtenbereich erhalten.

Customer Engagement Center Erweiterung UI

Nun, da wir wissen, dass die View wie beabsichtigt funktioniert, sollten wir darüber nachdenken, sie zu deployen.

Deployment auf der SAP Cloud-Plattform Cloud Foundry-Umgebung

Nach Abschluss der Entwicklung ist es sinnvoll, von einer lokalen Umgebung auf z.B. die Cloud-Plattform umzusteigen.

Um von deiner lokalen Entwicklung auf eine Bereitstellung auf deinem Cloud-Plattform-Konto zu wechseln, benötigst du jetzt den mta_archive_builder. Verwendet die neueste verfügbare Version, die derzeit 1.1.7. ist.

Ich habe die .jar-Datei in den gleichen Ordner wie meinen Code gelegt, deshalb kann ich in Visual Studio Code einfach mit der rechten Maustaste auf meinen Ordner Custom Workarea View Guide klicken und Open in Terminal auswählen. Im Terminal benutzen wir dann den Befehl:

[cc lang=“js“ escaped=“true“ line_numbers=“true“ first_line=“1″ lines=“40″ highlight=““ noborder=“true“ nowrap=“true“]

java -jar mta_archive_builder-1.1.7.jar –build-target CF build

[/cc]

Eine .mtar-Datei sollte nun erstellt werden. In meinem Fall ist der Name dieser Datei Custom Workarea View Guide.mtar, da ich keinen anderen Namen angegeben habe. Mit installiertem Cloud Foundry CLI, kann ich mich mit dem folgenden Befehl im Terminal anmelden:

[cc lang=“js“ escaped=“true“ line_numbers=“true“ first_line=“1″ lines=“40″ highlight=““ noborder=“true“ nowrap=“true“]

cf login

[/cc]

Du musst deinen API-Endpunkt sowie deine E-Mail-Adresse und dein Passwort eingeben. Nach der Authentifizierung wählst du die Organisation, in die du die Datei hochladen möchtest, und den entsprechenden Space aus.

Jetzt kannst du den folgenden Befehl verwenden, um deine Datei zu deployen:

[cc lang=“js“ escaped=“true“ line_numbers=“true“ first_line=“1″ lines=“40″ highlight=““ noborder=“true“ nowrap=“true“]

cf deploy „Custom Workarea View Guide.mtar“

[/cc]

Sobald die Anwendung gestartet und in deiner Cloud-Plattform Cloud Foundry Umgebung verfügbar ist, solltest du sie im ausgewählten Space sehen können:

SAP Cloud Platform Cockpit

Nun solltest du eine weitere Destination erstellen, die auf die URL deiner Anwendung verweist. Die URL findest du unter Application Route, nachdem du auf die Anwendung geklickt hast. Das ist nicht zwangsläufig notwendig, könnte aber die zukünftige Behandlung von Themen wie Authentifizierung erleichtern.

Cloud Platform Destination

Kommen wir nun zum letzten Schritt für diesen Blog.

Aktualisieren der Konfiguration des Customer Engagement Center

Im Moment bezieht das Customer Engagement Center unsere View noch von unserem lokalen Server. Die Informationen über die Basis-URL werden im Modul gespeichert. Wir müssen unser Modul entsprechend anpassen.

Dafür öffnen wir Postman wieder. Nun müssen wir das zuvor erstellte Modul aktualisieren. Also verwenden wir nicht mehr POST, sondern PUT. In meinem Fall war die ID meines Moduls Z_MODULE_ISU_BUSINESS_PARTNER. Die URL ist entsprechend: https://sap-cec-ec-prod-engagement-context-odata.cfapps.eu10.hana.ondemand.com/customizingengagementcontext.xsodata/Module(‚Z_MODULE_ISU_BUSINESS_PARTNER‘).

Das Modul sollte nun die Daten von der gerade erstellten Destination erhalten. Dazu ändern wir die baseUrl in den externen Serviceproxy des Customer Engagement Centers, gefolgt von unserer Destination.

Dies könnte beispielsweise wie folgt aussehen:

[cc lang=“js“ escaped=“true“ line_numbers=“true“ first_line=“1″ lines=“40″ highlight=““ noborder=“true“ nowrap=“true“]

{
„id“: „Z_MODULE_ISU_BUSINESS_PARTNER“,
„isActive“: 1,
„description“: „Module for a basic example of the integration of a custom Workarea View“,
„baseUrl“: „./scc/isu_business_partner_ui/“,
„path“: „com.cec_customer.isu_business_partner.ui“,
„isDefault“: 0,
„namespace“: „CUST“,
„release“: „0.0.1“
}

[/cc]

Nächste Schritte

Gratulation!

Deine Programm ist nun in der Cloud Platform Cloud Foundry hochgeladen und wird dort konsumiert. Du hast dieses kurze Beispiel abgeschlossen. Wenn Du mehr über dieses Thema erfahren möchtest oder Ideen für andere Beispiele hast, kontaktiere mich bitte.

Nächste Schritte

An dieser Stelle haben wir nun die minimale Integration gezeigt. Wir haben noch nicht viele Daten zwischen dem Customer Engagement Center und unserem View ausgetauscht. Die nächsten Schritte wären z.B:

  • Internationalisierung
  • Erhöhung der Sicherheit durch Authentifizierung oder Autorisierung
  • Nutzung von Daten aus dem Customer Engagement Center, z.B. des identifizierten Kunden, zur Vorbelegung von Werten.
  • Speichern der Aktivität in einem Interaktionsprotokoll
  • Navigation zwischen z.B. einer Work Area View für eine Suche und für die Anzeige

Mehr Informationen

Du findest hier weitere Informationen über das Customer Engagement Center:

Weitere Beiträge werden auch in unserer Themenseite veröffentlicht.

Wenn Du Fragen, Anregungen oder Probleme hast, melde Dich bitte bei uns.

Beste Grüße,

Tobias

Hinterlasse einen Kommentar