Mapear dados do Salesforce para o formulário

Este exemplo pode ser usado para modelar código ao desenvolver o Widget do iFrame para transferir e consumir dados do host do Salesforce.

Atenção:

Você precisa adicionar a Control Room à página de URL confiável do provedor de serviços de conteúdo, ou os dados não serão transmitidos do host para o Automation Co-Pilot e, em vez disso, lançará erros.

Comunidade de ajuda e treinamento

Visão geral

O exemplo a seguir aproveita o Salesforce como o aplicativo host para demonstrar o uso de HTML e JavaScript para habilitar a transferência de dados do host (Salesforce) para um Widget do iFrame Automation Co-Pilot. O desenvolvimento e a configuração do Widget do iFrame são específicos para os parâmetros do Salesforce. O código de amostra mapeia os valores existentes da página do host para os elementos do formulário inicial de um processo automatizado, operando em Automation Co-Pilot. O código deste exemplo é genérico e pode ser usado em aplicativos semelhantes para uma estrutura de modelo. Um desenvolvedor deve editar os elementos do código para correspondê-los aos elementos do formulário inicial. Com isso, os dados do Salesforce serão mapeados para o seu widget, resultando no pré-preenchimento, durante o tempo de execução da automação, dos campos que incluem os dados de suas necessidades empresariais específicas.

Certifique-se de ter concluído as seguintes etapas.
  • Use as permissões AAE_Robotic_Administrator para configurar o Widget do iFrame Automation Co-Pilot e ter o código incorporado prontamente disponível. Consulte Configurar um widget de iFrame em um aplicativo da web.
  • Ter acesso de desenvolvedor ao aplicativo web Salesforce que suporta a tecnologia iFrame.
  • Ter os elementos e atributos documentados da automação de processos que surgirão no iFrame.
    Especificamente, o ID do processo e os IDs dos campos de entrada do formulário inicial.
    • O ID do processo: O usuário com permissões AAE_Robotic_Administrator pode visualizar ao selecionar um processo na lista Processo. Observe o valor numérico no URL (https://URL>/aari#/processes/97).
    • ID do campo de entrada: Campos do formulário inicial do processo no designer de formulários. Use os campos de ID do elemento para todos os campos de entrada que devem ser mapeados para os dados do Salesforce.

Desenvolver um componente Web do Lightning para Salesforce

Desenvolva um componente Web do Lightning (LWC) no Salesforce para receber o código incorporado para o Widget do iFrame Automation Co-Pilot. O LWC é uma pilha de estruturas modernas e leves criadas nos mais recentes padrões da web, utilizando HTML e Javascript. O desenvolvimento e a implantação de um LWC exigirão o Visual Studio Code (VSCode) e o plug-in SFDX.Você estará pronto para desenvolver seu LWC quando instalar as extensões do Salesforce necessárias para o VSCode e configurá-las para a instância do Salesforce.

Procedimento

As etapas a seguir detalham o desenvolvimento do VSCode necessário para seu projeto do LWC. Use o código de amostra correspondente fornecido e edite os atributos com seus detalhes para personalizar seu código de acordo com as necessidades do seu negócio.
  1. Crie um novo arquivo HTML e insira o HTML de exemplo desta seção.
    1. Digite um Nome e uma Descrição para o componente (por exemplo, Case_Record_CoPilot).
    2. Entre as tags <template> fornecidas, adicione o trecho do iFrame personalizado que é gerado por meio da Automation Anywhere (código incorporado). Consulte a etapa 6 para obter o HTML de exemplo, que também contém uma tag de cartão lightning para exibir um título no componente.
    3. Substitua o YOUR CONTROL ROOM URL por um valor apontando para sua Control Room.
    4. Certifique-se de que o parâmetro referrerpolicy=”origin” esteja no modelo HTML para evitar problemas de origem cruzada.
  2. Salve o widget.
  3. Identifique o arquivo para seu Javascript e insira o exemplo de Javascript. Esse arquivo representa seu controlador.
    1. Digite o nome (por exemplo, Case-Record-CoPilot.js).
    2. Edite Case field names adequadamente para os dados que você precisa transferir. Use uma lista separada por vírgulas de nomes de API que correspondam aos campos no Salesforce de onde os dados são mapeados.
    3. Substitua YOUR CONTROL ROOM URL pelo domínio da Control Room.
    4. Substitua Process ID pelo ID do processo Automation Co-Pilot, encontrado no URL do processo.
    5. Certifique-se de substituir TextBox0 e Dropdown3 pelos IDs de elemento que correspondam aos elementos iniciais do formulário em Automation Co-Pilot. Adicione campos adicionais conforme necessário.
    6. Os dados que serão mapeados para o campo do formulário são representados por this.caseRec.fields.Status.value.
      • O caseRec é um objeto que possui vários valores de campo que são acessados por meio da notação de ponto.
      • O nome do field que você deseja mapear segue os campos e
      • O value garante que o valor dos dados seja o que é recuperado e mapeado.
  4. Assim que o mapeamento estiver concluído, clique com o botão direito no arquivo JS.
  5. No menu, selecione SFDX: Implantar origem na organização. Isso faz com que um novo componente seja gerado e disponibilizado em sua instância do Salesforce.
  6. Por último, abra o Editor de layout de página no registro de caso ou no componente que você está mapeando e arraste o LWC para o layout de página.
  7. Salve as alterações.
  8. Teste o processo. Os dados devem ser mapeados para as entradas. Se você não vir nenhum dado, talvez haja um erro no código. Use as ferramentas para desenvolvedores do Chrome para inspecionar os registros do console e localizar o problema.

Amostra de modelo HTML

Use a amostra das seções a seguir para modelar o código que você usará para o requisito comercial.

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

O código de amostra conectará o iFrame aos dados de gravação do Salesforce usando o método PostMessage (serviço de transferência). Especifique a lista de campos em seu formulário para obter a constante FIELD e enviar para getRecord. O serviço de transferência preencherá os dados que serão mapeados em variáveis e adicionados à carga de postMessage. Confira a seguir um exemplo que você pode modificar para atender às suas necessidades comerciais pessoais.

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