Map data from Salesforce to form

This example can be used to model code when developing the iFrame widget to transfer and consume host data from Salesforce.

Attention:

You must add the Control Room in the content service provider Trusted URL page or data will not be passed from host to Automation Co-Pilot and will instead throw errors.

Help And Training Community

Overview

The following example leverages Salesforce as the host application to demonstrate using HTML and JavaScript to enable the transfer of data from host (Salesforce) to an Automation Co-Pilot iFrame widget. Development and setup of the iFrame widget is specific to Salesforce parameters. The sample code maps existing values from the host page to the initial form elements of an automated process, operating in Automation Co-Pilot. The code in this example is generic and can be used in similar applications to model structure. A developer should edit the elements of the code to match your initial form elements. This will map data from Salesforce to your widget, and result in pre-populated fields during run time of the automation that include the data of your specific business needs.

Ensure you have completed the following.
  • Use the AAE_Robotic_Administrator permissions to set up the Automation Co-Pilot iFrame widget and have the embed code readily available. See, Configure an iFrame widget in a web application.
  • Have developer access to your Salesforce web application that supports the iFrame technology.
  • Have the documented elements and attributes from the process automation that will surface in the iFrame.
    Specifically the Process ID and the initial form input field IDs.
    • The Process ID: The user with AAE_Robotic_Administrator permissions can view by selecting a process from your Process list. Note the numerical value in the URL (https://URL>/aari#/processes/97).
    • Input field ID: Fields from the initial form of the process in the form designer. You will use the Element ID fields for all of the input fields that should be mapped to Salesforce data.

Develop a Lightning web component for Salesforce

Develop a Lightning web component (LWC) in Salesforce to receive the embed code for your Automation Co-Pilot iFrame widget. LWC is a stack of modern lightweight frameworks created on the latest web standards, utilizing HTML and Javascript. Developing and deploying an LWC will require Visual Studio Code (VSCode) along with the SFDX plugin.
  • The following Trailhead exercise can guide you to set up your VSCode environment, if none is available to you already. Set up Visual Studio dev environment
  • This Trailhead exercise can guide you through configurations for Salesforce Extensions. All steps are not required. Primarily, steps for Creating a Project and Authenticating your Instance of Salesforce assist with getting started. Start coding with Visual Studio
You are ready to develop your LWC when you have installed the necessary Salesforce Extensions for VSCode and configured them for your Salesforce instance.

Procedure

The following steps detail developing VSCode that is needed for your LWC project. Use the corresponding sample code provided, and edit the attributes with your details to customize your code for your business needs.
  1. Create a new HTML file and insert the HTML sample for this section.
    1. Enter the Name and Description for the component (ex. Case_Record_CoPilot).
    2. Between the provided <template> tags, add your custom iFrame snippet that is generated through Automation Anywhere (embed code). See step 6 for the HTML sample, that also contains a lightning card tag to display a title on the component.
    3. Replace YOUR CONTROL ROOM URL with a value that points to your Control Room.
    4. Ensure the parameter referrerpolicy=”origin” is in your HTML template to avoid cross origin issues.
  2. Save your widget.
  3. Identify the file for your Javascript and insert the Javascript sample. This file represents your controller.
    1. Enter the name (ex. Case-Record-CoPilot.js).
    2. Edit the Case field names appropriately for the data you need transferred. Use a comma-separated list of API names that match the fields in Salesforce that data is mapped from.
    3. Replace YOUR CONTROL ROOM URL with the domain of your Control Room.
    4. Replace the Process ID with the ID of the Automation Co-Pilot process, found in the URL of the process.
    5. Ensure you replace TextBox0 and Dropdown3 with element IDs that match your initial form elements in Automation Co-Pilot. Add additional fields as required.
    6. The data that will be mapped to the form field is represented by this.caseRec.fields.Status.value.
      • The caseRec is an object that has a number of field values that are accessed through dot notation.
      • The field name you want to map follows fields and
      • The value ensures the data value is what is retrieved and mapped.
  4. Once mapping is complete, right-click your JS file.
  5. From the menu, select SFDX: Deploy Source to Org. This generates your new component and make it available in your Salesforce instance.
  6. Lastly, open the Page Layout Editor from the Case record, or the component you are mapping, and drag your LWC on to the page layout.
  7. Save your changes.
  8. Test your process. Data should be mapped to the inputs. If you do not see any data, there might be an error in the code. Use the Chrome Developer Tools to inspect the Console logs to locate the issue.

Sample of HTML template

Use the sample from the following sections to model the code you will use for your business requirement.

<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>

The sample code will connect the iFrame to the Salesforce record data using the PostMessage method (wire service). Specify the list of fields in your form to pull in the FIELD constant and then provide that to getRecord. The wire service will populate the data which is then mapped into variables and added to the postMessage payload. The following is one example that you can modify for your personal business needs.

Sample of 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);
      }
    } 
  }
}