Salesforce의 데이터를 양식에 매핑

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

주의:

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

도움말 및 교육 커뮤니티

시작하기 전에

다음 예는 Salesforce를 호스트 애플리케이션으로 사용하여 HTML 및 JavaScript를 통해 호스트에서 Automation Co-Pilot(iFrame 위젯)로 데이터를 전송하는 방법을 보여줍니다. 참조된 코드는 호스트 페이지(Salesforce)의 기존 값을 Automation Co-Pilot 프로세스 초기 양식 요소에 매핑합니다. 이 예의 코드는 일반적이며, 특정 비즈니스 요구사항의 요소를 편집하기 위해 모델 구조와 유사한 애플리케이션에 사용할 수 있습니다. iFrame 위젯의 개발 및 설정은 Salesforce 매개변수에만 해당됩니다. Salesforce 개발자 콘솔

다음을 완료하도록 하십시오.
  • 최종 사용자에 대해 시스템에서 생성한 AAE_Robotic_Interface User 역할을 제공했습니다.
  • 웹 인터페이스에서 비즈니스 유저용 Automation Co-Pilot에 액세스할 수 있습니다.
  • iFrame 기술을 지원하는 (사용자가 선택한) 호스트 웹 애플리케이션에 액세스할 수 있습니다.
  • iFrame 위젯이 설정되어 있습니다. 자세한 내용은 웹 애플리케이션에서 iFrame 위젯 구성을 참조하십시오.

절차

  1. Salesforce에서 설정(톱니바퀴 아이콘) > 개발자 콘솔을 클릭하여 개발 환경을 엽니다.
  2. 다음을 탐색합니다. 모두 > 서비스 포털 > 서비스 포털 구성 > 서비스 포털 구성 > 위젯 편집기 > 새 위젯 생성.
  3. 위젯 생성 시 테스트 페이지 생성을 활성화하면 개발 중 HTML 템플릿과 클라이언트 스크립트를 확인할 수 있습니다.
  4. 미리보기 활성화를 클릭하고 눈 아이콘을 클릭하면, 코드 변경 사항을 테스트할 수 있는 미리보기 탭이 표시됩니다.
  5. 다음 섹션의 샘플 코드를 사용하여 비즈니스 요구사항에 맞는 코드를 모델링하십시오.
    주: 이 예의 코드는 일반적이며 유사한 애플리케이션에서 모델로 사용할 수 있습니다. iFrame 위젯의 개발 및 설정은 ServiceNow 매개변수에만 해당됩니다. 참조: HTML의 데이터를 양식에 매핑.
    1. 클라이언트 스크립트에 해당 코드를 추가합니다.
    2. HTML 템플릿에 Automation Co-Pilot iFrame 요소를 추가합니다.
    3. 원본 간 문제를 방지하려면 referrerpolicy=”origin” 매개변수가 HTML 템플릿에 있는지 확인하십시오.
  6. 위젯을 저장합니다. 미리보기가 로드됩니다.
  7. 미리보기를 검토하고 HTML 템플릿과 클라이언트 스크립트를 필요에 따라 편집합니다.
  8. 변경 사항을 저장합니다.

HTML 템플릿 샘플


<template>
  <lightning-card>
    <h3 slot="title">
      Automation Co-Pilot
    </h3>
    <iframe src='https://aa-pmorgdemo.cloud.automationanywhere.digital/aari/#/embedded?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 페이로드에 추가합니다. 다음은 개인별 비즈니스 요건에 따라 수정할 수 있는 한 가지 예입니다.

코드 샘플


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
        }}
        console.log(postData);
        //Firing an event to send data to iframe
        this.template.querySelector("iframe").contentWindow.postMessage(postData, crorigin);
      }
    } 
  }
}