Oracle Content Managementの統合

この最後のステップでは、OCMドキュメント・コラボレーションを使用してDigital Customer Serviceアプリケーションを拡張できます。これには次の対応が必要です。

OCMドキュメントREST APIサービスの作成
「サービス・リクエストの詳細」ページへの「ドキュメント」タブの追加
Visual Builderのサービス・リクエストの取得Webサービス・レスポンスへのOCMフォルダID変数の追加
サービス要求のロード処理チェーンの更新
新しい「ドキュメント」タブ内に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. サービス接続の作成ページで、次の手順を実行します。
  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 Resource Owner Password Credentialsオプションを選択します。
  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」フィールドに値を入力します。この値は、OCM IDCSサーバーのベースURLに/oauth2/v1/tokenを追加することで生成できます。たとえば、 https://idcs.identity.oraclecloud.comです。
  10. 「接続タイプ」セクションで、「CORSのサポートに関係なく常にプロキシを使用」をドロップダウン・メニューから選択します。
  11. メイン・ページの「保存」ボタンをクリックして、サーバーの変更を保存します。
特定のAppLinkエンドポイント・パラメータを設定するには:

図applink- endpoints.pngの説明
1. ocmRestApiページで、「エンドポイント」を選択します。
2. AppLinksセクションで、「フォルダ・アプリケーション・リンクの作成」を選択します。
3. 「リクエスト」ボタンをクリックします。
4. 「動的問合せパラメータの追加」ボタンをクリックします。「動的問合せパラメータ」セクションの「名前」フィールドに、assignedUserの値を入力します。
5. 「静的問合せパラメータ」ボタンをクリックします。「静的問合せパラメータ」セクションの「名前」フィールドに、roleとして値を入力します。
  「値」フィールドに、値をコントリビュータとして入力します。「OK」をクリックして静的問合せパラメータを保存します。
「サービス・リクエスト詳細」ページに「ドキュメント」タブを追加するには:

図の作業の説明- orders.png
1. 左側のナビゲーション・メニューから「Webアプリケーション」を選択します。
2. 「Webアプリケーション」リストから、dcs、service- request- detail、service- request- detail- startの順に選択します。
3. service- request- detail- startページで、「ページ・デザイナ」タブを選択します。右上にある「設計」ボタンをクリックします。
4. ページ・デザイナ・ページで、「ワーク・オーダー」を選択します。
5. Bind Text [[$app...serviceRequestDetail_workOrders]]を持つ「設計ページ」の左側にある「コンポーネント」セクションで、<li>親を選択します。
6. <li>要素を右クリックして、「コピー」を選択します。
7. <li>要素を再度右クリックし、「貼付け/後」を選択します。
8. 作成した新しい<li>要素で、Bind Text要素を選択します。
  
  図translatable- string.pngの説明
9. 右側のプロパティ・パネルで、「文字列を翻訳可能にする」アイコン(世界のように見える)を選択します。「翻訳可能文字列」ダイアログで、「文字列」フィールドに値「ドキュメント」を入力します。
  「キー」フィールドにserviceRequestDetail_documentsと入力し、「保存」をクリックします。
「サービス・リクエストの詳細」ページ・コードを変更するには:

図oj- bind.pngの説明
1. ページ・デザイナ・ページの右上にある「コード」ボタンを選択します。
2. コードの書式を設定するには、コードを右クリックして、「ドキュメントの書式化」を選択します。
3. コードでserviceRequestDetail_documentsを検索します。
4. 親の<li>要素idをodcs-documents-tabに置き換えます。
5. ページ下部の2番目の最後の</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関数に割り当てるには:

図assign- para.pngの説明
1. ページ上部の「ページ・デザイナ」タブを選択します。
2. タブ・バーを選択し、ページの右側にある「イベント」プロパティでTabBarSelectionChangeChainリンクをクリックします。
3. 「ダイアグラム」ページで、displayEmbeddedUIコール関数を選択します。
4. ページの右側にある「プロパティ」の「入力パラメータ」の右側にある「割当て」リンクをクリックします。
5. ページの左側にある「入力割当てパラメータ」ダイアログで、「ソース」、「アクション・チェーン」、「変数」の順にクリックします。「変数」メニューで、ページの右側にある「パラメータ」(「ターゲット」の下)内の表示に選択オプションをドラッグします。
  ページの下部にある表示コード・セクションで、次のコードを追加します。
```
$variables.selection === 'odcs-documents-tab'
```
  「保存」ボタンをクリックします。
「サービス・リクエストの取得」WebサービスにOCMフォルダIDフィールドを追加するには:

図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. 「完了」ボタンをクリックします。
「サービス・リクエストの取得」アクションに「OCMフォルダID」フィールドを追加するには:

図get- ser- req- action.pngの説明
1. service- request- detail- startページで、「イベント・リスナー」タブを選択し、ページの上部で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. 「エンドポイントの選択」ダイアログで、「サービス」、ocmRestApi、「アプリケーション・リンク」、「POST /[..]/folder/{folderId}」の順に選択します。
  「選択」ボタンをクリックします。
AppLinkステップに入力変数を割り当てるには:

図applink.pngの説明
1. 「プロパティ」ペインの「入力パラメータ」セクションで、folderIdリンクを選択します。
  
  図username.pngの説明
2. ページの左側にある「ソース」、「アクション・チェーン」、「結果」、「loadServiceRequets」および「本文」からOCMFolderId_cをドラッグし、ページの右側にある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埋込みリンクの作成に必要なコードを追加するには:

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

使用するcreateOCMEmbeddedUI関数のコードにOCM UIライブラリを含めるには:

図ui- library.pngの説明
1. コードの最初の行に移動します。ojs/ojfilepickerの前に次のコードを追加します。
```
'//static.ocecdn.oraclecloud.com/cdn/cec/api/oracle-ce-ui-2.12.js',
```
  ノート:
  依存関係の警告を無視します。
2. ライブラリOracleCEUIに関連付けられている変数を同じ行のfunction()に追加します。
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が期待どおりにロードされない場合は、修正してから続行してください。ブラウザ・コンソールおよびネットワーク・トラフィックでエラーがないか確認します。また、ページ・デザイナの下部を見て、ページにエラーがあるかどうかを確認します。その場合は、それらをクリックして詳細を取得します。