Integración de Oracle Content Management

En este último paso, podrá ampliar la aplicación Digital Customer Service con la colaboración en documentos de OCM. Esto requiere:

Creación de un servicio de API de REST de documento de OCM
Adición de un separador Documentos a la página Detalles de Solicitud de Servicio
Adición de una variable de ID de carpeta de OCM a la respuesta del servicio web Obtener solicitud de servicio de Visual Builder
Actualización de la cadena de acción de solicitud de servicio de carga
Actualización de la página Detalles de solicitud de servicio para mostrar la interfaz de usuario embebida de OCM en un nuevo separador Documentos

Para crear el archivo JSON de los servicios web de la API de REST de OCM, introduzca la siguiente URL en el explorador: https://docs.oracle.com/en/cloud/paas/content-cloud/rest-api-documents/swagger.json

Descripción de la ilustración ocmrestapi.png

Haga clic con el botón derecho en la página del explorador y seleccione la opción Save (Guardar) para guardar el contenido en el archivo ocmRestApi.json.
Para crear el servicio de OCM:

Descripción de la ilustración create-ser-conn.png
1. Seleccione Services (Servicios) y, a continuación, Service Connections (Conexiones de servicio) en el menú de navegación de la izquierda.
2. En la página Conexiones de servicio, seleccione el icono Crear en la parte superior derecha de la sección Servicios.
  Seleccione la opción Service Connection (Conexión de servicio) en el menú desplegable.
3. Seleccione Definido por especificación en las opciones de Origen.
4. En la página Crear Conexión de Servicio, haga lo siguiente:
  1. En el campo Nombre de servicio, especifique el nombre del servicio como ocmRestApi.
  2. En el menú desplegable Tipo de API, seleccione OpenAPI/Swagger.
  3. En la sección Especificación de servicio, seleccione la opción Documento.
  4. Seleccione o arrastre el archivo ocmRestApi.json creado anteriormente al área de arrastrar y soltar de la sección Especificaciones de servicio.
  5. Haga clic en el botón Crear para guardar la conexión.
Para actualizar la conexión al servidor de OCM:

Descripción de la ilustración edit-server3prof.png
1. En la página ocmRestApi, seleccione Servidores.
2. En la página Servidores, seleccione el icono Editar en el extremo derecho de la conexión Sin descripción.
3. En el cuadro de diálogo Edit Server (Editar servidor), haga lo siguiente:
  1. En el campo URL de instancia, especifique la URL del servidor de OCM que se utilizará en esta integración. Por ejemplo, https://oceserver.cec.ocp.oraclecloud.com.
  2. En el menú desplegable Autenticación, seleccione la opción OAuth 2.0 Resource Owner Password Credentials.
  3. Haga clic en el icono Editar situado a la derecha del campo Nombre de usuario.
    En el cuadro de diálogo Credencial de usuario, introduzca el nombre de usuario y la contraseña del administrador de integración de OCM. Debe ser el mismo usuario de integración que se utilizó durante la creación de la integración de la aplicación de solicitud de servicio de Fusion. Por ejemplo, IntegrationAdmin.
  4. Haga clic en el botón Save (Guardar) para guardar las credenciales de usuario.
  5. Haga clic en el icono Editar situado a la derecha del campo ID de cliente.
  6. Introduzca los valores de identificador de cliente y secreto de cliente que se han devuelto durante la creación de la aplicación confidencial de OCM IDCS en los campos Identificador de Cliente y Secreto de Cliente. Por ejemplo, ID de cliente: c585b2d3e97c40e491ca99112281e36d y Secreto de cliente: 768b9513-658e-4854-bac7-2fe72d19011f.
  7. Haga clic en el botón Save (Guardar) para guardar las credenciales de usuario de ID de cliente.
  8. Introduzca el valor de URL de ámbito que se ha devuelto durante la creación de la aplicación confidencial de IDCS de OCM. Por ejemplo, https://BD2F184D9D2344CB8134FCD4CBFF7DFD.cec.ocp.oraclecloud.com:443/urn:opc:cec:all
  9. En el campo URL de token, introduzca el valor. Este valor se puede generar agregando /oauth2/v1/token a la URL base del servidor de OCM IDCS. Por ejemplo, https://idcs.identity.oraclecloud.com.
  10. En la sección Connection Type, seleccione el proxy Always use, independientemente del soporte de CORS del menú desplegable.
  11. Haga clic en el botón Save (Guardar) en la página principal para guardar los cambios del servidor.
Para configurar los parámetros de punto final AppLink específicos:

Descripción de la ilustración aplink-endpoints.png
1. En la página ocmRestApi, seleccione Puntos finales.
2. En la sección AppLinks, seleccione Crear enlace de aplicación de carpeta.
3. Haga clic en el botón Solicitar.
4. Haga clic en el botón Agregar parámetro de consulta dinámica. En la sección Parámetros de consulta dinámica, en el campo Nombre, introduzca el valor como assignedUser.
5. Haga clic en el botón Parámetro de consulta estática. En la sección Parámetros de consulta estática, en el campo Nombre, introduzca el valor como rol.
  En el campo Valor, introduzca el valor como contribuyente. Haga clic en Aceptar para guardar el parámetro de consulta estática.
Para agregar el separador Documentos a la página Detalles de solicitud de servicio:

Descripción de la ilustración work-orders.png
1. Seleccione Aplicaciones web en el menú de navegación de la izquierda.
2. En la lista Aplicaciones web, seleccione dcs, service-request-detail y, a continuación, service-request-detail-start.
3. En la página service-request-detail-start, seleccione el separador Page Designer. Haga clic en el botón Diseñar en la parte superior derecha.
4. En la página Diseñador de páginas, seleccione Órdenes de trabajo.
5. Seleccione el principal <li> en la sección Componentes de la izquierda de la página de diseño que tiene Bind Text [[$app…serviceRequestDetail_workOrders]].
6. Haga clic con el botón secundario en el elemento <li> y seleccione Copiar.
7. Haga clic con el botón derecho en el elemento <li> de nuevo y seleccione Pegar/después.
8. En el nuevo elemento <li> que se acaba de crear, seleccione el elemento Bind Text.
  
  Descripción de la ilustración traducible: string.png
9. En el panel de propiedades de la derecha, seleccione el icono Convertir en cadena traducible (parece un mundo). En el cuadro de diálogo Cadena traducible, introduzca el valor Documentos en el campo Cadena.
  En el campo Clave, introduzca serviceRequestDetail_documents y, a continuación, haga clic en Guardar.
Para modificar el código de página Detalles de Solicitud de Servicio:

Descripción de la ilustración oj-bind.png
1. Seleccione el botón Código en la parte superior derecha de la página Diseñador de páginas.
2. Para formatear el código, haga clic con el botón derecho en el código y, a continuación, seleccione Formato de documento.
3. Busque serviceRequestDetail_documents en el código.
4. Sustituya el elemento <li> principal id por odcs-documents-tab.
5. En la parte inferior de la página, justo después del segundo último elemento </oj-bind-if>, agregue el siguiente código:
  <div id="OCMEmbeddedUI" style="display:none"> </div> (Fin de actualización)
6. Para formatear el documento una vez más, haga clic con el botón derecho en el código y seleccione Formato de documento.
Para agregar un evento a la página Detalles de Solicitud de Servicio:

Descripción del diagrama de ilustración: callfunc.png
1. Haga clic en el botón Diseñar en la parte superior derecha de la página Diseñador de páginas.
2. Seleccione la barra de separadores con el separador Documentos recién agregado de la página del diseñador.
3. Seleccione el separador Events en la parte superior derecha de la sección Properties. Haga clic en el botón Nuevo evento y, a continuación, seleccione En la selección en el menú desplegable.
4. En TabBarSelectionChangeChain (que se acaba de crear), arrastre y suelte una función de llamada de JS de la sección Acciones de la izquierda de la página en el icono + de la cadena.
5. Haga clic en el enlace Crear situado junto al Nombre de función en la sección Propiedades de la derecha de la página.
  En el campo Nombre de función, introduzca el valor como displayEmbeddedUI. Haga clic en Crear.
  Haga clic en el enlace Ir a función de módulo. Sustituya toda la función displayEmbeddedUI (incluidos los comentarios) por el siguiente código:
```
/** * 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";
  }
};
```
  Descripción de la ilustración javascript-code.png
6. Para formatear el documento, haga clic con el botón derecho en el código y, a continuación, seleccione Formato de documento.
Para asignar la variable de selección a la función displayEmbeddedUI:

Descripción de la ilustración asign-para.png
1. Seleccione el separador Page Designer en la parte superior de la página.
2. Seleccione la barra de separadores y, a continuación, haga clic en el enlace TabBarSelectionChangeChain en las propiedades Eventos en la parte derecha de la página.
3. En la página Diagrama, seleccione la función de llamada displayEmbeddedUI.
4. Haga clic en el enlace Asignar situado a la derecha de Parámetros de entrada en Propiedades a la derecha de la página.
5. En el cuadro de diálogo Parámetros de asignación de entrada, en la parte izquierda de la página, haga clic en Orígenes, Cadena de acción y, a continuación, en Variables. En el menú Variables, arrastre la opción selección a visualización dentro de Parámetros (en Destino) en el lado derecho de la página.
  En la sección de código mostrado en la parte inferior de la página, agregue el siguiente código:
```
$variables.selection === 'odcs-documents-tab'
```
  Haga clic en el botón Guardar.
Para agregar el campo ID de carpeta de OCM a los servicios web Get Service Request:

Descripción de la ilustración get-ser-req.png
1. Seleccione el separador Listeners de eventos en la parte superior de la página.
2. En la sección Listeners de eventos de ciclo de vida vbEnter, seleccione el enlace Ir a cadena de acción situado a la derecha de LoadServiceRequestAction.
3. Seleccione el paso Llamar a REST para crmRestApi/get_serviceRequests.
4. Haga clic en el enlace crmRestApi/get_serviceRequest en la sección Puntos finales de las propiedades en la parte derecha de la página.
  
  Descripción de la ilustración get-ser-req-source.png
5. En la página crmRestApi, seleccione el separador Puntos finales y, a continuación, haga clic en el botón Respuesta.
6. Seleccione el enlace Definición de tipo de dato en la parte inferior de la página.
7. Busque la siguiente sección: oracle_apps_crm_service_svcMgmt_srMgmt_srMgmtService_view_ServiceRequestVO-updatableFields
  
  Nota:
  Habrá varias referencias a esta variable, pero queremos la sección en la que se está definiendo.
8. Agregue el siguiente código a la subsección Properties dentro de la sección que se acaba de encontrar anteriormente:
```
"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. Para formatear el documento, haga clic con el botón derecho en el código y, a continuación, seleccione Formato de documento.
Para agregar el campo ID de carpeta de OCM a la respuesta Get Service Request:

Descripción de la ilustración get-ser-req-response.png
1. En la página service-request-detail-start, seleccione el separador Types.
2. Coloque el puntero sobre { } getServiceRequestsResponse y seleccione el enlace Editar desde punto final justo a la derecha.
3. Compruebe la variable OCMFolderId_c recién creada de la lista Estructura de punto final.
4. Haga clic en el botón Finalizar.
Para agregar el campo ID de carpeta de OCM a la acción Obtener solicitud de servicio:

Descripción de la ilustración get-ser-req-action.png
1. En la página service-request-detail-start, seleccione el separador Listeners de evento y, a continuación, seleccione vbEnter en la parte superior de la página.
2. En la sección Listeners de eventos del ciclo de vida, vbEnter, seleccione el enlace Ir a cadena de acción justo a la derecha de LoadServiceRequestAction.
3. Seleccione el paso Llamar a REST para crmRestApi/get_serviceRequests.
4. En la sección Parámetros de entrada de las propiedades del lado derecho de la página, seleccione el enlace campos.
  
  Descripción de la ilustración map-input-para.png
5. En el cuadro de diálogo Asignar parámetros de entrada, seleccione Destino, Parámetros, uriParams y, a continuación, campos en el lado derecho del cuadro de diálogo.
  En la parte inferior de uriParams.fields, agregue ",OCMFolderId_c" sin las comillas justo después de SeverityCd . Haga clic en el botón Guardar.
Para agregar el paso Crear OCM AppLink a la cadena de acción LoadServiceRequestAction:

Descripción de la ilustración loadservicerequestaction.png
1. En la página Diagrama, arrastre un nuevo paso Llamar a REST desde Acciones en la parte izquierda de la página y suéltelo en la línea de puntos debajo del paso Asignar variables para originalServiceRequestRecord en la parte inferior de la página.
  
  Nota:
  El flujo no se verá adecuado para unos pasos más.
  
  Descripción de la ilustración select-endpoint.png
2. En las propiedades de la parte derecha de la página, haga clic en el enlace Seleccionar situado a la derecha de Punto final.
3. En el cuadro de diálogo Seleccionar punto final, seleccione Servicios, ocmRestApi, Enlaces de aplicaciones y, a continuación, POST /[..]/folder/{folderId}.
  Haga clic en el botón Seleccionar.
Para asignar variables de entrada al paso AppLink:

Descripción de la ilustración applink.png
1. Seleccione el enlace folderId en la sección Parámetros de entrada del panel Propiedades.
  
  Descripción de la ilustración username.png
2. Arrastre OCMFolderId_c desde Orígenes, Cadena de acción, Resultados, loadServiceRequets y cuerpo a la izquierda de la página y suelte en folderId (en Destino, Parámetros y uriParams) a la derecha de la página.
3. Arrastre userName desde Orígenes, Aplicación, Sistema y Usuario a la izquierda de la página y suelte en assignedUser en Destino, Parámetros, uriParams.
4. Seleccione el botón Guardar.
Para actualizar el resultado de la notificación de fallo del paso AppLink:

Descripción del paso de ilustración: failure.png
1. Haga clic con el botón derecho en el paso Notificación de incendio justo debajo del paso Llamar a REST para ocmRestApi/postDocumentsApi1_2ApplinksFolderFolderId y seleccione la opción Ir a código en el menú desplegable.
  
  Descripción de la ilustración diag-code.png
2. Agregue el siguiente código justo debajo de la sección de parámetros de fireNotification:
```
,
"outcomes": { 
  "success": "showDefaultCursor"
}
```
3. Para formatear el documento, haga clic con el botón derecho en el código y seleccione Formato de documento.
Para agregar el paso de creación de interfaz de usuario embebida de OCM a la cadena de acción LoadServiceRequestAction:

Descripción de la ilustración create-embui.png
1. Haga clic en el botón Diseñar en la parte superior derecha de la página para volver a la cadena de acción LoadServiceRequestAction.
2. Justo debajo del paso Llamar a REST para ocmRestApi/postDocumentsApi1_2ApplinksFolderFolderId, arrastre y suelte en la línea de puntos un nuevo paso de Función de llamada desde Acciones en el lado izquierdo de la página.
  
  Nota:
  En este punto, el flujo debe ser mucho más limpio y la nueva función de llamada debe estar en el éxito del paso Llamar a REST de ocmRestApi/ postDocumentsApi1_2ApplinksFolderFolderId.
3. Seleccione el enlace Crear situado a la derecha del campo Nombre de función en Propiedades en la parte derecha de la página.
  En el campo Nombre de función, introduzca el valor como createOCMEmbeddedUI.
4. Haga clic en el botón Crear.

Para agregar el código necesario para crear el enlace embebido de OCM:

A continuación se muestra la descripción de embeb-link.png
Descripción de la ilustración embeb-link.png

Haga clic en el enlace Ir a función de módulo en las propiedades de la parte derecha de la página.

Descripción de la ilustración js-code.png

Sustituya toda la función createOCMEmbeddedUI (incluidos los comentarios) por el siguiente código:

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

Para incluir la biblioteca de la interfaz de usuario de OCM en el código para que utilice la función createOCMEmbeddedUI:

Descripción de la ilustración ui-library.png
1. Ir a la primera línea del código. Agregue el siguiente código antes de ojs/ojfilepicker:
```
'//static.ocecdn.oraclecloud.com/cdn/cec/api/oracle-ce-ui-2.12.js',
```
  Nota:
  Ignore la advertencia de dependencia.
2. Agregue la variable asociada a la biblioteca OracleCEUI en function() en la misma línea.
3. Para formatear el documento, haga clic con el botón derecho en el código y seleccione Formato de documento.
Para asignar la variable de selección a la función displayEmbeddedUI:

Descripción de la selección de ilustración: vari.png
1. Seleccione el separador Acciones en la parte superior de la página.
2. Vuelva a seleccionar LoadServiceRequestAction en el menú desplegable situado a la derecha del enlace Cadenas de acción en la parte superior izquierda de la página si aún no está seleccionada.
3. Seleccione el paso Función de llamada para la createOCMEmbeddedUI que acaba de crear.
4. Seleccione el enlace Asignar a la derecha de Parámetros de entrada en Propiedades.
  
  Descripción del cuerpo de la ilustración: para.png
5. En el cuadro de diálogo Asignar parámetros de entrada, arrastre body desde Source, Action Chain, Results y callRestPostDocumentsApi12ApplinksFolderFolderId en la parte izquierda de la página a appLink (en Target, Parameters) en el lado derecho de la página.
  Haga clic en Guardar.
Para verificar que todos los cambios funcionan como se esperaba:

Descripción de la ilustración verify.png
1. Seleccione el separador Page Designer en la parte superior de la página.
2. Haga clic en el botón Activo en la parte superior derecha de la página.
3. Seleccione la ficha Documentos (seleccione otra ficha y vuelva a seleccionar la ficha Documentos si ya estaba seleccionada).
4. Debe ver la carpeta de OCM relacionada para la solicitud de servicio actual en la página.
  
  Nota:
  Si la interfaz de usuario embebida de OCM no se carga como se esperaba, corríjala antes de continuar. Compruebe si hay errores en la consola del explorador y en el tráfico de red. Además, observe la parte inferior de Page Designer para ver si hay errores en la página. Si es así, haga clic en ellos para obtener más detalles.