Asignar datos de Salesforce al formulario

Este ejemplo se puede utilizar para modelar código al momento de desarrollar el Widget de iFrame para transferir y consumir datos del host en Salesforce.

Atención:

Debe agregar la Control Room a la página URL de confianza del proveedor de servicios de contenido o los datos no se transmitirán del host a Automation Co-Pilot y, en su lugar, arrojará errores.

Comunidad de formación y ayuda

Antes de empezar

El siguiente ejemplo utiliza Salesforce como aplicación host para demostrar el uso de HTML y JavaScript para permitir la transferencia de datos del host a Automation Co-Pilot (Widget de iFrame). El código al que se hace referencia asigna los valores existentes de la página de host (Salesforce) a los elementos del formulario inicial del proceso de Automation Co-Pilot. El código de este ejemplo es genérico y se puede utilizar en aplicaciones similares para modelar la estructura de las ediciones realizadas en los elementos de sus necesidades empresariales específicas. El desarrollo y la configuración del Widget de iFrame son específicos de los parámetros de Salesforce. Consola de desarrollador de Salesforce

Asegúrese de haber completado lo siguiente.
  • Se proporcionó un rol de usuario AAE_Robotic_Interface creado por el sistema para el usuario final.
  • Tener acceso a Automation Co-Pilot para usuarios de negocios en la interfaz web.
  • Tener acceso a la aplicación web host de su elección que sea compatible con la tecnología iFrame.
  • Ya configuró el widget iFrame. Para obtener más detalles, consulte Configurar un widget iFrame en una aplicación web.

Procedimiento

  1. Desde Salesforce, haga clic en Configuración (icono de engranaje) > Consola de desarrollador para abrir el entorno de desarrollo.
  2. Navegue por lo siguiente: Todo > Portal de Servicios > Configuración de Portal de Servicios > Configuración de Portal de Servicios > Editor de widgets > Crear un nuevo widget.
  3. Active Crear página de prueba al crear el widget para ver la plantilla html y la secuencia de comandos del cliente durante el desarrollo.
  4. Haga clic en Habilitar vista previa y haga clic en el icono del ojo para mostrar la pestaña de vista previa y probar los cambios de código.
  5. Utilice la muestra de las siguientes secciones para simular el código que utilizará para los requisitos de su empresa.
    Nota: El código de este ejemplo es genérico y se puede utilizar en aplicaciones similares como modelo. El desarrollo y la configuración del Widget de iFrame son específicos de los parámetros de Salesforce. Consulte: Asignar datos de HTML a un formulario.
    1. Agregue el código correspondiente a la secuencia de comandos del cliente.
    2. Agregue el elemento iFrame de Automation Co-Pilot a la plantilla HTML.
    3. Asegúrese de que el parámetro referrerpolicy=”origin” está en la plantilla HTML para evitar problemas de origen cruzado.
  6. Guarde el widget. Se cargará la vista previa.
  7. Revise la vista previa y realice las ediciones necesarias en la plantilla HTML y la secuencia de comandos del cliente.
  8. Guarde sus cambios.

Muestra de plantilla 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>

El código de muestra conectará el iFrame a los datos del registro de Salesforce utilizando el método PostMessage (servicio de cable). Especifique la lista de campos en su formulario para extraer la constante FIELD y, luego, proporciónela a getRecord. El servicio de cable completará los datos que luego se asignarán a variables y se agregarán a la carga útil postMessage. Puede modificar el siguiente ejemplo según sus necesidades empresariales personales.

Muestra de código


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