Salesforce からフォームにデータをマッピングする
- 最終更新日2024/10/31
この例では、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 ウィジェットを設定し、組み込みコードをすぐに利用できるようにします。「Web アプリケーションで iFrame ウィジェットを構成する」を参照してください。
- 開発者が、iFrame テクノロジーをサポートする Salesforce Web アプリケーションにアクセスできるようにします。
- プロセス オートメーションから文書化された要素と属性は、iFrame で表示します。具体的には、プロセス ID と初期フォーム入力フィールドの ID です。
- プロセス ID: AAE_Robotic_Administrator 権限を持つユーザーは、プロセス リストからプロセスを選択して表示できます。URL の数値に注意してください (https://URL>/aari#/processes/97)。
- 入力フィールド ID: フォーム デザイナーのプロセスの初期フォームのフィールド。Salesforce データにマッピングするすべての入力フィールドに、要素 ID フィールドを使用します。
Salesforce 用 Lightning Web コンポーネントの開発
- 以下の Trailhead 演習では、VSCode 環境がまだ使用可能でない場合にそれを設定します。Visual Studio の開発環境の設定
- この Trailhead 演習では、Salesforce Extensions の構成について説明します。すべてのステップが必要というわけではありません。主に、プロジェクトの作成と Salesforce インスタンスの認証の手順が、開始のための支援となります。Visual Studio でのコーディング開始
手順
- 新しい HTML ファイルを作成し、このセクションの HTML サンプルを挿入します。
- コンポーネントの [名前] と [説明] を入力します (例:Case_Record_CoPilot)。
- 提供される <template> タグの間に、Automation Anywhere を通して生成されたカスタム iFrame スニペット (組み込みコード) を追加します。HTML サンプルについては、手順 6 を参照してください。このサンプルには、コンポーネントにタイトルを表示するための lightning card タグも含まれています。
YOUR CONTROL ROOM URL
は、Control Room を指す値に置き換えます。- クロス オリジンの問題を回避するために、パラメーター
referrerpolicy=”origin”
が HTML テンプレート内にあることを確認してください。
- ウィジェットを保存します。
- Javascript のファイルを特定し、Javascript のサンプルを挿入します。このファイルはコントローラーを表します。
- 名前を入力します (例: Case-Record-CoPilot.js)。
- 転送するデータに合わせて
Case field names
を適切に編集します。データのマッピング元となる Salesforce のフィールドに一致する API 名のカンマ区切りリストを使用します。 YOUR CONTROL ROOM URL
を Control Room のドメインに置き換えます。Process ID
を、プロセスの URL にある Automation Co-Pilot プロセスの ID に置き換えます。TextBox0
とDropdown3
を、Automation Co-Pilot 内の初期フォーム要素と一致する要素 ID に置き換えます。必要に応じてフィールドを追加します。- フォーム フィールドにマッピングするデータは、
this.caseRec.fields.Status.value
で表します。caseRec
は、ドット記法でアクセスする、多くのフィールド値を含むオブジェクトです。- マッピングする
field
名はフィールドの後になります。 value
は、データ値が検索されてマッピングされたものであることを保証します。
- マッピングが完了したら、JS ファイルを右クリックします。
- メニューから [SFDX: Deploy Source to Org] を選択します。新しいコンポーネントが生成され、Salesforce インスタンスで使用できるようになります。
- 最後に、Case レコード、またはマッピングしているコンポーネントからページ レイアウト エディタを開き、LWC をページ レイアウトにドラッグします。
- 変更内容を [保存] します。
- プロセスをテストします。データは入力にマッピングされます。データが表示されない場合は、コードにエラーがある可能性があります。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); } } } }