Oracle Content Management 整合

在此最後一步中，您將能夠使用 OCM 文件協作擴充 Digital Customer Service 應用程式。這需要：

建立 OCM 文件 REST API 服務
新增文件頁籤至服務要求詳細資訊頁面
將 OCM 資料夾 ID 變數新增至 Visual Builder Get Service Request 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. 在「編輯伺服器」對話方塊中，執行下列動作：
  1. 在執行處理 URL 欄位中，指定將用於此整合的 OCM 伺服器 URL。例如，https://oceserver.cec.ocp.oraclecloud.com。
  2. 從認證下拉式功能表中，選取 OAuth 2.0 資源擁有者密碼證明資料選項。
  3. 按一下使用者名稱欄位右側的編輯圖示。
    在「使用者證明資料」對話方塊中，輸入 OCM 整合管理員的使用者名稱和密碼。這應該與建立 Fusion 服務要求應用程式整合時使用的整合使用者相同。例如，IntegrationAdmin 。
  4. 按一下儲存按鈕以儲存「使用者名稱使用者認證」。
  5. 按一下用戶端 ID 欄位右側的編輯圖示。
  6. 輸入在建立 OCM IDCS 機密應用程式時，於從屬端 ID 和從屬端密碼欄位中傳回的從屬端 ID 和從屬端密碼值。例如，從屬端 ID：c585b2d3e97c40e491ca99112281e36d 和從屬端密碼：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. 在「連線類型」區段中，無論 CORS 支援是從下拉式功能表中選取「一律使用代理主機」。
  11. 按一下主頁面上的儲存按鈕，以儲存伺服器變更。
設定特定 AppLink 端點參數：

applink-endpoints.png 圖解說明
1. 在 ocmRestApi 頁面上，選取端點。
2. 在 AppLinks 區段中，選取建立資料夾應用程式連結。
3. 按一下要求按鈕。
4. 按一下新增動態查詢參數按鈕。在「動態查詢參數」區段的名稱欄位中，輸入 assignedUser 的值。
5. 按一下靜態查詢參數按鈕。在「靜態查詢參數」區段的名稱欄位中，將值輸入為角色。
  在「值」欄位中，以提供者的方式輸入值。按一下確定，儲存靜態查詢參數。
將「文件」頁籤新增至「服務要求詳細資料」頁面：

工作說明 - orders.png
1. 從左側導覽功能表中選取 Web 應用程式。
2. 從「Web 應用程式」清單中，選取 dcs 、 service-request-detail ，然後選取 service-request-detail-start 。
3. 在服務要求詳細資料開始頁面上，選取「頁面設計工具」頁標。按一下右上方的設計按鈕。
4. 在「頁面設計工具」頁面上，選取工單。
5. 在具有 Bind Text [[$app…serviceRequestDetail_workOrders]] 之設計頁面左側的元件區段中選取 <li> 父項。
6. 在 <li> 元素上按一下滑鼠右鍵，然後選取複製。
7. 重新按一下 <li> 元素，然後選取貼上 / 之後。
8. 在剛才建立的新 <li> 元素中，選取 Bind Text 元素。
  
  可翻譯的描述 -string.png
9. 在右邊的特性面板中，選取讓字串可轉譯圖示 (看起來像世界)。在「可翻譯的字串」對話方塊中，將文件值輸入字串欄位中。
  在鍵值欄位中，輸入 serviceRequestDetail_documents ，然後按一下儲存。
若要修改「服務要求詳細資料」頁面代碼：

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. 選取頁籤列，然後按一下頁面右側之事件特性中的 TabBarSelectionChangeChain 連結。
3. 在「圖表」頁面上，選取 displayEmbeddedUI 呼叫函數。
4. 在頁面右側的「特性」中，按一下輸入參數右側的指派連結。
5. 在「輸入指派參數」對話方塊的左側，按一下來源、動作鏈，然後按一下變數。在變數功能表中，將選擇選項拖曳至頁面右側之參數 (在目標底下) 內的 display 中。
  在頁面底端的顯示程式碼區段中，新增下列程式碼：
```
$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 頁面上，選取「端點」頁籤，然後按一下回應按鈕。
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. 從端點結構清單中檢查新建立的 OCMFolderId_c 變數。
4. 按一下完成 (Finish) 按鈕。
將 OCM 資料夾 ID 欄位新增至「取得服務要求動作」：

get-ser-req-action.png 圖解說明
1. 在服務要求詳細資料開始頁面上，選取「事件監聽器」頁籤，然後選取頁面上方的 vbEnter 。
2. 在「生命週期事件監聽器」的 vbEnter 區段中，選取 LoadServiceRequestAction 右側的前往動作鏈連結。
3. 選取 crmRestApi/get_serviceRequests 的呼叫 REST 步驟。
4. 在頁面右側的「特性」的「輸入參數」區段中，選取欄位連結。
  
  Assign-input-para.png 圖解說明
5. 在「指派輸入參數」對話方塊中，選取對話方塊右側的目標、參數、uriParams ，然後選取欄位。
  在底部的 uriParams.fields 中，新增 ",OCMFolderId_c"，但不要加上引號，就在 SeverityCd 之後。按一下儲存按鈕。
將 Create OCM AppLink 步驟新增至 LoadServiceRequestAction 動作鏈結：

loadservicerequestaction.png 圖解說明
1. 在「圖表」頁面上，從頁面左側的動作拖曳新的呼叫 REST 步驟，然後放到頁面底端之 originalServiceRequestRecord 步驟下方的虛線指派變數。
  
  備註：
  流程看起來不會像是幾個步驟。
  
  select-endpoint.png 說明
2. 在頁面右側的「特性」中，按一下端點右側的選取連結。
3. 在「選取端點」對話方塊中，依序選取服務、ocmRestApi 、應用程式連結及 POST /[..]/folder/{folderId} 。
  按一下選取按鈕。
將輸入變數指派給 AppLink 步驟：

applink.png 圖解說明
1. 在「特性」窗格的輸入參數區段中，選取 folderId 連結。
  
  username.png 圖解說明
2. 將 OCMFolderId_c 從頁面左側的來源、動作鏈、結果、loadServiceRequets 及主體拖曳至 folderId (在目標、參數以及 uriParams 之下)。
3. 將 userName 從頁面左側的來源、應用程式、系統及使用者拖曳至目標、參數、uriParams 底下的 assignedUser 。
4. 選取儲存按鈕。
更新 AppLink 步驟失敗通知的結果：

步驟的描述 -failure.png
1. 在 ocmRestApi/postDocumentsApi1_2ApplinksFolderFolderId 之呼叫 REST 步驟下方的觸發通知步驟上按一下滑鼠右鍵，然後從下拉式功能表中選取前往代碼選項。
  
  diag 圖解說明 - code.png
2. 在 fireNotification 的參數區段下方新增下列程式碼：
```
,
"outcomes": { 
  "success": "showDefaultCursor"
}
```
3. 若要格式化文件，請在程式碼上按一下滑鼠右鍵，然後選取格式化文件。
將建立 OCM 內嵌 UI 步驟新增至 LoadServiceRequestAction 動作鏈結：

create-embui.png 圖解說明
1. 按一下頁面右上方的設計按鈕，將您帶回 LoadServiceRequestAction 動作鏈。
2. 在 ocmRestApi/postDocumentsApi1_2ApplinksFolderFolderId 的呼叫 REST 步驟下方，從頁面左側的動作步驟拖放至虛線的新呼叫函數步驟。
  
  備註：
  此時，流程看起來更乾淨，新的呼叫函數應該就是在 ocmRestApi/ postDocumentsApi1_2ApplinksFolderFolderId 的呼叫 REST 步驟成功。
3. 在頁面右側的「特性」中，選取函數名稱欄位右側的建立連結。
  在函數名稱欄位中，將值輸入 createOCMEmbeddedUI 。
4. 按一下建立按鈕。

新增建立 OCM 內嵌連結所需的程式碼：

按一下頁面右側「特性」中的前往模組函數連結。

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 未如預期載入，請先修正後再繼續。檢查瀏覽器主控台和網路流量是否有任何錯誤。此外，請查看「頁面設計工具」的底端，查看頁面上是否有任何錯誤。若是如此，請按一下它們以取得更多詳細資料。