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] ロールが指定されている。
  • Web インターフェースの Automation Co-Pilot for Business Users にアクセスできる。
  • iFrame テクノロジーをサポートしている任意のホスト Web アプリケーションにアクセスできる。
  • iFrame ウィジェットをすでにセットアップしている。詳細については、「Web アプリケーションで iFrame ウィジェットを構成する」を参照してください。

手順

  1. Salesforce から、[設定 (歯車アイコン)] > [開発者コンソール] をクリックして開発環境を開きます。
  2. 次の順に選択します。[すべて] > [サービス ポータル] > [サービス ポータルの設定] > [サービス ポータルの設定] > [ウィジェット エディター] > [新しいウィジェットの作成]。
  3. ウィジェットの作成中に [テスト ページの作成] を有効にすると、開発中に html テンプレートとクライアント スクリプトを表示できます。
  4. [プレビューの有効化] をクリックし、目のアイコンをクリックすると、[プレビュー] タブが表示され、コードの変更をテストできます。
  5. 次のセクションのサンプルを使用して、ビジネス要件で使用するコードをモデル化します。
    注: この例のコードは汎用性があり、モデルとして同様のアプリケーションで使用することができます。iFrame ウィジェット の開発と設定は、Salesforce パラメーターに固有です。参照: 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);
      }
    } 
  }
}