Oracle Content Management 통합

이 마지막 단계에서는 OCM 문서 협업을 통해 디지털 고객 서비스 애플리케이션을 확장할 수 있습니다. 이를 위해서는 다음을 수행해야 합니다.

OCM 문서 REST API 서비스 생성
Service Request Details 페이지에 Documents 탭 추가
Visual Builder 서비스 요청 가져오기 웹 서비스 응답에 OCM 폴더 ID 변수 추가
로드 서비스 요청 작업 체인 갱신
새 문서 탭 내에 OCM 내장 UI를 표시하도록 서비스 요청 세부정보 페이지 업데이트

OCM REST API 웹 서비스 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. Edit Server(서버 편집) 대화 상자에서 다음을 수행합니다.
  1. 인스턴스 URL 필드에서 이 통합에 사용할 OCM 서버의 URL을 지정합니다. 예: https://oceserver.cec.ocp.oraclecloud.com.
  2. Authentication(인증) 드롭다운 메뉴에서 OAuth 2.0 Resource Owner Password Credentials(리소스 소유자 암호 자격 증명) 옵션을 선택합니다.
  3. Username 필드 오른쪽에 있는 Edit 아이콘을 누릅니다.
    [사용자 인증서] 대화상자에서 OCM 통합 관리자의 사용자 이름 및 비밀번호를 입력합니다. Fusion 서비스 요청 애플리케이션 통합을 생성하는 동안 사용된 것과 동일한 통합 사용자여야 합니다. 예: IntegrationAdmin.
  4. 저장 단추를 눌러 사용자 이름 사용자 인증서를 저장합니다.
  5. Client ID(클라이언트 ID) 필드 오른쪽에 있는 Edit(편집) 아이콘을 누릅니다.
  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. Connection Type(연결 유형) 섹션의 드롭다운 메뉴에서 CORS 지원과 관계없이 Always use proxy(항상 프록시 사용)를 선택합니다.
  11. 기본 페이지에서 저장 단추를 눌러 서버 변경사항을 저장합니다.
특정 AppLink 끝점 매개변수를 설정하려면 다음과 같이 하십시오.

그림 applink에 대한 설명-endpoints.png
1. ocmRestApi 페이지에서 끝점을 선택합니다.
2. AppLinks 섹션에서 폴더 앱 링크 생성을 선택합니다.
3. Request 버튼을 누릅니다.
4. 동적 질의 매개변수 추가 단추를 누릅니다. [동적 질의 매개변수] 섹션의 이름 필드에 값을 assignedUser로 입력합니다.
5. 정적 질의 매개변수 단추를 누릅니다. 정적 질의 매개변수 섹션의 이름 필드에 값을 role로 입력합니다.
  값 필드에 제공자로 값을 입력합니다. 확인을 눌러 정적 질의 매개변수를 저장합니다.
[서비스 요청 세부 정보] 페이지에 [문서] 탭을 추가하려면 다음과 같이 하십시오.

그림 작업에 대한 설명-orders.png
1. 왼쪽 탐색 메뉴에서 웹 애플리케이션을 선택합니다.
2. Web Apps 목록에서 dcs, service-request-detail, service-request-detail-start를 차례로 선택합니다.
3. service-request-detail-start 페이지에서 Page Designer 탭을 선택합니다. 오른쪽 위에 있는 설계 단추를 누릅니다.
4. 페이지 디자이너 페이지에서 작업 지시를 선택합니다.
5. Bind Text [[$app…serviceRequestDetail_workOrders]]가 있는 디자인 페이지 왼쪽의 구성요소 섹션에서 <li> 상위를 선택합니다.
6. <li> 요소를 마우스 오른쪽 버튼으로 누르고 복사를 선택합니다.
7. <li> 요소를 다시 마우스 오른쪽 버튼으로 누르고 Paste/After을 선택합니다.
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. Designer 페이지에서 새로 추가된 Documents 탭이 있는 Tab Bar를 선택합니다.
3. Properties 섹션의 오른쪽 상단에서 Events 탭을 선택합니다. 새 이벤트 버튼을 누른 다음 드롭다운 메뉴에서 설정 선택을 선택합니다.
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. 페이지 상단에서 Page Designer 탭을 선택합니다.
2. 탭 표시줄을 선택한 다음 페이지 오른쪽의 Events 속성에서 TabBarSelectionChangeChain 링크를 누릅니다.
3. Diagram 페이지에서 displayEmbeddedUI 호출 함수를 선택합니다.
4. 페이지 오른쪽의 [속성]에서 입력 매개변수 바로 오른쪽에 있는 지정 링크를 누릅니다.
5. [입력 지정 매개변수] 대화상자의 페이지 왼쪽에서 소스, 작업 체인, 변수를 차례로 누릅니다. 변수 메뉴에서 selection 옵션을 페이지 오른쪽의 Parameters(Target 아래) 내에 있는 display로 끌어옵니다.
  페이지 하단의 표시 코드 섹션에서 다음 코드를 추가합니다.
```
$variables.selection === 'odcs-documents-tab'
```
  저장 단추를 누르면
서비스 요청 가져오기 웹 서비스에 OCM 폴더 ID 필드를 추가하려면 다음을 수행합니다.

그림 get-ser-req.png에 대한 설명
1. 페이지 상단에서 Event Listeners 탭을 선택합니다.
2. 수명 주기 이벤트 리스너 vbEnter 섹션에서 LoadServiceRequestAction 오른쪽에 있는 작업 체인으로 이동 링크를 선택합니다.
3. crmRestApi/get_serviceRequests에 대한 REST 호출 단계를 선택합니다.
4. 페이지 오른쪽에 있는 Properties의 Endpoints 섹션에서 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 페이지에서 Types 탭을 선택합니다.
2. { } getServiceRequestsResponse 위로 커서를 가져가서 오른쪽에 있는 끝점에서 편집 링크를 선택합니다.
3. 끝점 구조 목록에서 새로 생성된 OCMFolderId_c 변수를 확인합니다.
4. Finish 버튼을 누릅니다.
서비스 요청 가져오기 작업에 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"를 추가합니다. Save 버튼을 누릅니다.
LoadServiceRequestAction 작업 체인에 OCM AppLink 생성 단계를 추가하려면 다음을 수행합니다.

loadservicerequestaction.png 그림에 대한 설명
1. 다이어그램 페이지에서 페이지 왼쪽에 있는 작업에서 새 REST 호출 단계를 끌어서 페이지 하단에 있는 originalServiceRequestRecord의 변수 지정 단계 아래에 있는 점선에 놓습니다.
  
  참고:
  흐름은 몇 가지 추가 단계에 적합하지 않습니다.
  
  그림 select-endpoint.png에 대한 설명
2. 페이지 오른쪽에 있는 [속성]에서 끝점 바로 오른쪽에 있는 선택 링크를 누릅니다.
3. [끝점 선택] 대화상자에서 서비스, ocmRestApi, Applink, POST /[..]/folder/{folderId}을 차례로 선택합니다.
  선택 버튼을 누릅니다.
AppLink 단계에 입력 변수를 지정하려면 다음을 수행합니다.

applink.png 그림에 대한 설명
1. Properties 창의 Input Parameters 섹션에서 folderId 링크를 선택합니다.
  
  username.png 그림에 대한 설명
2. 페이지 왼쪽의 소스, 작업 체인, 결과, loadServiceRequets 및 본문에서 OCMFolderId_c을 끌어 페이지의 오른쪽에 있는 folderId(대상, 매개변수 및 uriParams 아래)로 놓습니다.
3. 페이지 왼쪽의 Sources(소스), Application(응용 프로그램), System(시스템) 및 User(사용자)에서 userName을 끌어 assignedUser의 Target(대상), Parameters(매개변수), uriParams에 놓습니다.
4. 저장 단추를 선택합니다.
AppLink 단계 실패 통지의 결과를 업데이트하려면 다음을 수행합니다.

그림 단계 설명-failure.png
1. ocmRestApi/postDocumentsApi1_2ApplinksFolderFolderId에 대한 REST 호출 단계 바로 아래에 있는 실행 통지 단계를 마우스 오른쪽 버튼으로 누르고 드롭다운 메뉴에서 코드로 이동 옵션을 선택합니다.
  
  그림 diag에 대한 설명-code.png
2. fireNotification의 parameters 섹션 바로 아래에 다음 코드를 추가합니다.
```
,
"outcomes": { 
  "success": "showDefaultCursor"
}
```
3. 문서의 형식을 지정하려면 코드를 마우스 오른쪽 버튼으로 누르고 문서 형식 지정을 선택합니다.
LoadServiceRequestAction 작업 체인에 OCM 내장 UI 생성 단계를 추가하려면 다음을 수행합니다.

그림 create-embui.png에 대한 설명
1. 페이지 오른쪽 위에 있는 설계 단추를 눌러 LoadServiceRequestAction 작업 체인으로 돌아갑니다.
2. ocmRestApi/postDocumentsApi1_2ApplinksFolderFolderId에 대한 REST 호출 단계 바로 아래 페이지 왼쪽의 작업에서 새 호출 함수 단계를 점선으로 끌어 놓습니다.
  
  참고:
  이때 흐름이 훨씬 선명해지고 새 Call Function은 ocmRestApi/ postDocumentsApi1_2ApplinksFolderFolderId의 Call REST 단계에서 성공해야 합니다.
3. 페이지 오른쪽의 [속성]에서 함수 이름 필드 바로 오른쪽에 있는 생성 링크를 선택합니다.
  함수 이름 필드에 값을 createOCMEmbeddedUI로 입력합니다.
4. 생성 단추를 누릅니다.

OCM 내장 링크를 생성하는 데 필요한 코드를 추가하려면 다음과 같이 하십시오.

embed-link.png에 대한 설명은 다음과 같습니다.
그림 embed에 대한 설명-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. 동일한 행의 function()에서 OracleCEUI 라이브러리와 연관된 변수를 추가합니다.
3. 문서의 형식을 지정하려면 코드를 마우스 오른쪽 버튼으로 누르고 문서 형식 지정을 선택합니다.
displayEmbeddedUI 함수에 선택 변수를 지정하려면 다음을 수행합니다.

그림 선택에 대한 설명-vari.png
1. 페이지 상단에서 Actions 탭을 선택합니다.
2. 아직 선택하지 않은 경우 페이지 왼쪽 상단의 작업 체인 링크 바로 오른쪽에 있는 드롭다운 메뉴에서 LoadServiceRequestAction를 다시 선택합니다.
3. 방금 생성한 createOCMEmbeddedUI에 대해 호출 함수 단계를 선택합니다.
4. [속성]에서 입력 매개변수 오른쪽에 있는 지정 링크를 선택합니다.
  
  그림 본문에 대한 설명-para.png
5. [입력 매개변수 지정] 대화상자에서 페이지 왼쪽의 본문을 소스, 작업 체인, 결과 및 callRestPostDocumentsApi12ApplinksFolderFolderId에서 페이지 오른쪽의 appLink(대상, 매개변수 아래)로 끌어옵니다.
  저장을 누릅니다.
모든 변경 사항이 예상대로 작동하는지 확인하려면 다음과 같이 하십시오.

verify.png 그림에 대한 설명
1. 페이지 상단에서 Page Designer 탭을 선택합니다.
2. 페이지 오른쪽 위에 있는 라이브 단추를 누릅니다.
3. Documents 탭을 선택합니다(다른 탭을 선택하고 Documents 탭이 이미 선택된 경우 다시 선택).
4. 페이지에 현재 SR에 대한 관련 OCM 폴더가 표시되어야 합니다.
  
  참고:
  OCM 내장 UI가 예상대로 로드되지 않을 경우 계속하기 전에 수정하십시오. 브라우저 콘솔 및 네트워크 트래픽에서 오류를 확인합니다. 또한 페이지 디자이너 하단에서 페이지에 오류가 있는지 확인합니다. 그런 경우 해당 링크를 누르면 자세한 내용을 볼 수 있습니다.