Intégration Oracle Content Management

Dans cette dernière étape, vous pourrez étendre l'application Digital Customer Service avec la collaboration sur les documents OCM. Pour cela :

Création d'un service d'API REST de document OCM
Ajouter un onglet Documents à la page Détails de la demande d'assistance
Ajout d'une variable d'ID de dossier OCM dans la réponse du service Web Obtenir une demande de service de Visual Builder
Mettre à jour la chaîne d'action Charger une demande de service
Mise à jour de la page Détails de la demande de service pour afficher l'interface utilisateur intégrée OCM dans un nouvel onglet Documents

Pour créer le fichier JSON des services Web de l'API REST OCM, entrez l'URL suivante dans votre navigateur : https://docs.oracle.com/en/cloud/paas/content-cloud/rest-api-documents/swagger.json

Description de l'illustration ocmrestapi.png

Cliquez avec le bouton droit de la souris sur la page du navigateur, sélectionnez l'option Save pour enregistrer le contenu dans le fichier ocmRestApi.json.
Pour créer le service OCM, procédez comme suit :

Description de l'illustration create-ser-conn.png
1. Sélectionnez Services, puis Connexions de service dans le menu de navigation de gauche.
2. Sur la page Connexions de service, sélectionnez l'icône Créer en haut à droite de la section Services.
  Sélectionnez l'option Connexion au service dans le menu déroulant.
3. Sélectionnez Défini par spécification dans les options Source.
4. Dans la page Create Service Connection, procédez comme suit :
  1. Dans le champ Nom du service, indiquez le nom du service en tant que ocmRestApi.
  2. Dans le menu déroulant Type d'API, sélectionnez OpenAPI/Swagger.
  3. Dans la section Spécification de service, sélectionnez l'option Document.
  4. Sélectionnez ou faites glisser le fichier ocmRestApi.json créé ci-dessus dans la zone de glisser-déplacer de la section Spécifications de service.
  5. Cliquez sur le bouton Créer pour enregistrer la connexion.
Pour mettre à jour la connexion au serveur OCM :

Description de l'illustration edit-server3prof.png
1. Dans la page ocmRestApi, sélectionnez Servers.
2. Sur la page Serveurs, sélectionnez l'icône Modifier à l'extrémité droite de la connexion Aucune description.
3. Dans la boîte de dialogue Modifier le serveur, procédez comme suit :
  1. Dans le champ URL d'instance, indiquez l'URL du serveur OCM qui sera utilisée dans cette intégration. Par exemple, https://oceserver.cec.ocp.oraclecloud.com.
  2. Dans le menu déroulant Authentification, sélectionnez l'option OAuth 2.0 Resource Owner Password Credentials.
  3. Cliquez sur l'icône Modifier à droite du champ Nom utilisateur.
    Dans la boîte de dialogue Informations d'identification utilisateur, entrez le nom utilisateur et le mot de passe de l'administrateur d'intégration OCM. Il doit s'agir du même utilisateur d'intégration que celui utilisé lors de la création de l'intégration de l'application de demande de service Fusion. Par exemple, IntegrationAdmin.
  4. Cliquez sur le bouton Save (Enregistrer) pour enregistrer les informations d'identification et de connexion du nom utilisateur.
  5. Cliquez sur l'icône Modifier à droite du champ ID client.
  6. Entrez les valeurs d'ID client et de clé secrète client qui ont été renvoyées lors de la création de l'application confidentielle OCM IDCS dans les champs ID client et clé secrète client. Par exemple, ID client : c585b2d3e97c40e491ca99112281e36d et Clé secrète du client : 768b9513-658e-4854-bac7-2fe72d19011f.
  7. Cliquez sur le bouton Save pour enregistrer les informations d'identification utilisateur de l'ID client.
  8. Entrez la valeur d'URL de portée renvoyée lors de la création de l'application confidentielle OCM IDCS. Par exemple, https://BD2F184D9D2344CB8134FCD4CBFF7DFD.cec.ocp.oraclecloud.com:443/urn:opc:cec:all
  9. Dans le champ URL du jeton, entrez la valeur. Cette valeur peut être générée en ajoutant /oauth2/v1/token à l'URL de base du serveur OCM IDCS. Par exemple, https://idcs.identity.oraclecloud.com.
  10. Dans la section Connection Type, sélectionnez Always use proxy, quelle que soit la prise en charge CORS dans le menu déroulant.
  11. Cliquez sur le bouton Save (Enregistrer) de la page principale pour enregistrer les modifications apportées au serveur.
Pour configurer les paramètres d'adresse AppLink spécifiques, procédez comme suit :

Description de l'illustration applink-endpoints.png
1. Sur la page ocmRestApi, sélectionnez Adresses.
2. Dans la section AppLinks, sélectionnez Créer un lien d'application de dossier.
3. Cliquez sur le bouton Demander.
4. Cliquez sur le bouton Ajouter un paramètre de requête dynamique. Dans le champ Nom de la section Paramètres de requête dynamique, entrez la valeur assignedUser.
5. Cliquez sur le bouton Paramètre de requête statique. Dans le champ Nom de la section Paramètres de requête statique, entrez la valeur role.
  Dans le champ Valeur, entrez la valeur en tant que contributeur. Cliquez sur OK pour enregistrer le paramètre de requête statique.
Pour ajouter l'onglet Documents à la page Détails de la demande de service :

Description de l'illustration work-orders.png
1. Sélectionnez Applications Web dans le menu de navigation de gauche.
2. Dans la liste Applications Web, sélectionnez dcs, service-request-detail, puis service-request-detail-start.
3. Dans la page service-request-detail-start, sélectionnez l'onglet Page Designer. Cliquez sur le bouton Conception en haut à droite.
4. Sur la page Concepteur de pages, sélectionnez Ordres de travail.
5. Sélectionnez le parent <li> dans la section Composants à gauche de la page de conception contenant Bind Text [[$app…serviceRequestDetail_workOrders]].
6. Cliquez avec le bouton droit de la souris sur l'élément <li> et sélectionnez Copier.
7. Cliquez à nouveau sur l'élément <li> et sélectionnez Coller/Après.
8. Dans le nouvel élément <li> qui vient d'être créé, sélectionnez l'élément Bind Text.
  
  Description de l'illustration translatable-string.png
9. Dans le panneau des propriétés situé à droite, sélectionnez l'icône Rendre la chaîne traduisible (comme un monde). Dans la boîte de dialogue Chaîne traduisible, entrez la valeur Documents dans le champ Chaîne.
  Dans le champ Clé, entrez serviceRequestDetail_documents, puis cliquez sur Enregistrer.
Pour modifier le code de la page Détails de la demande d'assistance :

Description de l'illustration oj-bind.png
1. Sélectionnez le bouton Code dans la partie supérieure droite de la page Concepteur de pages.
2. Pour formater le code, cliquez avec le bouton droit de la souris sur le code, puis sélectionnez Formater le document.
3. Recherchez serviceRequestDetail_documents dans le code.
4. Remplacez l'élément parent <li> id par odcs-documents-tab.
5. Au bas de la page, juste après le deuxième dernier élément </oj-bind-if>, ajoutez le code suivant :
  <div id="OCMEmbeddedUI" style="display:none"> </div>
6. Pour formater le document une nouvelle fois, cliquez avec le bouton droit de la souris sur le code et sélectionnez Formater le document.
Pour ajouter un événement à la page Détails de la demande d'assistance :

Description du diagramme de l'illustration-callfunc.png
1. Cliquez sur le bouton Conception dans la partie supérieure droite de la page Concepteur de pages.
2. Dans la page du concepteur, sélectionnez la barre d'onglets avec l'onglet Documents nouvellement ajouté.
3. Sélectionnez l'onglet Events (Evénements) dans l'angle supérieur droit de la section Properties (Propriétés). Cliquez sur le bouton Nouvel événement, puis sélectionnez Lors de la sélection dans le menu déroulant.
4. Dans TabBarSelectionChangeChain (qui vient d'être créé), glissez-déplacez une fonction d'appel JS de la section Actions sur la gauche de la page vers l'icône + de la chaîne.
5. Cliquez sur le lien Créer en regard du nom de fonction dans la section Propriétés à droite de la page.
  Dans le champ Nom de fonction, saisissez la valeur displayEmbeddedUI. Cliquez sur Créer.
  Cliquez sur le lien Accéder à la fonction du module. Remplacez l'intégralité de la fonction displayEmbeddedUI (comprenant les commentaires) par le code suivant :
```
/** * 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";
  }
};
```
  Description de l'illustration javascript-code.png
6. Pour formater le document, cliquez avec le bouton droit de la souris sur le code, puis sélectionnez Formater le document.
Pour affecter la variable de sélection à la fonction displayEmbeddedUI, procédez comme suit :

Description de l'illustration assign-para.png
1. Sélectionnez l'onglet Concepteur de pages dans la partie supérieure de la page.
2. Sélectionnez la barre d'onglets, puis cliquez sur le lien TabBarSelectionChangeChain dans les propriétés Events sur le côté droit de la page.
3. Sur la page Diagramme, sélectionnez la fonction d'appel displayEmbeddedUI.
4. Cliquez sur le lien Affecter à droite des paramètres d'entrée dans Propriétés à droite de la page.
5. Dans la boîte de dialogue Affecter des paramètres d'entrée, à gauche de la page, cliquez sur Sources, Chaîne d'actions, puis Variables. Dans le menu Variables, faites glisser l'option sélection vers affichage dans Paramètres (sous Cible) sur le côté droit de la page.
  Dans la section du code d'affichage au bas de la page, ajoutez le code suivant :
```
$variables.selection === 'odcs-documents-tab'
```
  Cliquez sur le bouton Enregistrer.
Pour ajouter le champ ID de dossier OCM aux services Web Get Service Request, procédez comme suit :

Description de l'illustration get-ser-req.png
1. Sélectionnez l'onglet Event Listeners dans la partie supérieure de la page.
2. Dans la section Processus d'écoute d'événement de cycle de vie vbEnter, sélectionnez le lien Accéder à la chaîne d'actions à droite de LoadServiceRequestAction.
3. Sélectionnez l'étape Appeler REST pour crmRestApi/get_serviceRequests.
4. Cliquez sur le lien crmRestApi/get_serviceRequest dans la section Endpoints des propriétés sur le côté droit de la page.
  
  Description de l'illustration get-ser-req-source.png
5. Sur la page crmRestApi, sélectionnez l'onglet Adresses, puis cliquez sur le bouton Réponse.
6. Sélectionnez le lien Définition du type de données au bas de la page.
7. Recherchez la section suivante : oracle_apps_crm_service_svcMgmt_srMgmt_srMgmtService_view_ServiceRequestVO-updatableFields
  
  Remarque :
  Il y aura plusieurs références à cette variable, mais nous voulons la section dans laquelle elle est définie.
8. Ajoutez le code suivant dans la sous-section Properties de la section ci-dessus :
```
"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. Pour formater le document, cliquez avec le bouton droit de la souris sur le code, puis sélectionnez Formater le document.
Pour ajouter le champ ID de dossier OCM dans la fenêtre Obtenir la réponse à la demande de service :

Description de l'illustration get-ser-req-response.png
1. Dans la page service-request-detail-start, sélectionnez l'onglet Types.
2. Déplacez le curseur de la souris sur { } getServiceRequestsResponse et sélectionnez le lien Modifier à partir de l'adresse, juste à droite.
3. Vérifiez la variable OCMFolderId_c que vous venez de créer dans la liste Endpoint Structure.
4. Cliquez sur le bouton Terminer.
Pour ajouter le champ ID de dossier OCM à l'action Obtenir la demande de service :

Description de l'illustration get-ser-req-action.png
1. Sur la page service-request-detail-start, sélectionnez l'onglet Processus d'écoute d'événement, puis sélectionnez vbEnter dans la partie supérieure de la page.
2. Dans la section Processus d'écoute d'événement de cycle de vie, vbEnter, sélectionnez le lien Accéder à la chaîne d'action à droite de LoadServiceRequestAction.
3. Sélectionnez l'étape Appeler REST pour crmRestApi/get_serviceRequests.
4. Dans la section Paramètres d'entrée des propriétés sur le côté droit de la page, sélectionnez le lien champs.
  
  Description de l'illustration assign-input-para.png
5. Dans la boîte de dialogue Affecter des paramètres d'entrée, sélectionnez Cible, Paramètres, uriParams, puis champs à droite de la boîte de dialogue.
  Dans le fichier uriParams.fields en bas, ajoutez ",OCMFolderId_c" sans les guillemets juste après SeverityCd. Cliquez sur le bouton Enregistrer.
Pour ajouter l'étape de création d'OCM AppLink à la chaîne d'actions LoadServiceRequestAction, procédez comme suit :

Description de l'illustration loadservicerequestaction.png
1. Sur la page Diagramme, faites glisser une nouvelle étape Appeler REST du côté gauche de la page Actions et déposez-la sur la ligne en pointillés sous l'étape Affecter des variables pour originalServiceRequestRecord au bas de la page.
  
  Remarque :
  Le flux ne semble pas correct pour quelques étapes supplémentaires.
  
  Description de l'illustration select-endpoint.png
2. Dans les propriétés situées à droite de la page, cliquez sur le lien Sélectionner à droite de Adresse.
3. Dans la boîte de dialogue Select Endpoint, sélectionnez Services, ocmRestApi, Applinks, puis POST /[..]/folder/{folderId}.
  Cliquez sur le bouton Select.
Pour affecter des variables d'entrée à l'étape AppLink, procédez comme suit :

Description de l'illustration applink.png
1. Sélectionnez le lien folderId dans la section Paramètres d'entrée du volet Propriétés.
  
  Description de l'illustration username.png
2. Faites glisser OCMFolderId_c des éléments Sources, Action Chain, Results, loadServiceRequets et body à gauche de la page et accédez à folderId (sous Target, Parameters et uriParams) sur le côté droit de la page.
3. Faites glisser userName depuis Sources, Application, Système et Utilisateur à gauche de la page et accédez à assignedUser sous Cible, Paramètres, uriParams.
4. Sélectionnez le bouton Enregistrer.
Pour mettre à jour le résultat de la notification d'échec de l'étape AppLink, procédez comme suit :

Description de l'illustration étape-failure.png
1. Cliquez avec le bouton droit de la souris sur l'étape Déclencher une notification juste en dessous de l'étape Appeler REST pour ocmRestApi/postDocumentsApi1_2ApplinksFolderFolderId et sélectionnez l'option Accéder au code dans le menu déroulant.
  
  Description de l'illustration diag-code.png
2. Ajoutez le code suivant juste en dessous de la section des paramètres de fireNotification :
```
,
"outcomes": { 
  "success": "showDefaultCursor"
}
```
3. Pour formater le document, cliquez avec le bouton droit de la souris sur le code et sélectionnez Formater le document.
Pour ajouter l'étape Créer une interface utilisateur intégrée OCM dans la chaîne d'actions LoadServiceRequestAction :

Description de l'illustration create-embui.png
1. Cliquez sur le bouton Concevoir en haut à droite de la page pour revenir à la chaîne d'action LoadServiceRequestAction.
2. Juste en dessous de l'étape Appeler REST pour le glisser-déplacer ocmRestApi/postDocumentsApi1_2ApplinksFolderFolderId sur la ligne en pointillés, effectuez une nouvelle étape Fonction d'appel à partir des actions sur le côté gauche de la page.
  
  Remarque :
  A ce stade, le flux devrait être beaucoup plus net et la nouvelle fonction d'appel devrait être sur le succès de l'étape Appeler REST de ocmRestApi/ postDocumentsApi1_2ApplinksFolderFolderId.
3. Sélectionnez le lien Créer à droite du champ Nom de fonction dans les propriétés sur le côté droit de la page.
  Dans le champ Nom de fonction, saisissez la valeur createOCMEmbeddedUI.
4. Cliquez sur le bouton Créer.

Pour ajouter le code nécessaire à la création du lien imbriqué OCM, procédez comme suit :

Description d'imbric-link.png ci-après
Description de l'illustration incorpor-link.png

Cliquez sur le lien Accéder à la fonction de module dans les propriétés sur le côté droit de la page.

Description de l'illustration js-code.png

Remplacez l'intégralité de la fonction createOCMEmbeddedUI (comprenant les commentaires) par le code suivant :

/**
 * 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" });
};

Pour inclure la bibliothèque d'interface utilisateur OCM dans le code de la fonction createOCMEmbeddedUI à utiliser :

Description de l'illustration ui-library.png
1. Accédez à la première ligne du code. Ajoutez le code suivant avant ojs/ojfilepicker :
```
'//static.ocecdn.oraclecloud.com/cdn/cec/api/oracle-ce-ui-2.12.js',
```
  Remarque :
  Ignorez l'avertissement relatif à la dépendance.
2. Ajoutez la variable associée à la bibliothèque OracleCEUI dans function() sur la même ligne.
3. Pour formater le document, cliquez avec le bouton droit de la souris sur le code et sélectionnez Formater le document.
Pour affecter la variable de sélection à la fonction displayEmbeddedUI, procédez comme suit :

Description de l'illustration select-vari.png
1. Sélectionnez l'onglet Actions dans la partie supérieure de la page.
2. Sélectionnez à nouveau LoadServiceRequestAction dans le menu déroulant, juste à droite du lien Chaînes d'actions en haut à gauche de la page, s'il n'est pas déjà sélectionné.
3. Sélectionnez l'étape Fonction d'appel pour le fichier createOCMEmbeddedUI qui vient d'être créé.
4. Sélectionnez le lien Affecter à droite de Paramètres d'entrée dans Propriétés.
  
  Description du corps de l'illustration : para.png
5. Dans la boîte de dialogue Affecter des paramètres d'entrée, faites glisser corps de Source, Chaîne d'actions, Résultats et callRestPostDocumentsApi12ApplinksFolderFolderId à gauche de la page vers appLink (sous Cible, Paramètres) à droite de la page.
  Cliquez sur Enregistrer.
Pour vérifier que toutes les modifications fonctionnent comme prévu :

Description de l'illustration verify.png
1. Sélectionnez l'onglet Concepteur de pages dans la partie supérieure de la page.
2. Cliquez sur le bouton En direct en haut à droite de la page.
3. Sélectionnez l'onglet Documents (sélectionnez un autre onglet et sélectionnez à nouveau l'onglet Documents s'il était déjà sélectionné).
4. Le dossier OCM associé à la demande de service en cours doit apparaître sur la page.
  
  Remarque :
  Si l'interface utilisateur intégrée OCM ne se charge pas comme prévu, corrigez-la avant de continuer. Vérifiez la présence d'erreurs dans la console du navigateur et le trafic réseau. Examinez également la partie inférieure du concepteur de page pour voir si la page contient des erreurs. Si tel est le cas, cliquez dessus pour obtenir plus de détails.