Integrazione di Oracle Content Management

In quest'ultima fase, potrai estendere l'applicazione Digital Customer Service con la collaborazione sui documenti OCM. Questa operazione richiede:

Creazione di un servizio API REST del documento OCM
Aggiunta di una scheda Documenti alla pagina Dettagli richiesta di servizio
Aggiunta di una variabile di ID cartella OCM nella risposta del servizio Web Visual Builder Get Service Request
Aggiornamento della catena di azioni Carica richiesta di servizio
Aggiornamento della pagina Dettagli richiesta di servizio per esporre l'interfaccia utente incorporata OCM in una nuova scheda Documenti

Per creare il file JSON dei servizi Web API REST OCM, immettere il seguente URL nel browser: https://docs.oracle.com/en/cloud/paas/content-cloud/rest-api-documents/swagger.json

Descrizione dell'illustrazione ocmrestapi.png

Fare clic con il pulsante destro del mouse sulla pagina del browser, selezionare l'opzione Salva per salvare il contenuto nel file ocmRestApi.json.
Per creare il servizio OCM:

Descrizione dell'illustrazione create-ser-conn.png
1. Selezionare Servizi, quindi Connessioni servizio nel menu di navigazione a sinistra.
2. Nella pagina Connessioni servizio, selezionare l'icona Crea in alto a destra nella sezione Servizi.
  Selezionare l'opzione Connessione servizio dal menu a discesa.
3. Selezionare Definito da specifica dalle opzioni Origine.
4. Nella pagina Crea connessione al servizio eseguire le operazioni riportate di seguito.
  1. Nel campo Nome servizio specificare il nome del servizio come ocmRestApi.
  2. Nel menu a discesa Tipo di API selezionare OpenAPI/Swagger.
  3. Nella sezione Specifica servizio, selezionare l'opzione Documento.
  4. Selezionare o trascinare il file ocmRestApi.json creato sopra nell'area di trascinamento della selezione della sezione Specifiche servizio.
  5. Fare clic sul pulsante Crea per salvare la connessione.
Per aggiornare la connessione al server OCM, effettuare le operazioni riportate di seguito.

Descrizione dell'illustrazione edit-server3prof.png
1. Nella pagina ocmRestApi selezionare Server.
2. Nella pagina Server selezionare l'icona Modifica all'estrema destra della connessione Nessuna descrizione.
3. Nella finestra di dialogo Edit Server, effettuare le operazioni riportate di seguito.
  1. Nel campo URL istanza specificare l'URL del server OCM che verrà utilizzato in questa integrazione. Ad esempio, https://oceserver.cec.ocp.oraclecloud.com.
  2. Nel menu a discesa Autenticazione selezionare l'opzione OAuth 2.0 Credenziali password proprietario risorsa.
  3. Fare clic sull'icona Modifica a destra del campo Nome utente.
    Nella finestra di dialogo Credenziale utente, immettere il nome utente e la password dell'amministratore dell'integrazione OCM. Deve essere lo stesso utente integrazione utilizzato durante la creazione dell'integrazione dell'applicazione di richiesta di servizio Fusion. Ad esempio IntegrationAdmin.
  4. Fare clic sul pulsante Salva per salvare le credenziali utente del nome utente.
  5. Fare clic sull'icona Modifica a destra del campo ID client.
  6. Immettere l'ID e i valori dei segreti client restituiti durante la creazione dell'applicazione riservata IDCS OCM nei campi ID client e Segreto client. Ad esempio, ID client: c585b2d3e97c40e491ca99112281e36d e Segreto client: 768b9513-658e-4854-bac7-2fe72d19011f.
  7. Fare clic sul pulsante Salva per salvare le credenziali utente dell'ID client.
  8. Immettere il valore URL ambito restituito durante la creazione dell'applicazione riservata IDCS OCM. Ad esempio, https://BD2F184D9D2344CB8134FCD4CBFF7DFD.cec.ocp.oraclecloud.com:443/urn:opc:cec:all
  9. Nel campo URL token immettere il valore. Questo valore può essere generato aggiungendo /oauth2/v1/token all'URL di base del server IDCS OCM. Ad esempio, https://idcs.identity.oraclecloud.com.
  10. Nella sezione Tipo di connessione, selezionare il proxy Usa sempre, indipendentemente dal supporto CORS dal menu a discesa.
  11. Fare clic sul pulsante Salva nella pagina principale per salvare le modifiche del server.
Per impostare i parametri endpoint AppLink specifici, effettuare le operazioni riportate di seguito.

Descrizione dell'immagine applink-endpoints.png
1. Nella pagina ocmRestApi, selezionare Endpoint.
2. Nella sezione AppLinks selezionare Crea applink cartella.
3. Fare clic sul pulsante Richiesta.
4. Fare clic sul pulsante Aggiungi parametro query dinamica. Nel campo Nome della sezione Parametri query dinamiche, immettere il valore come assignedUser.
5. Fare clic sul pulsante Parametro query statica. Nel campo Nome della sezione Parametri di query statiche immettere il valore come ruolo.
  Nel campo Valore immettere il valore come contributore. Fare clic su OK per salvare il parametro della query statica.
Per aggiungere la scheda Documenti alla pagina Dettagli richiesta di servizio, eseguire le operazioni riportate di seguito.

Descrizione dell'illustrazione work-orders.png
1. Selezionare Applicazioni Web dal menu di navigazione a sinistra.
2. Dalla lista Applicazioni Web selezionare dcs, service-request-detail, quindi service-request-detail-start.
3. Nella pagina iniziale service-request-detail, selezionare la scheda Progettazione pagina. Fare clic sul pulsante Design nella parte superiore destra.
4. Nella pagina Progettazione pagina selezionare Ordini di lavoro.
5. Selezionare l'elemento padre <li> nella sezione Componenti a sinistra della pagina di progettazione con Bind Text [[$app…serviceRequestDetail_workOrders]].
6. Fare clic con il pulsante destro del mouse sull'elemento <li> e selezionare Copia.
7. Fare di nuovo clic con il pulsante destro del mouse sull'elemento <li> e selezionare Incolla/Dopo.
8. Nel nuovo elemento <li> appena creato, selezionare l'elemento Bind Text.
  
  Descrizione dell'illustrazione traducibile-string.png
9. Nel pannello delle proprietà sul lato destro, selezionare l'icona Rendi stringa traducibile (simile a un mondo). Nella finestra di dialogo Stringa traducibile, immettere il valore Documenti nel campo Stringa.
  Nel campo Chiave immettere serviceRequestDetail_documents, quindi fare clic su Salva.
Per modificare il codice della pagina Dettagli richiesta di servizio, effettuare le operazioni riportate di seguito.

Descrizione dell'immagine oj-bind.png
1. Selezionare il pulsante Codice nella parte superiore destra della pagina Progettazione pagina.
2. Per formattare il codice, fare clic con il pulsante destro del mouse sul codice, quindi selezionare Formatta documento.
3. Cercare serviceRequestDetail_documents nel codice.
4. Sostituire l'elemento <li> padre id con odcs-documents-tab.
5. Nella parte inferiore della pagina subito dopo il secondo ultimo elemento </oj-bind-if>, aggiungere il seguente codice:
  <div id="OCMEmbeddedUI" style="display:none"> </div>
6. Per formattare il documento ancora una volta, fare clic con il pulsante destro del mouse sul codice e selezionare Formatta documento.
Per aggiungere un evento alla pagina Dettagli richiesta di servizio, effettuare le operazioni riportate di seguito.

Descrizione del diagramma illustrazione - callfunc.png
1. Fare clic sul pulsante Progettazione nella parte superiore destra della pagina Progettazione pagina.
2. Selezionare la barra delle schede con la scheda Documenti appena aggiunta nella pagina Designer.
3. Selezionare la scheda Eventi in alto a destra nella sezione Proprietà. Fare clic sul pulsante Nuovo evento, quindi selezionare Alla selezione nel menu a discesa.
4. In TabBarSelectionChangeChain (che è stato appena creato), trascinare e rilasciare una funzione chiamata JS dalla sezione Azioni a sinistra della pagina sull'icona + nella catena.
5. Fare clic sul collegamento Crea accanto al Nome funzione nella sezione Proprietà a destra della pagina.
  Nel campo Nome funzione, immettere il valore come displayEmbeddedUI. Fare clic su Crea.
  Fare clic sul collegamento Vai a funzione modulo. Sostituire l'intera funzione displayEmbeddedUI (compresi i commenti) con il codice seguente:
```
/** * 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";
  }
};
```
  Descrizione dell'illustrazione javascript-code.png
6. Per formattare il documento, fare clic con il pulsante destro del mouse sul codice, quindi selezionare Formatta documento.
Per assegnare la variabile di selezione alla funzione displayEmbeddedUI:

Descrizione dell'assegnazione illustrazione - para.png
1. Selezionare la scheda Progettazione pagina nella parte superiore della pagina.
2. Selezionare la barra delle schede, quindi fare clic sul collegamento TabBarSelectionChangeChain nelle proprietà Eventi sul lato destro della pagina.
3. Nella pagina Diagramma selezionare la funzione di chiamata displayEmbeddedUI.
4. Fare clic sul collegamento Assegna a destra di Parametri di input in Proprietà a destra della pagina.
5. Nella finestra di dialogo Parametri di assegnazione input, sul lato sinistro della pagina, fare clic su Origini, Catena azioni, quindi su Variabili. Nel menu Variabili, trascinare l'opzione selezione nella visualizzazione all'interno dei parametri (nella sezione Destinazione) sul lato destro della pagina.
  Nella sezione Codice visualizzazione nella parte inferiore della pagina aggiungere il codice seguente:
```
$variables.selection === 'odcs-documents-tab'
```
  Fare clic sul pulsante Salva.
Per aggiungere il campo ID cartella OCM ai servizi Web Ottieni richiesta di servizio, effettuare le operazioni riportate di seguito.

Descrizione dell'illustrazione get-ser-req.png
1. Selezionare la scheda Listener eventi nella parte superiore della pagina.
2. Nella sezione Listener eventi ciclo di vita vbEnter selezionare il collegamento Vai a catena di azioni a destra di LoadServiceRequestAction.
3. Selezionare il passo Chiama REST per crmRestApi/get_serviceRequests.
4. Fare clic sul collegamento crmRestApi/get_serviceRequest nella sezione Endpoint delle proprietà sul lato destro della pagina.
  
  Descrizione dell'illustrazione get-ser-req-source.png
5. Nella pagina crmRestApi selezionare la scheda Endpoint, quindi fare clic sul pulsante Risposta.
6. Selezionare il collegamento Definizione tipo di dati nella parte inferiore della pagina.
7. Cerca la seguente sezione: oracle_apps_crm_service_svcMgmt_srMgmt_srMgmtService_view_ServiceRequestVO-updatableFields
  
  Nota:
  Ci saranno diversi riferimenti a questa variabile, ma vogliamo la sezione in cui viene definita.
8. Aggiungere il codice seguente nella sezione secondaria delle proprietà all'interno della sezione appena trovata sopra:
```
"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. Per formattare il documento, fare clic con il pulsante destro del mouse sul codice, quindi selezionare Formatta documento.
Per aggiungere il campo ID cartella OCM in Ottieni risposta a richiesta di servizio, effettuare le operazioni riportate di seguito.

Descrizione dell'illustrazione get-ser-req-response.png
1. Nella pagina iniziale service-request-detail-start selezionare la scheda Tipi.
2. Passare il puntatore del mouse su { } getServiceRequestsResponse e selezionare il collegamento Modifica dall'endpoint a destra.
3. Controllare la variabile OCMFolderId_c appena creata dalla lista Struttura endpoint.
4. Fare clic sul pulsante Fine.
Per aggiungere il campo ID cartella OCM a Ottieni azione richiesta di servizio, effettuare le operazioni riportate di seguito.

Descrizione dell'illustrazione get-ser-req-action.png
1. Nella pagina di avvio dei dettagli della richiesta di servizio, selezionare la scheda Listener eventi, quindi selezionare vbEnter nella parte superiore della pagina.
2. Nella sezione Listener eventi ciclo di vita, vbEnter, selezionare il collegamento Vai a catena di azioni a destra di LoadServiceRequestAction.
3. Selezionare il passo Chiama REST per crmRestApi/get_serviceRequests.
4. Nella sezione Parametri di input delle proprietà sul lato destro della pagina, selezionare il collegamento campi.
  
  Descrizione dell'illustrazione assegn-input-para.png
5. Nella finestra di dialogo Assegna parametri di input selezionare Destinazione, Parametri, uriParams, quindi campi sul lato destro della finestra di dialogo.
  Nella parte inferiore di uriParams.fields, aggiungere ",OCMFolderId_c" senza virgolette dopo SeverityCd . Fare clic sul pulsante Salva.
Per aggiungere il passo Crea OCM AppLink nella catena di azioni LoadServiceRequestAction, effettuare le operazioni riportate di seguito.

Descrizione dell'illustrazione loadservicerequestaction.png
1. Nella pagina Diagramma trascinare un nuovo passo Chiama REST dal riquadro Azioni a sinistra della pagina e rilasciarlo sulla linea tratteggiata sotto il passo Assegna variabili per originalServiceRequestRecord nella parte inferiore della pagina.
  
  Nota:
  Il flusso non sembra giusto per qualche passo in più.
  
  Descrizione della figura selezionata-endpoint.png
2. Nella sezione Proprietà sul lato destro della pagina, fare clic sul collegamento Seleziona a destra di Endpoint.
3. Nella finestra di dialogo Seleziona endpoint selezionare Servizi, ocmRestApi, Applink, quindi POST /[..]/folder/{folderId}.
  Fare clic sul pulsante Seleziona.
Per assegnare variabili di input al passo AppLink, effettuare le operazioni riportate di seguito.

Descrizione dell'illustrazione applink.png
1. Selezionare il collegamento folderId nella sezione Parametri di input del riquadro Proprietà.
  
  Descrizione dell'illustrazione username.png
2. Trascinare OCMFolderId_c da Origini, Catena azioni, Risultati, loadServiceRequets e corpo a sinistra della pagina e passare a folderId (in Destinazione, Parametri e uriParams) a destra della pagina.
3. Trascinare userName da Origini, Applicazione, Sistema e Utente a sinistra della pagina e passare a assignedUser sotto Destinazione, Parametri, uriParams.
4. Selezionare il pulsante Salva.
Per aggiornare il risultato per la notifica dell'errore del passo AppLink:

Descrizione del passo illustrazione - failure.png
1. Fare clic con il pulsante destro del mouse sul passo Notifica di invio sotto il passo Chiamata REST per ocmRestApi/postDocumentsApi1_2ApplinksFolderFolderId e selezionare l'opzione Vai al codice dal menu a discesa.
  
  Descrizione dell'illustrazione diag-code.png
2. Aggiungere il seguente codice appena sotto la sezione dei parametri di fireNotification:
```
,
"outcomes": { 
  "success": "showDefaultCursor"
}
```
3. Per formattare il documento, fare clic con il pulsante destro del mouse sul codice e selezionare Formatta documento.
Per aggiungere il passo Crea interfaccia utente incorporata OCM alla catena di azioni LoadServiceRequestAction, effettuare le operazioni riportate di seguito.

Descrizione dell'illustrazione create-embui.png
1. Fare clic sul pulsante Progetta nella parte superiore destra della pagina per tornare alla catena di azioni LoadServiceRequestAction.
2. Subito sotto il passo Chiama REST per il trascinamento ocmRestApi/postDocumentsApi1_2ApplinksFolderFolderId sulla linea tratteggiata è disponibile un nuovo passo Funzione chiamata dal Azioni sul lato sinistro della pagina.
  
  Nota:
  A questo punto, il flusso dovrebbe essere molto più pulito e la nuova funzione di chiamata dovrebbe essere sul successo del passo REST chiamata di ocmRestApi/ postDocumentsApi1_2ApplinksFolderFolderId.
3. Selezionare il collegamento Crea a destra del campo Nome funzione nella sezione Proprietà sul lato destro della pagina.
  Nel campo Nome funzione, immettere il valore come createOCMEmbeddedUI.
4. Fare clic sul pulsante Crea.

Per aggiungere il codice necessario per creare il collegamento incorporato OCM:

Segue la descrizione di embed-link.png
Descrizione dell'immagine embed-link.png

Fare clic sul collegamento Vai a funzione modulo nella sezione Proprietà sul lato destro della pagina.

Descrizione dell'illustrazione js-code.png

Sostituire l'intera funzione createOCMEmbeddedUI (compresi i commenti) con il codice seguente:

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

Per includere la libreria dell'interfaccia utente OCM nel codice della funzione createOCMEmbeddedUI da utilizzare, effettuare le operazioni riportate di seguito.

Descrizione dell'illustrazione ui-library.png
1. Passare alla prima riga del codice. Aggiungere il codice seguente prima di ojs/ojfilepicker:
```
'//static.ocecdn.oraclecloud.com/cdn/cec/api/oracle-ce-ui-2.12.js',
```
  Nota:
  Ignorare l'avvertenza di dipendenza.
2. Aggiungere la variabile associata alla libreria OracleCEUI in function() sulla stessa riga.
3. Per formattare il documento, fare clic con il pulsante destro del mouse sul codice e selezionare Formatta documento.
Per assegnare la variabile di selezione alla funzione displayEmbeddedUI:

Descrizione della selezione illustrazione - vari.png
1. Selezionare la scheda Azioni nella parte superiore della pagina.
2. Selezionare di nuovo LoadServiceRequestAction dal menu a discesa a destra del collegamento Catene azioni nella parte superiore sinistra della pagina, se non è già selezionata.
3. Selezionare il passo Funzione chiamata per createOCMEmbeddedUI appena creato.
4. Selezionare il collegamento Assegna a destra di Parametri di input in Proprietà.
  
  Descrizione del corpo dell'illustrazione: para.png
5. Nella finestra di dialogo Assegna parametri di input trascinare corpo da Origine, Catena azioni, Risultati e callRestPostDocumentsApi12ApplinksFolderFolderId a sinistra della pagina in appLink (in Destinazione, Parametri) sul lato destro della pagina.
  Fare clic su Salva.
Per verificare che tutte le modifiche funzionino come previsto:

Descrizione dell'illustrazione verify.png
1. Selezionare la scheda Progettazione pagina nella parte superiore della pagina.
2. Fare clic sul pulsante Disponibile nella parte superiore destra della pagina.
3. Selezionare la scheda Documenti (selezionare una scheda diversa e selezionare di nuovo la scheda Documenti, se già selezionata).
4. Nella pagina dovrebbe essere visualizzata la cartella OCM correlata per la richiesta di servizio corrente.
  
  Nota:
  Se l'interfaccia utente incorporata OCM non viene caricata come previsto, correggerla prima di continuare. Controllare eventuali errori nella console del browser e nel traffico di rete. Osservare inoltre la parte inferiore di Progettazione pagina per verificare se la pagina contiene errori. In caso affermativo, fare clic su di essi per ottenere ulteriori dettagli.