Salesforce의 데이터를 양식에 매핑

이 예는 Salesforce에서 호스트 데이터를 전송하고 사용하는 iFrame 위젯을 개발할 때 코드를 모델링하는 데 사용할 수 있습니다.

주의:

콘텐츠 서비스 제공자의 신뢰할 수 있는 URL 페이지에 Control Room을 추가해야 하며, 그렇지 않으면 호스트에서 Automation Co-Pilot으로 데이터가 전달되지 않고 오류가 발생합니다.

도움말 및 교육 커뮤니티

개요

다음 예를 통해 Salesforce를 호스트 애플리케이션으로 사용하여 HTML 및 JavaScript를 통해 호스트(Salesforce)에서 Automation Co-Pilot iFrame 위젯으로 데이터를 전송하는 방법을 확인할 수 있습니다. iFrame 위젯의 개발 및 설정은 Salesforce 매개변수에만 해당됩니다. 샘플 코드는 호스트 페이지의 기존 값을 Automation Co-Pilot에서 작동하는 자동화된 프로세스의 초기 양식 요소에 매핑합니다. 이 예의 코드는 일반적이며 유사한 애플리케이션에서 구조 모델링에 사용할 수 있습니다. 개발자는 초기 양식 요소와 일치하도록 코드의 요소를 편집해야 합니다. 이렇게 하면 Salesforce의 데이터가 위젯에 매핑되고 자동화 실행 중에 특정 비즈니스 요구사항에 대한 데이터가 포함된 필드가 미리 채워집니다.

다음을 완료하도록 하십시오.
  • AAE_Robotic_Administrator 권한을 사용하여 Automation Co-Pilot iFrame 위젯을 설정하고 임베드 코드를 쉽게 사용할 수 있게 만드십시오. 웹 애플리케이션에서 iFrame 위젯 구성을 참조하십시오.
  • iFrame 기술을 지원하는 Salesforce 웹 애플리케이션에 개발자가 액세스할 수 있도록 합니다.
  • 프로세스 자동화에서 iFrame에 표시될 문서화된 요소와 속성을 확보합니다.
    특히 프로세스 ID와 초기 양식 입력 필드 ID입니다.
    • 프로세스 ID: AAE_Robotic_Administrator 권한이 있는 사용자는 프로세스 목록에서 프로세스를 선택하여 볼 수 있습니다. URL(https://URL>/aari#/processes/97)의 숫자에 주의하십시오.
    • 입력 필드 ID: 양식 설계자에서 프로세스의 초기 양식에 있는 필드입니다. Salesforce 데이터에 매핑해야 하는 모든 입력 필드에 요소 ID 필드를 사용하게 됩니다.

Salesforce용 Lightning 웹 구성요소 개발

Automation Co-Pilot iFrame 위젯에 대한 임베드 코드를 받으려면 Salesforce에서 LWC(Lightning 웹 구성요소)를 개발하십시오. LWC는 HTML과 자바스크립트를 활용하여 최신 웹 표준을 기반으로 만들어진 최신 경량 프레임워크 스택입니다. LWC를 개발하고 배포하려면 SFDX 플러그인과 함께 VSCode(Visual Studio Code)가 필요합니다.
  • 아직 VSCode 환경이 없는 경우 다음 Trailhead 연습이 이 환경을 설정하는 방법을 안내합니다. Visual Studio 개발 환경 설정
  • 이 Trailhead 연습을 통해 Salesforce 확장 기능의 구성을 안내받을 수 있습니다. 모든 단계가 필수는 아닙니다. 주로 프로젝트 만들기 및 Salesforce 인스턴스 인증 단계에 도움이 됩니다. Visual Studio로 코딩 시작하기
필요한 Salesforce 확장 프로그램을 설치하고 Salesforce 인스턴스에 맞게 구성하면 LWC를 개발할 준비가 완료된 것입니다.

절차

다음 단계에서는 LWC 프로젝트에 필요한 VSCode를 개발하는 방법을 자세히 설명합니다. 제공된 해당 샘플 코드를 사용하고 세부 정보로 속성을 편집하여 비즈니스 요구 사항에 맞게 코드를 사용자 정의하십시오.
  1. 새 HTML 파일을 만들고 이 섹션의 HTML 샘플을 삽입합니다.
    1. 구성요소에 대한 이름과 설명을 입력합니다. Case_Record_CoPilot).
    2. 제공된 <lt;template> 태그 사이에 Automation Anywhere(임베드 코드)를 통해 생성된 사용자 정의 iFrame 스니펫을 추가합니다. 구성 요소에 제목을 표시하는 라이트닝 카드 태그가 포함된 HTML 샘플은 6단계를 참조하십시오.
    3. YOUR CONTROL ROOM URL을 Control Room을 가리키는 값으로 바꿉니다.
    4. 원본 간 문제를 방지하려면 referrerpolicy=”origin” 매개변수가 HTML 템플릿에 있는지 확인하십시오.
  2. 위젯을 저장합니다.
  3. Javascript 파일을 식별하고 Javascript 샘플을 삽입합니다. 이 파일은 컨트롤러를 나타냅니다.
    1. 이름을 입력합니다(예: Case-Record-CoPilot.js).
    2. 전송해야 하는 데이터에 적절한 Case field names를 수정합니다. 데이터가 매핑되는 Salesforce의 필드와 일치하는 쉼표로 구분된 API 이름 목록을 사용합니다.
    3. YOUR CONTROL ROOM URL을 Control Room의 도메인으로 바꿉니다.
    4. Process ID를 프로세스의 URL에 있는 Automation Co-Pilot 프로세스의 ID로 바꿉니다.
    5. TextBox0 및 Dropdown3를 Automation Co-Pilot에서 초기 양식 요소와 일치하는 요소 ID로 바꾸어야 합니다. 필요에 따라 필드를 추가합니다.
    6. 양식 필드에 매핑될 데이터는 this.caseRec.fields.Status.value로 표시됩니다.
      • caseRec은 점 표기법을 통해 액세스하는 여러 필드 값을 가진 객체입니다.
      • 매핑하려는 field 이름은 필드를 따르며
      • value는 데이터 값이 검색되고 매핑되는 것을 보장합니다.
  4. 매핑이 완료되면 JS 파일을 마우스 오른쪽 버튼으로 클릭합니다.
  5. 메뉴에서 SFDX: 소스를 조직에 배포를 선택합니다. 이렇게 하면 새 구성 요소가 생성되고 Salesforce 인스턴스에서 사용할 수 있게 됩니다.
  6. 마지막으로 케이스 기록 또는 매핑하려는 구성요소에서 페이지 레이아웃 편집기를 열고 LWC를 페이지 레이아웃으로 드래그합니다.
  7. 변경 사항을 저장합니다.
  8. 프로세스를 테스트합니다. 데이터는 입력에 매핑되어야 합니다. 데이터가 표시되지 않으면 코드에 오류가 있는 것일 수 있습니다. Chrome 개발자 도구를 사용해 콘솔 로그를 검사하여 문제를 발견하십시오.

HTML 템플릿 샘플

다음 섹션의 샘플 코드를 사용하여 비즈니스 요구사항에 맞는 코드를 모델링하십시오.

<template>
  <lightning-card>
    <h3 slot="title">
      Automation Co-Pilot
    </h3>
    <iframe src='https://aa-pmorgdemo.cloud.automationanywhere.digital/copilot?tags=%5B%22Insurance%22%5D' 
    name="aari-embedded-app" 
    id="aari-embedded-app" 
    width="100%" 
    height="450px" 
    referrerpolicy="origin"
    sandbox="allow-same-origin allow-scripts allow-forms allow-popups allow-modals"
    style="border: none;"></iframe> 
  </lightning-card>
</template>

샘플 코드는 PostMessage 메서드(유선 서비스)를 사용하여 iFrame을 Salesforce 기록 데이터에 연결합니다. 양식에서 FIELD 상수를 가져올 필드 목록을 지정한 다음 getRecord에 제공합니다. 유선 서비스는 데이터를 채우고 변수에 매핑하여 postMessage 페이로드에 추가합니다. 다음은 개인별 비즈니스 요건에 따라 수정할 수 있는 한 가지 예입니다.

Javascript 샘플

import { LightningElement,api,wire } from 'lwc'; import { getRecord } from 'lightning/uiRecordApi'; const FIELDS = ['Policy_Holder__c.First_Name__c', 'Policy_Holder__c.Last_Name__c', 'Policy_Holder__c.Contact_Phone__c', 'Policy_Holder__c.Contact_Email__c', 'Policy_Holder__c.Policy_Holder_ID__c', 'Policy_Holder__c.Street__c', 'Policy_Holder__c.City__c', 'Policy_Holder__c.State__c','Policy_Holder__c.ZIPPostalCode__c','Policy_Holder__c.Country__c']; const crorigin = https://aa-pmorgdemo.cloud.automationanywhere.digital; export default class PolicyHolderLWC extends LightningElement { @api recordId; phCustomer; firstName; lastName; phone; email; phID; street; city; state; country; zip; @wire(getRecord, { recordId: '$recordId', fields: FIELDS }) policyholderdata({data, error}){ console.log(' data --> ' + JSON.stringify(data) + ' error --> ' + JSON.stringify(error) ) if(data){ this.phCustomer = data; this.firstName = this.phCustomer.fields.First_Name__c.value; this.lastName = this.phCustomer.fields.Last_Name__c.value; this.phone = this.phCustomer.fields.Contact_Phone__c.value; this.email = this.phCustomer.fields.Contact_Email__c.value; this.phID = this.phCustomer.fields.Policy_Holder_ID__c.value; this.street = this.phCustomer.fields.Street__c.value; this.city = this.phCustomer.fields.City__c.value; this.state = this.phCustomer.fields.State__c.value; this.zip = this.phCustomer.fields.ZIPPostalCode__c.value; this.country = this.phCustomer.fields.Country__c.value; } else if(error){ this.error = error; } } /*****Called on LOAD of LWC *****/ connectedCallback() { // Binding EventListener here when Data received from iframe console.log("Adding Event Listener"); window.addEventListener("message", this.handleResponse.bind(this)); } handleResponse(event) { console.log("Checking Event Origin"); if ((event.origin || event.originalEvent.origin) !== crorigin) { // Not the expected origin: Reject the message! console.log("Not the expected origin; Reject the message!"); return; } else{ this.handleFiretoCoPilot(event); } } handleFiretoCoPilot(event) { console.log("Sending postmessage data"); if (event.data.aariDataRequest === "aari-data-request") { if (event.data.processId === "9") { var postData = {"data": { "TextBox0": this.firstName, "TextBox1": this.lastName, "TextBox2": this.phone, "TextBox3": this.email, "TextBox4": this.phID, "TextBox5": this.street, "TextBox7": this.city, "TextBox8": this.state, "TextBox9": this.zip, "Dropdown2": this.country, "hiddenVariable0":this.recordId }} console.log(postData); //Firing an event to send data to iframe this.template.querySelector("iframe").contentWindow.postMessage(postData, crorigin); } } } }