この例では、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 コンポーネントの開発

Salesforce で Lightning Web コンポーネント (LWC) を開発し、Automation Co-Pilot iFrame ウィジェットの組み込みコードを受け取ります。LWC は、HTML と Javascript を活用し、最新の Web 標準に基づいて作成された、最新の軽量フレームワークのスタックです。LWC の開発とデプロイには、Visual Studio Code (VSCode) と SFDX プラグインが必要です。
  • 以下の Trailhead 演習では、VSCode 環境がまだ使用可能でない場合にそれを設定します。Visual Studio の開発環境の設定
  • この Trailhead 演習では、Salesforce Extensions の構成について説明します。すべてのステップが必要というわけではありません。主に、プロジェクトの作成と Salesforce インスタンスの認証の手順が、開始のための支援となります。Visual Studio でのコーディング開始
必要な Salesforce Extensions for VSCode をインストールし、Salesforce インスタンス用に設定すると、LWC を開発する準備が整います。

手順

以下の手順では、LWC プロジェクトに必要な VSCode の開発について詳しく説明します。提供されている対応サンプル コードを使用し、あなたの詳細事項で属性を編集して、あなたのビジネス ニーズに合わせてコードをカスタマイズしてください。
  1. 新しい HTML ファイルを作成し、このセクションの HTML サンプルを挿入します。
    1. コンポーネントの [名前] と [説明] を入力します (例：Case_Record_CoPilot)。
    2. 提供される <template> タグの間に、Automation Anywhere を通して生成されたカスタム iFrame スニペット (組み込みコード) を追加します。HTML サンプルについては、手順 6 を参照してください。このサンプルには、コンポーネントにタイトルを表示するための lightning card タグも含まれています。
    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: Deploy Source to Org] を選択します。新しいコンポーネントが生成され、Salesforce インスタンスで使用できるようになります。
  6. 最後に、Case レコード、またはマッピングしているコンポーネントからページ レイアウト エディタを開き、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); } } } }