Oracle Content Management-Integration

In diesem letzten Schritt können Sie die Digital Customer Service-Anwendung um die Zusammenarbeit mit OCM-Dokumenten erweitern. Dies erfordert:

REST-API-Service für OCM-Dokumente erstellen
Registerkarte "Dokumente" zur Seite "Details zu Serviceanforderung" hinzufügen
OCM-Ordner-ID-Variable zur Webserviceantwort "Serviceanfrage abrufen" in Visual Builder hinzufügen
Aktionskette "Serviceanfrage laden" aktualisieren
Seite "Serviceanfragedetails" aktualisieren, um die eingebettete OCM-UI in einer neuen Registerkarte "Dokumente" anzuzeigen

Um die JSON-Datei für die OCM-REST-API-Webservices zu erstellen, geben Sie die folgende URL in Ihrem Browser ein: https://docs.oracle.com/en/cloud/paas/content-cloud/REST-API-documents/swagger.JSON

Beschreibung der Abbildung ocmrestapi.png

Klicken Sie mit der rechten Maustaste auf die Browserseite, und wählen Sie die Option Speichern, um den Inhalt in der Datei ocmRestApi.json zu speichern.
So erstellen Sie den OCM-Service:

Beschreibung der Abbildung create-ser-conn.png
1. Wählen Sie im linken Navigationsmenü die Optionen Services und dann Serviceverbindungen aus.
2. Wählen Sie auf der Seite "Serviceverbindungen" oben rechts im Abschnitt Services das Symbol Erstellen aus.
  Wählen Sie im Dropdown-Menü die Option Serviceverbindung.
3. Wählen Sie unter Quelle die Option Nach Spezifikation definiert aus.
4. Gehen Sie auf der Seite "Serviceverbindung erstellen" wie folgt vor:
  1. Geben Sie im Feld Servicename den Namen des Service als ocmRestApi an.
  2. Wählen Sie im Dropdown-Menü API-Typ die Option OpenAPI/Swagger aus.
  3. Wählen Sie im Abschnitt "Servicespezifikation" die Option Dokument aus.
  4. Wählen oder ziehen Sie die oben erstellte Datei ocmRestApi.json in den Drag-and-Drop-Bereich des Abschnitts "Servicespezifikationen".
  5. Klicken Sie auf Erstellen, um die Verbindung zu speichern.
So aktualisieren Sie die OCM-Serververbindung:

Beschreibung der Abbildung edit-server3prof.png
1. Wählen Sie auf der Seite ocmRestApi die Option Server aus.
2. Wählen Sie auf der Seite "Server" das Symbol Bearbeiten ganz rechts neben der Verbindung Keine Beschreibung.
3. Führen Sie im Dialogfeld "Server bearbeiten" die folgenden Schritte aus:
  1. Geben Sie im Feld Instanz-URL die URL des OCM-Servers an, der in dieser Integration verwendet wird. Beispiel: https://oceserver.cec.ocp.oraclecloud.com.
  2. Wählen Sie im Dropdown-Menü Authentifizierung die Option OAuth 2.0 Zugangsdaten für Ressourceneigentümerkennwort aus.
  3. Klicken Sie rechts neben dem Feld Benutzername auf das Symbol Bearbeiten.
    Geben Sie im Dialogfeld "Benutzerzugangsdaten" den Benutzernamen und das Kennwort des OCM-Integrationsadministrators ein. Dabei muss es sich um denselben Integrationsbenutzer handeln, der bei der Erstellung der Integration der Fusion-Serviceanfrageanwendung verwendet wurde. Beispiel: IntegrationAdmin.
  4. Klicken Sie auf die Schaltfläche Save, um die Benutzerzugangsdaten für den Benutzernamen zu speichern.
  5. Klicken Sie rechts neben dem Feld Client-ID auf das Symbol Bearbeiten.
  6. Geben Sie die Werte für Client-ID und Client Secret, die beim Erstellen der vertraulichen OCM IDCS-Anwendung zurückgegeben wurden, in die Felder Client-ID und Client Secret ein. Beispiel: Client-ID: c585b2d3e97c40e491ca99112281e36d und Client Secret: 768b9513-658e-4854-bac7-2fe72d19011f.
  7. Klicken Sie auf die Schaltfläche Speichern, um die Benutzerzugangsdaten für die Client-ID zu speichern.
  8. Geben Sie den Wert für die Geltungsbereich-URL ein, der beim Erstellen der vertraulichen OCM IDCS-Anwendung zurückgegeben wurde. Beispiel: https://BD2F184D9D2344CB8134FCD4CBFF7DFD.cec.ocp.oraclecloud.com:443/urn:opc:cec:all
  9. Geben Sie im Feld Token-URL den Wert ein. Dieser Wert kann generiert werden, indem /oauth2/v1/token an die Basis-URL des OCM IDCS-Servers angehängt wird. Beispiel: https://idcs.identity.oraclecloud.com.
  10. Wählen Sie im Abschnitt "Verbindungstyp" im Dropdown-Menü den Proxy "Immer verwenden", unabhängig von der CORS-Unterstützung.
  11. Klicken Sie auf der Hauptseite auf Speichern, um die Serveränderungen zu speichern.
So richten Sie die spezifischen AppLink-Endpunktparameter ein:

Beschreibung des Abbildung applink-endpoints.png
1. Wählen Sie auf der Seite ocmRestApi die Option Endpunkte aus.
2. Wählen Sie im Abschnitt AppLinks die Option Ordner-Applink erstellen aus.
3. Klicken Sie auf die Schaltfläche Anfordern.
4. Klicken Sie auf die Schaltfläche Dynamischen Abfrageparameter hinzufügen. Geben Sie im Abschnitt "Dynamische Abfrageparameter" im Feld Name den Wert assignedUser ein.
5. Klicken Sie auf die Schaltfläche Parameter für statische Abfrage. Geben Sie im Abschnitt "Statische Abfrageparameter" im Feld Name den Wert role ein.
  Geben Sie im Feld Wert den Wert als Beitragender ein. Klicken Sie zum Speichern des statischen Abfrageparameters auf OK.
So fügen Sie der Seite "Serviceanfragedetails" die Registerkarte "Dokumente" hinzu:

Beschreibung der Abbildung work-orders.png
1. Wählen Sie im linken Navigationsmenü die Option Webanwendungen.
2. Wählen Sie in der Liste "Web-Apps" dcs, service-request-detail und dann service-request-detail-start.
3. Wählen Sie auf der Seite "service-request-detail-start" die Registerkarte "Page Designer". Klicken Sie oben rechts auf die Schaltfläche Design.
4. Wählen Sie auf der Seite "Page Designer" die Option Fertigungsaufträge.
5. Wählen Sie das übergeordnete Element <li> im Abschnitt Komponenten links neben der Designseite mit Bind Text [[$app…serviceRequestDetail_workOrders]] aus.
6. Klicken Sie mit der rechten Maustaste auf das Element <li>, und wählen Sie Kopieren aus.
7. Klicken Sie erneut mit der rechten Maustaste auf das Element <li>, und wählen Sie Einfügen/Nach aus.
8. Wählen Sie im neu erstellten <li>-Element das Bind Text-Element aus.
  
  Beschreibung der Abbildung übersetzbar-string.png
9. Wählen Sie im Bereich "Eigenschaften" auf der rechten Seite das Symbol Zeichenfolge übersetzbar machen ( sieht wie eine Welt aus). Geben Sie im Dialogfeld "Übersetzbare Zeichenfolge" den Wert Dokumente in das Feld Zeichenfolge ein.
  Geben Sie im Feld Schlüssel serviceRequestDetail_documents ein, und klicken Sie auf Speichern.
So ändern Sie den Seitencode für Serviceanfragedetails:

Beschreibung der Abbildung oj-bind.png
1. Wählen Sie oben rechts auf der Seite "Page Designer" die Schaltfläche Code.
2. Um den Code zu formatieren, klicken Sie mit der rechten Maustaste auf den Code, und wählen Sie Dokument formatieren aus.
3. Suchen Sie im Code nach serviceRequestDetail_documents.
4. Ersetzen Sie das übergeordnete <li>-Element id durch odcs-documents-tab.
5. Fügen Sie unten auf der Seite direkt nach dem zweiten letzten </oj-bind-if>-Element den folgenden Code hinzu:
  <div id="OCMEmbeddedUI" style="display:none"> </div>
6. Um das Dokument noch einmal zu formatieren, klicken Sie mit der rechten Maustaste auf den Code, und wählen Sie Dokument formatieren aus.
So fügen Sie ein Ereignis zur Seite "Details zu Serviceanforderung" hinzu:

Beschreibung des Diagramms der Abbildung - callfunc.png
1. Klicken Sie oben rechts auf der Seite "Page Designer" auf die Schaltfläche Entwerfen.
2. Wählen Sie auf der Designer-Seite die Registerkartenleiste mit der neu hinzugefügten Registerkarte "Dokumente".
3. Wählen Sie die Registerkarte "Ereignisse" oben rechts im Abschnitt "Eigenschaften". Klicken Sie auf die Schaltfläche Neues Ereignis, und wählen Sie im Dropdown-Menü die Option Bei Auswahl aus.
4. Ziehen Sie in der soeben erstellten Datei TabBarSelectionChangeChain eine JS-Aufruffunktion per Drag-and-Drop aus dem Abschnitt "Aktionen" links auf der Seite auf das Symbol "+" in der Kette.
5. Klicken Sie auf den Link Erstellen neben dem Funktionsnamen im Abschnitt "Eigenschaften" rechts auf der Seite.
  Geben Sie im Feld Funktionsname den Wert displayEmbeddedUI ein. Klicken Sie auf Erstellen.
  Klicken Sie auf den Link Gehe zu Modulfunktion. Ersetzen Sie die gesamte displayEmbeddedUI-Funktion (einschließlich der Kommentare) durch den folgenden Code:
```
/** * Shows or hides the OCM Embedded UI element on the page 
    *
    * @param {boolean} display Show OCM Embedded UI 
    * @return {undefined} */
PageModule.prototype.displayEmbeddedUI = function(display) {
  var embedElement = document.getElementById("OCMEmbeddedUI");
  if (display) {
    embedElement.style.display = "block";
  } else {
    embedElement.style.display = "none";
  }
};
```
  Beschreibung der Abbildung javascript-code.png
6. Um das Dokument zu formatieren, klicken Sie mit der rechten Maustaste auf den Code, und wählen Sie Dokument formatieren aus.
So weisen Sie die Auswahlvariable der Funktion displayEmbeddedUI zu:

Beschreibung der Abbildung Assign-para.png
1. Wählen Sie im oberen Teil der Seite die Registerkarte "Seiten-Designer".
2. Wählen Sie die Registerkartenleiste aus, und klicken Sie auf den Link TabBarSelectionChangeChain in den Eigenschaften für Ereignisse rechts auf der Seite.
3. Wählen Sie auf der Seite "Diagramm" die Aufruffunktion displayEmbeddedUI.
4. Klicken Sie rechts neben den Eingabeparametern unter "Eigenschaften" rechts auf der Seite auf den Link Zuweisen.
5. Klicken Sie im Dialogfeld "Eingabezuweisungsparameter" links auf der Seite auf Quellen, Aktionskette, Variablen. Ziehen Sie im Menü Variablen die Option Auswahl in Anzeige innerhalb von Parametern (unter Ziel) auf der rechten Seite der Seite.
  Fügen Sie im Abschnitt "Anzeigecode" unten auf der Seite den folgenden Code hinzu:
```
$variables.selection === 'odcs-documents-tab'
```
  Klicken Sie auf die Schaltfläche Speichern.
So fügen Sie das Feld "OCM-Ordner-ID" zu den Webservices "Serviceanfrage abrufen" hinzu:

Beschreibung der Abbildung get-ser-req.png
1. Wählen Sie im oberen Teil der Seite die Registerkarte "Ereignis-Listener".
2. Wählen Sie im Abschnitt "Lebenszyklusereignis-Listener" vbEnter den Link Gehe zu Aktionskette direkt rechts neben LoadServiceRequestAction aus.
3. Wählen Sie den Schritt REST aufrufen für crmRestApi/get_serviceRequests aus.
4. Klicken Sie im Abschnitt "Endpoints" des Attributs rechts auf der Seite auf den Link crmRestApi/get_serviceRequest.
  
  Beschreibung der Abbildung get-ser-req-source.png
5. Wählen Sie auf der Seite crmRestApi die Registerkarte "Endpunkte", und klicken Sie dann auf die Schaltfläche Antwort.
6. Wählen Sie unten auf der Seite den Link Datentypdefinition aus.
7. Suchen Sie nach dem folgenden Abschnitt: oracle_apps_crm_service_svcMgmt_srMgmt_srMgmtService_view_ServiceRequestVO-updatableFields
  
  Hinweis:
  Es gibt mehrere Verweise auf diese Variable, der Abschnitt, in dem sie definiert wird.
8. Fügen Sie den folgenden Code in den Unterabschnitt "Eigenschaften" innerhalb des oben genannten Abschnitts ein:
```
"OCMFolderId_c": {
  "type": "string",
  "title": "OCMFolderId",
  "maxLength": 80,
  "x-queryable": false,
  "nullable": true,
  "x-hints": {
    "AttributeType": "Text",
    "protectionKey": "ServiceRequestEO.OCMFolderId_c",
    "protectionObjectTitle": "Service Request",
    "protectionState": "TOKENIZED"
  }
},
```
9. Um das Dokument zu formatieren, klicken Sie mit der rechten Maustaste auf den Code, und wählen Sie Dokument formatieren aus.
So fügen Sie das Feld für die OCM-Ordner-ID der Antwort auf die Serviceanfrage hinzu:

Beschreibung der Abbildung get-ser-req-response.png
1. Wählen Sie auf der Seite "service-request-detail-start" die Registerkarte "Typen".
2. Bewegen Sie den Mauszeiger über { } getServiceRequestsResponse, und wählen Sie den Link Aus Endpunkt bearbeiten direkt rechts aus.
3. Prüfen Sie die neu erstellte Variable OCMFolderId_c in der Liste Endpunktstruktur.
4. Klicken Sie auf die Schaltfläche Fertigstellen.
So fügen Sie das Feld für die OCM-Ordner-ID der Aktion "Serviceanfrage abrufen" hinzu:

Beschreibung der Abbildung get-ser-req-action.png
1. Wählen Sie auf der Seite "service-request-detail-start" die Registerkarte "Ereignis-Listener" und dann vbEnter im oberen Teil der Seite aus.
2. Wählen Sie im Abschnitt "Lebenszyklusereignis-Listener vbEnter" den Link Gehe zu Aktionskette rechts neben LoadServiceRequestAction aus.
3. Wählen Sie den Schritt REST aufrufen für crmRestApi/get_serviceRequests aus.
4. Wählen Sie im Abschnitt "Eingabeparameter" der Eigenschaften auf der rechten Seite den Link fields.
  
  Beschreibung der Abbildung "zuweisungsinput-para.png"
5. Wählen Sie im Dialogfeld "Eingabeparameter zuweisen" Ziel, Parameter, uriParams, Felder auf der rechten Seite des Dialogfeldes aus.
  Fügen Sie in der uriParams.fields unten ",OCMFolderId_c" ohne Anführungszeichen direkt nach SeverityCd hinzu. Klicken Sie auf die Schaltfläche Speichern.
So fügen Sie den Schritt "OCM erstellen AppLink" der Aktionskette LoadServiceRequestAction hinzu:

Beschreibung der Abbildung loadservicerequestaction.png
1. Ziehen Sie auf der Seite "Diagramm" einen neuen Schritt REST aufrufen aus den Aktionen links auf der Seite, und legen Sie ihn unten auf der Seite in die gepunktete Linie unter dem Schritt Variablen zuweisen für originalServiceRequestRecord ab.
  
  Hinweis:
  Der Ablauf wird für einige weitere Schritte nicht richtig aussehen.
  
  Beschreibung der Abbildung select-endpoint.png
2. Klicken Sie in den Eigenschaften rechts auf der Seite auf den Link Auswählen direkt rechts neben Endpunkt.
3. Wählen Sie im Dialogfeld "Endpunkt auswählen" Services, ocmRestApi, Applinks, POST /[..]/folder/{folderId}.
  Klicken Sie auf die Schaltfläche Wählen.
So weisen Sie dem Schritt AppLink Eingabevariablen zu:

Beschreibung der Abbildung applink.png
1. Wählen Sie im Bereich "Eigenschaften" im Abschnitt Eingabeparameter den Link folderId aus.
  
  Beschreibung der Abbildung username.png
2. Ziehen Sie OCMFolderId_c von Quellen, Aktionskette, Ergebnisse, loadServiceRequets und Hauptteil links auf der Seite, und legen Sie das Element rechts auf der Seite in folderId (unter Ziel, Parameter und uriParams) ab.
3. Ziehen Sie userName von Quellen, Anwendung, System und Benutzer links auf der Seite, und legen Sie sie unter Ziel, Parameter, uriParams auf assignedUser ab.
4. Klicken Sie auf die Schaltfläche Speichern.
So aktualisieren Sie das Ergebnis für die Schrittfehlerbenachrichtigung AppLink:

Beschreibung der Abbildung Schritt failure.png
1. Klicken Sie mit der rechten Maustaste auf den Schritt Fire Notification direkt unter dem Schritt REST aufrufen für ocmRestApi/postDocumentsApi1_2ApplinksFolderFolderId, und wählen Sie im Dropdown-Menü die Option Gehe zu Code aus.
  
  Beschreibung der Abbildung diag-code.png
2. Fügen Sie den folgenden Code direkt unter dem Parameterabschnitt von fireNotification hinzu:
```
,
"outcomes": { 
  "success": "showDefaultCursor"
}
```
3. Um das Dokument zu formatieren, klicken Sie mit der rechten Maustaste auf den Code, und wählen Sie Dokument formatieren aus.
So fügen Sie den Schritt "Eingebettete OCM-UI erstellen" der Aktionskette LoadServiceRequestAction hinzu:

Beschreibung der Abbildung create-embui.png
1. Klicken Sie oben rechts auf der Seite auf die Schaltfläche Entwerfen, um zur Aktionskette LoadServiceRequestAction zurückzukehren.
2. Direkt unterhalb des Schritts REST aufrufen für ocmRestApi/postDocumentsApi1_2ApplinksFolderFolderId per Drag-and-Drop einen neuen Schritt für Aufruffunktion von den Aktionen auf der linken Seite auf die gepunktete Linie verschieben.
  
  Hinweis:
  An dieser Stelle sollte der Ablauf viel sauberer aussehen, und die neue Aufruffunktion muss den Erfolg des Schritts Aufruf-REST in ocmRestApi/ postDocumentsApi1_2ApplinksFolderFolderId aufweisen.
3. Wählen Sie den Link Erstellen direkt rechts neben dem Feld Funktionsname in den Eigenschaften auf der rechten Seite.
  Geben Sie im Feld Funktionsname den Wert createOCMEmbeddedUI ein.
4. Klicken Sie auf die Schaltfläche Erstellen.

So fügen Sie den Code hinzu, der zum Erstellen des eingebetteten OCM-Links erforderlich ist:

Beschreibung von embed-link.png folgt
Beschreibung der Abbildung embed-link.png

Klicken Sie auf den Link Gehe zu Modulfunktion in den Eigenschaften auf der rechten Seite.

Beschreibung der Abbildung js-code.png

Ersetzen Sie die gesamte createOCMEmbeddedUI-Funktion (einschließlich der Kommentare) durch den folgenden Code:

/**
 * Creates an OCM Embedded UI on the page
 * 
 * @param {object} appLink The App Link struture needed for the OCM Embedded UI
 * @return {undefined}
 */
PageModule.prototype.createOCMEmbeddedUI = function (appLink) {
  // Get just the server info from the full App Link URL and assign it
  const ocmUrl = new URL(appLink.appLinkUrl);
 const ocmServerUrl = ocmUrl.protocol + "//" + ocmUrl.host;
  OracleCEUI.oceUrl = ocmServerUrl;

  // Define the options we want for the OCM Embedded UI including the needed App Link variables
  var options = {
    documentsView: {
      id: appLink.id,
      layout: "grid",
      appLink: {
        appLinkID: appLink.appLinkID,
        accessToken: appLink.accessToken,
        refreshToken: appLink.refreshToken
      },
      header: {
        create: {
          folder: true
        },
        upload: true
      },
      actions: {
        open: {
          file: true
        },
        uploadNewVersion: true,
        download: true,
        delete: true,
        Sidebar: {
          Conversation: true
        }
      }
    }
  };

  // Create the OCM Embedded UI documentsView frame element
  var iFrameElement = OracleCEUI.documentsView.createFrame(options);

  // Add the OCM Documents View iFrame to the specified div and add additional styles to the frame so that it looks nice
  var embedElement = $("#OCMEmbeddedUI")[0];
  embedElement.appendChild(iFrameElement);
  $("#OCMEmbeddedUI").children().addClass("oj-flex-item oj-sm-12 oj-md-12").css({ "height": "600px", "border-style": "solid", "border-color": "#e5e6e6", "border-width": "1px" });
};

So nehmen Sie die OCM-UI-Bibliothek in den Code für die zu verwendende Funktion createOCMEmbeddedUI auf:

Beschreibung der Abbildung ui-library.png
1. Gehen Sie zur ersten Zeile des Codes. Fügen Sie den folgenden Code vor ojs/ojfilepicker hinzu:
```
'//static.ocecdn.oraclecloud.com/cdn/cec/api/oracle-ce-ui-2.12.js',
```
  Hinweis:
  Abhängigkeitswarnung ignorieren.
2. Fügen Sie die Variable, die mit der Bibliothek OracleCEUI verknüpft ist, in function() in derselben Zeile hinzu.
3. Um das Dokument zu formatieren, klicken Sie mit der rechten Maustaste auf den Code, und wählen Sie Dokument formatieren aus.
So weisen Sie die Auswahlvariable der Funktion displayEmbeddedUI zu:

Beschreibung der Illustrationsauswahl - vari.png
1. Wählen Sie im oberen Teil der Seite die Registerkarte "Aktionen".
2. Wählen Sie LoadServiceRequestAction erneut im Dropdown-Menü rechts neben dem Link Aktionsketten oben links auf der Seite aus, wenn er noch nicht ausgewählt ist.
3. Wählen Sie den Schritt Aufruffunktion für die gerade erstellte createOCMEmbeddedUI aus.
4. Wählen Sie den Link Zuweisen rechts neben den Eingabeparametern unter "Eigenschaften".
  
  Beschreibung des Darstellungstextes - para.png
5. Ziehen Sie im Dialogfeld "Eingabeparameter zuweisen" den Text aus Quelle, Aktionskette, Ergebnisse und callRestPostDocumentsApi12ApplinksFolderFolderId links auf der Seite in appLink (unter Ziel, Parameter) auf der rechten Seite.
  Klicken Sie auf Speichern.
So prüfen Sie, ob alle Änderungen wie erwartet funktionieren:

Beschreibung der Abbildung verify.png
1. Wählen Sie im oberen Teil der Seite die Registerkarte "Seiten-Designer".
2. Klicken Sie oben rechts auf der Seite auf die Schaltfläche Live.
3. Wählen Sie die Registerkarte "Documents (Dokumente)" (wählen Sie eine andere Registerkarte aus, und wählen Sie die Registerkarte "Documents (Dokumente) erneut aus, wenn diese bereits ausgewählt wurde).
4. Auf der Seite sollte der zugehörige OCM-Ordner für die aktuelle SA angezeigt werden.
  
  Hinweis:
  Wenn die eingebettete OCM-UI nicht wie erwartet geladen wird, beheben Sie sie, bevor Sie fortfahren. Überprüfen Sie die Browserkonsole und den Netzwerkverkehr auf Fehler. Prüfen Sie außerdem unten im Seiten-Designer, ob Fehler auf der Seite vorhanden sind. Falls ja, klicken Sie darauf, um weitere Details zu erhalten.