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

Resumen

El siguiente ejemplo aprovecha Salesforce como aplicación host para demostrar el uso de HTML y JavaScript para permitir la transferencia de datos del host (Salesforce) a un Widget de iFrame de Automation Co-Pilot. El desarrollo y la configuración del Widget de iFrame son específicos de los parámetros de Salesforce. El código de muestra asigna valores existentes de la página de host a los elementos del formulario inicial de un proceso automatizado que opera en Automation Co-Pilot. El código de este ejemplo es genérico y se puede utilizar en aplicaciones similares de estructura de modelo. Un desarrollador debe editar los elementos del código para que coincidan con los elementos del formulario inicial. Esto asignará datos de Salesforce a su widget y dará como resultado campos llenados previamente durante el tiempo de ejecución de la automatización, que incluyen los datos de sus necesidades comerciales específicas.

Asegúrese de haber completado lo siguiente.
  • Utilizar los permisos AAE_Robotic_Administrator para configurar el Widget de iFrame de Automation Co-Pilot y tener el código de inserción disponible. Consulte Configurar el widget iFrame en una aplicación web.
  • Tener acceso de desarrollador a su aplicación web Salesforce que sea compatible con la tecnología de iFrame.
  • Tener los elementos y atributos documentados de la automatización de procesos que aparecerán en iFrame.
    Específicamente, el ID del proceso y los ID del campo de entrada del formulario inicial.
    • El ID del proceso: El usuario con permisos AAE_Robotic_Administrator puede visualizarlo seleccionando un proceso de su lista de Procesos. Tenga en cuenta el valor numérico en la URL (https://URL>/aari#/processes/97).
    • ID del campo de entrada: Campos del formulario inicial del proceso en el diseñador de formularios. Utilizará los campos de ID de elemento para todos los campos de entrada que deben asignarse a los datos de Salesforce.

Desarrollar un componente web Lightning para Salesforce

Desarrolle un componente web Lightning (LWC) en Salesforce para recibir el código de inserción de su Widget de iFrame de Automation Co-Pilot. LWC es una pila de marcos modernos y ligeros creados con los últimos estándares web, por medio de HTML y Javascript. Desarrollar e implementar un LWC requerirá Visual Studio Code (VSCode) junto con el complemento SFDX.
  • El siguiente ejercicio de Trailhead puede guiarlo para configurar su entorno de VSCode, si no tiene ninguno disponible. Configurar el entorno de desarrollo de Visual Studio
  • Este ejercicio de Trailhead puede guiarlo a través de las configuraciones de las extensiones de Salesforce. No todos los pasos son necesarios. Principalmente, los pasos para crear un proyecto y autenticar su instancia de Salesforce lo ayudarán a comenzar. Comience a codificar con Visual Studio
Estará listo para desarrollar su LWC cuando haya instalado las extensiones de Salesforce necesarias para VSCode y las haya configurado para su instancia de Salesforce.

Procedimiento

Los siguientes pasos detallan el VSCode de desarrollo que se necesita para su proyecto de LWC. Utilice el código de muestra correspondiente proporcionado y edite los atributos con sus detalles para personalizar su código según sus necesidades comerciales.
  1. Cree un nuevo archivo HTML e inserte la muestra HTML para esta sección.
    1. Escriba un Nombre y una Descripción para el componente (por ejemplo, Case_Record_CoPilot).
    2. Entre las etiquetas de <template> proporcionadas, agregue su fragmento de código de iFrame personalizado que se genera a través de Automation Anywhere (código de inserción). Consulte el paso 6 para ver la muestra de HTML, que también contiene una etiqueta de tarjeta de Lightning para mostrar un título en el componente.
    3. Reemplace YOUR CONTROL ROOM URL con un valor que apunte a su Control Room.
    4. Asegúrese de que el parámetro referrerpolicy=”origin” está en la plantilla HTML para evitar problemas de origen cruzado.
  2. Guarde el widget.
  3. Identifique el archivo para su Javascript e inserte la muestra de Javascript. Este archivo representa su controlador.
    1. Introduzca el nombre (por ejemplo, Case-Record-CoPilot.js).
    2. Edite los Case field names adecuadamente para los datos que necesita transferir. Utilice una lista separada por comas de nombres de API que coincidan con los campos en Salesforce desde donde se asignan los datos.
    3. Reemplace YOUR CONTROL ROOM URL con el dominio de su Control Room.
    4. Reemplace Process ID con el ID del proceso de Automation Co-Pilot, que se encuentra en la URL del proceso.
    5. Asegúrese de reemplazar TextBox0 y Dropdown3 con los ID de elementos que coincidan con los elementos de su formulario inicial en Automation Co-Pilot. Agregue campos adicionales según sea necesario.
    6. Los datos que se asignarán al campo del formulario se representan con this.caseRec.fields.Status.value.
      • El caseRec es un objeto que tiene una cantidad de valores de campo a los que se accede mediante notación de puntos.
      • El nombre del field que desea asignar sigue los campos.
      • El value garantiza que el valor de los datos sea lo que se recupera y asigna.
  4. Una vez que se complete la asignación, haga clic derecho en su archivo JS.
  5. En el menú, seleccione SFDX: Implementar fuente en organización. Esto genera su nuevo componente y hace que esté disponible en su instancia de Salesforce.
  6. Por último, abra el Editor de diseño de página desde el registro de caso o el componente que está asignando, y arrastre su LWC al diseño de la página.
  7. Guarde sus cambios.
  8. Pruebe su proceso. Los datos deben asignarse a las entradas. Si no ve ningún dato, es posible que haya un error en el código. Utilice las herramientas para desarrolladores de Chrome para inspeccionar los registros de la consola y localizar el problema.

Muestra de plantilla HTML

Utilice la muestra de las siguientes secciones para simular el código que utilizará para los requisitos de su empresa.

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

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