Integração do Oracle Content Management

Nesta última etapa, você poderá estender o aplicativo Digital Customer Service com a colaboração de documentos do OCM. Isso requer:

Criando um serviço de API REST de documento OCM
Adicionando uma guia Documentos à página Detalhes da Solicitação de Serviço
Adicionando uma variável de ID de pasta OCM à resposta do web service Obter Solicitação de Serviço do Visual Builder
Atualizando a Cadeia de Ações Carregar Solicitação de Serviço
Atualizando a página Detalhes da Solicitação de Serviço para expor a IU incorporada do OCM em uma nova guia Documentos

Para criar o arquivo JSON de web services da API REST do OCM, digite o seguinte URL no seu browser: https://docs.oracle.com/en/cloud/paas/content-cloud/rest-api-documents/swagger.json

Descrição da ilustração ocmrestapi.png

Clique com o botão direito do mouse na página do browser, selecione a opção Salvar para salvar o conteúdo no arquivo ocmRestApi.json.
Para criar o serviço OCM:

Descrição da ilustração create-ser-conn.png
1. Selecione os Serviços e, em seguida, Conexões de Serviço no menu de navegação esquerdo.
2. Na página Conexões de Serviço, selecione o ícone Criar no canto superior direito da seção Serviços.
  Selecione a opção Conexão de Serviço no menu suspenso.
3. Selecione Definido pela Especificação nas opções de Origem.
4. Na página Criar Conexão de Serviço, faça o seguinte:
  1. No campo Nome do Serviço, especifique o nome do serviço como ocmRestApi.
  2. No menu suspenso Tipo de API, selecione OpenAPI/Swagger.
  3. Na seção Especificação do Serviço, selecione a opção Documento.
  4. Selecione ou arraste o arquivo ocmRestApi.json criado acima para a área de arrastar e soltar da seção Especificações de Serviço.
  5. Clique no botão Criar para salvar a conexão.
Para atualizar a conexão do servidor OCM:

Descrição da ilustração edit-server3prof.png
1. Na página ocmRestApi, selecione Servidores.
2. Na página Servidores, selecione o ícone Editar na extrema direita da conexão Sem Descrição.
3. Na caixa de diálogo Editar Servidor, faça o seguinte:
  1. No campo URL da Instância, especifique o URL do servidor OCM que será usado nesta integração. Por exemplo, https://oceserver.cec.ocp.oraclecloud.com.
  2. No menu drop-down Autenticação, selecione a opção OAuth Credenciais de Senha do Proprietário do Recurso 2.0.
  3. Clique no ícone Editar à direita do campo Nome do Usuário.
    Na caixa de diálogo Credencial do Usuário, informe o nome do usuário e a senha do administrador de integração do OCM. Deve ser o mesmo usuário de integração usado durante a criação da integração do aplicativo de solicitação de serviço do Fusion. Por exemplo, IntegrationAdmin.
  4. Clique no botão Salvar para salvar as Credenciais de Usuário do Nome de Usuário.
  5. Clique no ícone Editar à direita do campo ID do Cliente.
  6. Informe o ID do cliente e os valores secretos do cliente que foram retornados durante a criação do aplicativo confidencial OCM IDCS nos campos ID do Cliente e Segredo do Cliente. Por exemplo, ID do Cliente: c585b2d3e97c40e491ca99112281e36d e Segredo do Cliente: 768b9513-658e-4854-bac7-2fe72d19011f.
  7. Clique no botão Salvar para salvar as Credenciais do Usuário do ID do Cliente.
  8. Informe o valor do URL do Escopo que foi retornado durante a criação do aplicativo confidencial OCM IDCS. Por exemplo, https://BD2F184D9D2344CB8134FCD4CBFF7DFD.cec.ocp.oraclecloud.com:443/urn:opc:cec:all
  9. No campo URL do Token, informe o valor. Esse valor pode ser gerado anexando /oauth2/v1/token ao URL base do servidor OCM IDCS. Por exemplo, https://idcs.identity.oraclecloud.com.
  10. Na seção Tipo de Conexão, selecione o proxy Sempre usar, independentemente do suporte a CORS no menu drop-down.
  11. Clique no botão Salvar na página principal para salvar as alterações do servidor.
Para configurar os parâmetros específicos do Ponto Final AppLink:

Descrição da ilustração applink-endpoints.png
1. Na página ocmRestApi, selecione Pontos Finais.
2. Na seção AppLinks, selecione Criar Applink de Pasta.
3. Clique no botão Solicitar.
4. Clique no botão Adicionar Parâmetro de Consulta Dinâmica. Na seção Parâmetros de Consulta Dinâmica, no campo Nome, informe o valor como assignedUser.
5. Clique no botão Parâmetro de Consulta Estática. Na seção Parâmetros de Consulta Estática, no campo Nome, informe o valor como função.
  No campo Valor, informe o valor como um colaborador. Clique em OK para salvar o parâmetro de consulta estática.
Para adicionar a guia Documentos à página Detalhes da Solicitação de Serviço:

Descrição da ilustração work-orders.png
1. Selecione Aplicativos Web no menu de navegação esquerdo.
2. Na lista Aplicativos Web, selecione dcs, service-request-detail e, em seguida, service-request-detail-start.
3. Na página de início de detalhes da solicitação de serviço, selecione a guia Designer de Página. Clique no botão Design no lado superior direito.
4. Na página Designer de Páginas, selecione Ordens de Serviço.
5. Selecione o pai <li> na seção Componentes à esquerda da Página de Design que tem o Bind Text [[$app…serviceRequestDetail_workOrders]].
6. Clique em <li> e selecione Copiar.
7. Clique com botão direito do mouse no elemento <li> novamente e selecione Colar/Após.
8. No novo elemento <li> que acabou de ser criado, selecione o elemento Bind Text.
  
  Descrição da ilustração traduzível-string.png
9. No painel de propriedades no lado direito, selecione o ícone Tornar String Traduzível (aparece como um mundo). Na caixa de diálogo String Traduzível, informe o valor Documentos no campo String.
  No campo Chave, digite serviceRequestDetail_documents e clique em Salvar.
Para modificar o código da página Detalhes da Solicitação de Serviço:

Descrição da ilustração oj-bind.png
1. Selecione o botão Código no lado superior direito da página Designer de Página.
2. Para formatar o código, clique com o botão direito do mouse no código e selecione Formatar Documento.
3. Procure serviceRequestDetail_documents no código.
4. Substitua o elemento <li> pai id por odcs-documents-tab.
5. Na parte inferior da página, logo após o segundo último elemento </oj-bind-if>, adicione o seguinte código:
  <div id="OCMEmbeddedUI" style="display:none"> </div>
6. Para formatar o documento mais uma vez, clique com o botão direito do mouse no código e selecione Formatar Documento.
Para adicionar um evento à página Detalhes da Solicitação de Serviço:

Descrição do diagrama da ilustração -callfunc.png
1. Clique no botão Design no lado superior direito da página Designer de Página.
2. Selecione a Barra de Guias com a guia Documentos recém-adicionada na página do designer.
3. Selecione a guia Eventos no canto superior direito da seção Propriedades. Clique no botão Novo Evento e selecione Seleção Em no menu suspenso.
4. No TabBarSelectionChangeChain (que acabou de ser criado), arraste e solte uma Função de Chamada JS da seção Ações à esquerda da página para o ícone + na cadeia.
5. Clique no link Criar ao lado do Nome da Função na seção Propriedades à direita da página.
  No campo Nome da Função, informe o valor como displayEmbeddedUI. Clique em Criar.
  Clique no link Ir para Função do Módulo. Substitua toda a função displayEmbeddedUI (incluindo os comentários) pelo seguinte 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";
  }
};
```
  Descrição da ilustração javascript-code.png
6. Para formatar o documento, clique com o botão direito do mouse no código e selecione Formatar Documento.
Para designar a variável de seleção à função displayEmbeddedUI:

Descrição da ilustração Assign-para.png
1. Selecione a guia Designer de Página na parte superior da página.
2. Selecione a Barra de Guias e clique no link TabBarSelectionChangeChain nas propriedades Eventos no lado direito da página.
3. Na página Diagrama, selecione a função de chamada displayEmbeddedUI.
4. Clique no link Designar à direita dos Parâmetros de Entrada em Propriedades à direita da página.
5. Na caixa de diálogo Parâmetros de Atribuição de Entrada, no lado esquerdo da página, clique em Origens, Cadeia de Ações e, em seguida, em Variáveis. No menu Variáveis, arraste a opção seleção para exibir dentro de Parâmetros (em Destino) no lado direito da página.
  Na seção do código de exibição na parte inferior da página, adicione o seguinte código:
```
$variables.selection === 'odcs-documents-tab'
```
  Clique no botão Salvar.
Para adicionar o campo ID da pasta OCM aos serviços Web Obter Solicitação de Serviço:

Descrição da ilustração get-ser-req.png
1. Selecione a guia Event Listeners na parte superior da página.
2. Na seção Listeners de Eventos de Ciclo de Vida vbEnter, selecione o link Ir para Cadeia de Ações à direita de LoadServiceRequestAction.
3. Selecione a etapa Chamar REST para crmRestApi/get_serviceRequests.
4. Clique no link crmRestApi/get_serviceRequest na seção Pontos Finais das Propriedades no lado direito da página.
  
  Descrição da ilustração get-ser-req-source.png
5. Na página crmRestApi, selecione a guia Pontos Finais e clique no botão Resposta.
6. Selecione o link definição de tipo de dados na parte inferior da página.
7. Procure a seguinte seção: oracle_apps_crm_service_svcMgmt_srMgmt_srMgmtService_view_ServiceRequestVO-updatableFields
  
  Observação:
  Haverá várias referências a essa variável, mas queremos a seção em que ela está sendo definida.
8. Adicione o seguinte código na subseção de propriedades na seção encontrada acima:
```
"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 formatar o documento, clique com o botão direito do mouse no código e selecione Formatar Documento.
Para adicionar o campo ID da pasta OCM à Obter Resposta da Solicitação de Serviço:

Descrição da ilustração get-ser-req-response.png
1. Na página inicial da solicitação de serviço, selecione a guia Tipos.
2. Passe o mouse sobre { } getServiceRequestsResponse e selecione o link Editar do ponto de extremidade à direita.
3. Verifique a variável OCMFolderId_c recém-criada na lista Estrutura do Ponto Final.
4. Clique no botão Finalizar.
Para adicionar o campo ID da pasta OCM à Ação Obter Solicitação de Serviço:

Descrição da ilustração get-ser-req-action.png
1. Na página inicial de solicitação de serviço, selecione a guia Listeners de Eventos e selecione vbEnter na parte superior da página.
2. Na seção Listeners de Eventos de Ciclo de Vida, vbEnter, selecione o link Ir para Cadeia de Ações à direita do LoadServiceRequestAction.
3. Selecione a etapa Chamar REST para crmRestApi/get_serviceRequests.
4. Na seção Parâmetros de Entrada das Propriedades no lado direito da página, selecione o link campos.
  
  Descrição da ilustração Assign-input-para.png
5. Na caixa de diálogo Atribuir Parâmetros de Entrada, selecione Destino, Parâmetros, uriParams e, em seguida, campos no lado direito da caixa de diálogo.
  Na parte inferior de uriParams.fields, adicione ",OCMFolderId_c" sem as aspas logo após SeverityCd . Clique no botão Salvar.
Para adicionar a etapa Criar OCM AppLink à cadeia de ações LoadServiceRequestAction:

Descrição da ilustração loadservicerequestaction.png
1. Na página Diagrama, arraste uma nova etapa Chamar REST do lado esquerdo da página Ações e solte na linha pontilhada abaixo da etapa Designar Variáveis do originalServiceRequestRecord na parte inferior da página.
  
  Observação:
  O fluxo não ficará correto para mais algumas etapas.
  
  Descrição da ilustração select-endpoint.png
2. Nas Propriedades no lado direito da página, clique no link Selecionar à direita de Ponto Final.
3. Na caixa de diálogo Selecionar Ponto Final, selecione Serviços, ocmRestApi, Applinks e, em seguida, POST /[..]/folder/{folderId}.
  Clique no botão Selecionar.
Para atribuir variáveis de entrada na etapa AppLink:

Descrição da ilustração applink.png
1. Selecione o link folderId na seção Parâmetros de Entrada do painel Propriedades.
  
  Descrição da ilustração username.png
2. Arraste OCMFolderId_c de Origens, Cadeia de Ações, Resultados, loadServiceRequets e corpo à esquerda da página e solte no folderId (em Destino, Parâmetros e uriParams) à direita da página.
3. Arraste userName de Origens, Aplicativo, Sistema e Usuário à esquerda da página e solte no assignedUser em Destino, Parâmetros, uriParams.
4. Selecione o botão Salvar.
Para atualizar o resultado da notificação de falha da etapa AppLink:

Descrição da ilustração step-failure.png
1. Clique com o botão direito do mouse na etapa Disparar Notificação logo abaixo da etapa Chamar REST para ocmRestApi/postDocumentsApi1_2ApplinksFolderFolderId e selecione a opção Ir para Código no menu drop-down.
  
  Descrição da ilustração diag-code.png
2. Adicione o seguinte código logo abaixo da seção de parâmetros do fireNotification:
```
,
"outcomes": { 
  "success": "showDefaultCursor"
}
```
3. Para formatar o documento, clique com o botão direito do mouse no código e selecione Formatar Documento.
Para adicionar a etapa de criação da IU incorporada do OCM à cadeia de ações LoadServiceRequestAction:

Descrição da ilustração create-embui.png
1. Clique no botão Design no canto superior direito da página para levá-lo de volta à cadeia de ações LoadServiceRequestAction.
2. Logo abaixo da etapa Chamar REST para o ocmRestApi/postDocumentsApi1_2ApplinksFolderFolderId, arraste e solte na linha pontilhada uma nova etapa Função de Chamada das Ações no lado esquerdo da página.
  
  Observação:
  Nesse ponto, o fluxo deve ficar muito mais limpo e a nova Função de Chamada deve estar no sucesso da etapa Chamar REST do ocmRestApi/ postDocumentsApi1_2ApplinksFolderFolderId.
3. Selecione o link Criar à direita do campo Nome da Função nas Propriedades no lado direito da página.
  No campo Nome da Função, informe o valor como createOCMEmbeddedUI.
4. Clique no botão Criar.

Para adicionar o código necessário para criar o link incorporado do OCM:

A descrição de embed-link.png é exibida a seguir
Descrição da ilustração embed-link.png

Clique no link Ir para Função do Módulo nas Propriedades no lado direito da página.

Descrição da ilustração js-code.png

Substitua toda a função createOCMEmbeddedUI (incluindo os comentários) pelo seguinte 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 a biblioteca da interface do usuário do OCM no código a ser usado pela função createOCMEmbeddedUI:

Descrição da ilustração ui-library.png
1. Vá até a primeira linha do código. Adicione o seguinte código antes de ojs/ojfilepicker:
```
'//static.ocecdn.oraclecloud.com/cdn/cec/api/oracle-ce-ui-2.12.js',
```
  Observação:
  Ignore o aviso de dependência.
2. Adicione a variável associada à biblioteca OracleCEUI na function() na mesma linha.
3. Para formatar o documento, clique com o botão direito do mouse no código e selecione Formatar Documento.
Para designar a variável de seleção à função displayEmbeddedUI:

Descrição da seleção da ilustração -vari.png
1. Selecione a guia Ações na parte superior da página.
2. Selecione novamente LoadServiceRequestAction no menu drop-down apenas à direita do link Cadeias de Ação no canto superior esquerdo da página, caso ainda não tenha sido selecionado.
3. Selecione a etapa Função de Chamada para createOCMEmbeddedUI que acabou de ser criada.
4. Selecione o link Designar à direita dos Parâmetros de Entrada em Propriedades.
  
  Descrição da ilustração body-para.png
5. Na caixa de diálogo Atribuir Parâmetros de Entrada, arraste o corpo de Origem, Cadeia de Ações, Resultados e callRestPostDocumentsApi12ApplinksFolderFolderId à esquerda da página para appLink (em Destino, Parâmetros) no lado direito da página.
  Clique em Salvar.
Para verificar se todas as alterações estão funcionando conforme esperado:

Descrição da ilustração verify.png
1. Selecione a guia Designer de Página na parte superior da página.
2. Clique no botão Ativo no canto superior direito da página.
3. Selecione a guia Documentos (selecione outra guia e selecione novamente a guia Documentos se ela já tiver sido selecionada).
4. Você deverá ver a pasta OCM relacionada para a SR atual na página.
  
  Observação:
  Se a IU incorporada do OCM não for carregada conforme esperado, corrija-a antes de continuar. Verifique se há erros na console do navegador e no tráfego de rede. Além disso, consulte a parte inferior do Designer de Página para ver se há erros na página. Em caso afirmativo, clique neles para obter mais detalhes.