Oracle Content Management 集成

在最后一步中，您将能够通过 OCM 文档协作来扩展数字客户服务应用程序。此操作需要：

创建 OCM 文档 REST API 服务
将“文档”选项卡添加到“服务请求详细信息”页面
将 OCM 文件夹 ID 变量添加到 Visual Builder 获取服务请求 Web 服务响应中
更新加载服务请求操作链
更新“服务请求详细信息”页以显示新“文档”选项卡中的 OCM 嵌入式 UI

要创建 OCM REST API Web 服务 JSON 文件，请在浏览器中输入以下 URL：https://docs.oracle.com/en/cloud/paas/content-cloud/rest-api-documents/swagger.json

图 ocmrestapi.png 的说明

右键单击浏览器页面，选择保存选项以将内容保存在 ocmRestApi.json 文件中。
要创建 OCM 服务，请执行以下操作：

插图 create-ser-conn.png 的说明
1. 从左侧导航菜单中选择服务，然后选择服务连接。
2. 在“服务连接”页上，选择服务部分右上角的创建图标。
  从下拉菜单中选择服务连接选项。
3. 从源选项中选择按规范定义。
4. 在“Create Service Connection（创建服务连接）”页面上，执行以下操作：
  1. 在“服务名称” 字段中，将服务的名称指定为 ocmRestApi 。
  2. 从 API 类型下拉菜单中选择 OpenAPI/Swagger 。
  3. 在“服务规范”部分中，选择文档选项。
  4. 选择上面创建的 ocmRestApi.json 文件或将其拖放到“服务规范”部分的拖放区域中。
  5. 单击创建按钮可保存连接。
要更新 OCM 服务器连接，请执行以下操作：

图 edit-server3prof.png 的说明
1. 在 ocmRestApi 页上，选择服务器。
2. 在“服务器”页上，选择无说明连接最右侧的编辑图标。
3. 在 "Edit Server"（编辑服务器）对话框中，执行以下操作：
  1. 在实例 URL 字段中，指定将在此集成中使用的 OCM 服务器的 URL。例如 https://oceserver.cec.ocp.oraclecloud.com。
  2. 从 Authentication 下拉菜单中，选择 OAuth 2.0 Resource Owner Password Credentials 选项。
  3. 单击用户名字段右侧的编辑图标。
    在“用户身份证明”对话框中，输入 OCM 集成管理员的用户名和密码。这应该与在创建 Fusion 服务请求应用程序集成期间使用的集成用户相同。例如，IntegrationAdmin 。
  4. 单击 Save 按钮以保存用户名用户凭证。
  5. 单击客户机 ID 字段右侧的编辑图标。
  6. 将在创建 OCM IDCS 机密应用程序期间返回的客户端 ID 和客户端密钥值输入到客户端 ID 和客户端密钥字段中。例如， Client ID：c585b2d3e97c40e491ca99112281e36d 和 Client Secret：768b9513-658e-4854-bac7-2fe72d19011f 。
  7. 单击保存按钮以保存客户机 ID 用户凭证。
  8. 输入在创建 OCM IDCS 机密应用程序期间返回的范围 URL 值。例如，https://BD2F184D9D2344CB8134FCD4CBFF7DFD.cec.ocp.oraclecloud.com:443/urn:opc:cec:all
  9. 在令牌 URL 字段中，输入值。可以通过将 /oauth2/v1/token 附加到 OCM IDCS 服务器基本 URL 来生成此值。例如， https://idcs.identity.oraclecloud.com。
  10. 在“Connection Type（连接类型）”部分中，选择“Always use proxy（始终使用代理）”，而不考虑下拉菜单中的 CORS 支持。
  11. 单击主页上的 Save 按钮以保存服务器更改。
要设置特定的 AppLink 端点参数：

插图 applink 的说明 -endpoints.png
1. 在 ocmRestApi 页上，选择端点。
2. 在 AppLinks 部分中，选择创建文件夹应用程序链接。
3. 单击请求按钮。
4. 单击添加动态查询参数按钮。在“动态查询参数”部分的名称字段中，输入值 assignedUser 。
5. 单击静态查询参数按钮。在“静态查询参数”部分的名称字段中，输入值 role 。
  在值字段中，输入贡献者作为值。单击确定保存静态查询参数。
要将“文档”选项卡添加到“服务请求详细信息”页面，请执行以下操作：

说明工作 -orders.png
1. 从左侧导航菜单中选择 Web 应用程序。
2. 从“Web 应用程序”列表中，依次选择 dcs 、 service-request-detail 和 service-request-detail-start 。
3. 在 service-request-detail-start 页上，选择“页设计器”选项卡。单击右上方的 Design 按钮。
4. 在“页面设计器”页面上，选择工单。
5. 在具有 Bind Text [[$app…serviceRequestDetail_workOrders]] 的设计页左侧的组件部分中选择 <li> 父项。
6. 右键单击 <li> 元素，然后选择复制。
7. 再次右键单击 <li> 元素，然后选择粘贴/之后。
8. 在刚刚创建的新 <li> 元素中，选择 Bind Text 元素。
  
  插图可翻译的说明 -string.png
9. 在右侧的属性面板中，选择使字符串可翻译图标（看起来像一个世界）。在“可翻译字符串”对话框的字符串字段中输入值文档。
  在 Key（密钥）字段中，输入 serviceRequestDetail_documents ，然后单击 Save（保存）。
要修改“服务请求详细信息”页面代码，请执行以下操作：

插图 oj-bind.png 的说明
1. 选择“页面设计器”页面右上角的代码按钮。
2. 要格式化代码，请右键单击代码，然后选择格式化文档。
3. 在代码中搜索 serviceRequestDetail_documents 。
4. 将父 <li> 元素 id 替换为 odcs-documents-tab。
5. 在页面底部紧跟最后第二个 </oj-bind-if> 元素之后，添加以下代码：
  <div id="OCMEmbeddedUI" style="display:none"> </div>
6. 要再次设置文档格式，请右键单击代码，然后选择设置文档格式。
要将事件添加到“服务请求详细信息”页面，请执行以下操作：

图示说明 -callfunc.png
1. 单击“页面设计器”页面右上方的设计按钮。
2. 从设计器页中选择带有新添加的“文档”选项卡的选项卡栏。
3. 选择“属性”部分右上角的“事件”选项卡。单击新建事件按钮，然后从下拉菜单中选择选择时。
4. 在 TabBarSelectionChangeChain（刚创建的）中，将 JS 调用函数从页面左侧的“操作”部分拖放到链中的 + 图标上。
5. 单击页面右侧“属性”部分中的函数名称旁边的创建链接。
  在函数名称字段中，输入值 displayEmbeddedUI 。单击创建。
  单击转到模块函数链接。将整个 displayEmbeddedUI 函数（包括注释）替换为以下代码：
```
/** * 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";
  }
};
```
  插图 javascript-code.png 的说明
6. 要设置文档格式，请右键单击代码，然后选择设置文档格式。
要将选择变量分配给 displayEmbeddedUI 函数：

插图分配的说明 -para.png
1. 在页面的上部选择“页面设计器”选项卡。
2. 选择选项卡栏，然后单击页面右侧的 Events 属性中的 TabBarSelectionChangeChain 链接。
3. 在“图表”页上，选择 displayEmbeddedUI 调用函数。
4. 单击页面右侧“属性”中输入参数右侧的分配链接。
5. 在页面左侧的“输入分配参数”对话框中，依次单击源、操作链和变量。在变量菜单中，将选择选项拖动到页面右侧参数（位于目标下）内的显示中。
  在页面底部的显示代码部分中，添加以下代码：
```
$variables.selection === 'odcs-documents-tab'
```
  单击保存按钮。
要将 OCM 文件夹 ID 字段添加到获取服务请求 Web 服务中，请执行以下操作：

图中 get-ser-req.png 的说明
1. 在页面的上部选择“事件监听程序”选项卡。
2. 在生命周期事件监听程序 vbEnter 部分中，选择 LoadServiceRequestAction 右侧的转到操作链链接。
3. 为 crmRestApi/get_serviceRequests 选择调用 REST 步骤。
4. 单击页面右侧“属性”的“端点”部分中的 crmRestApi/get_serviceRequest 链接。
  
  图中 get-ser-req-source.png 的说明
5. 在 crmRestApi 页上，选择 "Endpoints"（端点）选项卡，然后单击 Response（响应）按钮。
6. 选择页面底部的数据类型定义链接。
7. 搜索以下部分：oracle_apps_crm_service_svcMgmt_srMgmt_srMgmtService_view_ServiceRequestVO-updatableFields
  
  注：
  有多个对此变量的引用，但我们希望定义该变量的部分。
8. 将以下代码添加到上述部分的属性子部分中：
```
"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. 要设置文档格式，请右键单击代码，然后选择设置文档格式。
要将 OCM 文件夹 ID 字段添加到“获取服务请求响应”中，请执行以下操作：

图中 get-ser-req-response.png 的说明
1. 在 service-request-detail-start 页上，选择“类型”选项卡。
2. 将鼠标悬停在 { } getServiceRequestsResponse 上，然后选择右侧的从端点编辑链接。
3. 从 Endpoint Structure 列表中检查新创建的 OCMFolderId_c 变量。
4. 单击完成按钮。
要将“OCM 文件夹 ID”字段添加到“获取服务请求操作”：

图中 get-ser-req-action.png 的说明
1. 在 service-request-detail-start 页上，选择 "Event Listeners"（事件监听程序）选项卡，然后在页面的上半部分选择 vbEnter 。
2. 在“生命周期事件监听程序”vbEnter 部分中，选择 LoadServiceRequestAction 右侧的转至操作链链接。
3. 为 crmRestApi/get_serviceRequests 选择调用 REST 步骤。
4. 在页面右侧属性的“输入参数”部分中，选择字段链接。
  
  插图 assign-input-para.png 的说明
5. 在“分配输入参数”对话框中，依次选择对话框右侧的目标、参数、uriParams 和字段。
  在底部的 uriParams.fields 中，在 SeverityCd 后面添加 ",OCMFolderId_c"，不带引号。单击保存按钮。
要将“创建 OCM AppLink”步骤添加到 LoadServiceRequestAction 操作链中，请执行以下操作：

图 loadservicerequestaction.png 的说明
1. 在“图表”页面上，从页面左侧的操作中拖动一个新的调用 REST 步骤，然后放到页面底部的 originalServiceRequestRecord 的分配变量步骤下方的虚线中。
  
  注：
  此流在执行更多步骤时将不合适。
  
  插图 select-endpoint.png
2. 在页面右侧的“属性”中，单击端点右侧的选择链接。
3. 在 "Select Endpoint"（选择端点）对话框中，依次选择 Services（服务）、ocmRestApi 、 Applinks（应用程序链接）和 POST /[..]/folder/{folderId} 。
  单击选择按钮。
要将输入变量分配给 AppLink 步骤：

图 applink.png 的说明
1. 在“属性”窗格的输入参数部分中选择 folderId 链接。
  
  图 username.png 的说明
2. 将 OCMFolderId_c 从页面左侧的源、操作链、结果、loadServiceRequets 和正文拖动到页面右侧的 folderId （在目标、参数和 uriParams 下）。
3. 将 userName 从页面左侧的源、应用程序、系统和用户中拖动到 Target 、 Parameters 、uriParams 下的 assignedUser 中。
4. 选择保存按钮。
要更新 AppLink 步骤失败通知的结果，请执行以下操作：

图示步骤的说明 - failure.png
1. 右键单击 ocmRestApi/postDocumentsApi1_2ApplinksFolderFolderId 的 Call REST 步骤正下方的 Fire Notification 步骤，然后从下拉菜单中选择 Go to Code 选项。
  
  图示说明 -code.png
2. 在 fireNotification 的参数部分正下方添加以下代码：
```
,
"outcomes": { 
  "success": "showDefaultCursor"
}
```
3. 要设置文档格式，请右键单击代码并选择设置文档格式。
要将“创建 OCM 嵌入式 UI”步骤添加到 LoadServiceRequestAction 操作链中，请执行以下操作：

图创建说明 -embui.png
1. 单击页面右上角的设计按钮可返回到 LoadServiceRequestAction 操作链。
2. 在 ocmRestApi/postDocumentsApi1_2ApplinksFolderFolderId 的 Call REST 步骤下方，从页面左侧的操作向虚线拖放一个新的调用函数步骤。
  
  注：
  此时，该流应看起来更干净，新的调用函数应是 ocmRestApi/ postDocumentsApi1_2ApplinksFolderFolderId 的调用 REST 步骤的成功。
3. 选择页面右侧“属性”中函数名称字段右侧的创建链接。
  在函数名称字段中，输入值 createOCMEmbeddedUI 。
4. 单击创建按钮。

要添加创建 OCM 嵌入链接所需的代码：

后面是 embed-link.png 的说明
插图嵌入的说明 -link.png

单击页面右侧“属性”中的转到模块函数链接。

插图 js-code.png 的说明

将整个 createOCMEmbeddedUI 函数（包括注释）替换为以下代码：

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

要将 OCM UI 库包含在 createOCMEmbeddedUI 函数要使用的代码中，请执行以下操作：

插图 ui-library.png 的说明
1. 转到代码的第一行。在 ojs/ojfilepicker 之前添加以下代码：
```
'//static.ocecdn.oraclecloud.com/cdn/cec/api/oracle-ce-ui-2.12.js',
```
  注：
  忽略相关性警告。
2. 在同一行的 function() 中添加与库 OracleCEUI 关联的变量。
3. 要设置文档格式，请右键单击代码并选择设置文档格式。
要将选择变量分配给 displayEmbeddedUI 函数：

图解选择说明 -vari.png
1. 选择页面上部的“操作”选项卡。
2. 如果尚未选择 LoadServiceRequestAction，请从页面左上角操作链链接右侧的下拉菜单中重新选择它。
3. 为刚创建的 createOCMEmbeddedUI 选择调用函数步骤。
4. 选择属性中输入参数右侧的分配链接。
  
  插图正文的说明 -para.png
5. 在“分配输入参数”对话框中，将页面左侧的源、操作链、结果和 callRestPostDocumentsApi12ApplinksFolderFolderId 中的正文拖到页面右侧的 appLink （在目标下，参数下）。
  单击保存。
要验证所有更改是否按预期方式工作，请执行以下操作：

图 verify.png 的说明
1. 在页面的上部选择“页面设计器”选项卡。
2. 单击页面右上角的实时按钮。
3. 选择“文档”选项卡（选择其他选项卡，如果已选择“文档”选项卡，则重新选择该选项卡）。
4. 您应在此页上看到当前 SR 的相关 OCM 文件夹。
  
  注：
  如果 OCM 嵌入式 UI 未按预期加载，请先修复，然后再继续。检查浏览器控制台和网络通信是否存在任何错误。此外，查看页面设计器的底部，查看页面上是否存在任何错误。如果是这样，请单击它们以获取更多详细信息。