将 Automation Co-Pilot 作为交互式小部件嵌入 Salesforce，并将来自 Salesforce 的数据映射到表单中。 该示例可用于在开发 iFrame 小部件 时建模代码，以便在 Salesforce 中传输和使用主机数据。

注意：

您必须在内容服务提供程序的受信任 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 是基于最新 web 标准创建的现代轻量级框架栈，使用 HTML 和 Javascript。 开发和部署 LWC 需要使用 Visual Studio Code (VSCode) 以及 SFDX 插件。
  • 以下 Trailhead 练习可以指导您设置 VSCode 环境（如果没有）。 设置 Visual Studio 开发环境
  • 这个 Trailhead 练习可以指导您完成 Salesforce 扩展程序的配置。 并不需要执行所有步骤。 一开始，主要完成创建项目和向 Salesforce 实例进行身份验证这两个主要步骤。 使用 Visual Studio 开始编码
安装必要的 Salesforce Extensions for VSCode 并为您的 Salesforce 实例完成配置后，即可开始开发 LWC。

过程

以下步骤详细说明了如何开始 LWC 项目所需的 VSCode。 使用提供的相应示例代码，并使用详细信息编辑属性，以根据您的业务需求自定义代码。
  1. 创建一个新的 HTML 文件，并插入本节的 HTML 示例。
    1. 输入组件的名称和描述（例如，Case_Record_CoPilot）。
    2. 在提供的<template>标签之间，添加通过 Automation Anywhere 生成的自定义 iFrame 代码片段（签入代码）。 请参阅第 6 步中的 HTML 示例，其中还包含一个 lightning card 标签，用于在组件上显示标题。
    3. 将 YOUR CONTROL ROOM URL 替换为指向您的 Control Room 的值。
    4. 确保参数 referrerpolicy=”origin” 在您的 HTML 模板中，以避免跨源问题。
  2. 保存您的小部件。
  3. 识别您的 Javascript 文件并插入 Javascript 示例。 此文件代表您的控制器。
    1. 输入名称（例如，Case-Record-CoPilot.js）。
    2. 请适当地编辑工单字段名称以便传输所需的数据。 使用逗号分隔的 API 名称列表，匹配 Salesforce 中与数据映射的字段。
    3. 将 YOUR CONTROL ROOM URL 替换为您的 Control Room 的域名。
    4. 将流程 ID 替换为流程 URL 中的 Automation Co-Pilot 流程 ID。
    5. 确保您将 TextBox0 和 Dropdown3 替换为匹配 Automation Co-Pilot 中初始表单元素的元素 ID。 根据需要添加额外字段。
    6. 将被映射到表单字段的数据用以下文字表示 this.caseRec.fields.Status.value。
      • caseRec 是一个对象，它有许多字段值，可以通过点符号访问。
      • 您想要映射的字段名称遵循字段和
      • 该值确保数据值是检索和映射的内容。
  4. 映射完成后，右键单击您的 JS 文件。
  5. 从菜单中选择 SFDX： 将源代码部署到组织。 这将生成您的新组件，并使其在您的 Salesforce 实例中可用。
  6. 最后，从工单录制中打开Page Layout Editor，或您正在映射的组件，并将您的 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 方法 (wire service) 将 iFrame 连接到 Salesforce 录制数据。 指定表单中的字段列表以引入 FIELD 常量，然后将其提供给 getRecord。 wire service 将填充数据，然后将数据映射到变量并添加到 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);
      }
    } 
  }
}