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ê deve adicionar Control Room na página URL confiável do provedor de serviços de conteúdo ou os dados não serão transmitidos do host para Automation Co-Pilot e, em vez disso, lançará erros.

Comunidade de ajuda e treinamento

Antes de começar

O exemplo a seguir usa o Salesforce como o aplicativo host para demonstrar o uso de HTML e JavaScript para habilitar a transferência de dados do host para Automation Co-Pilot (Widget do iFrame). O código referenciado mapeia os valores existentes da página do host (Salesforce) para os elementos do formulário inicial do processo Automation Co-Pilot. O código neste exemplo é genérico e pode ser usado em aplicativos semelhantes para modelar a estrutura das edições feitas nos elementos de suas necessidades comerciais específicas. O desenvolvimento e a configuração do Widget do iFrame são específicos para os parâmetros do Salesforce. Console do desenvolvedor do Salesforce

Certifique-se de ter concluído as seguintes etapas.
  • Concedeu uma função AAE_Robotic_Interface User criada pelo sistema ao usuário final.
  • Ter acesso ao Automation Co-Pilot para usuários corporativos na interface da web.
  • Tenha acesso a um aplicativo de Web host de sua escolha que seja compatível com a tecnologia iFrame.
  • Você já configurou o widget iFrame. Para obter mais detalhes, consulte Configurar um widget iFrame em um aplicativo da Web.

Procedimento

  1. No Salesforce, clique em Configuração (ícone de engrenagem) > Console do desenvolvedor para abrir o ambiente de desenvolvimento.
  2. Navegue pelas seguintes opções: Todos > Portal de serviços > Configuração do portal de serviços > Configuração do portal de serviços > Editor de widget > Criar um novo widget.
  3. Ative Criar página de teste ao criar o widget para visualizar o modelo HTML e o script do cliente durante o desenvolvimento.
  4. Clique em Habilitar visualização e clique no ícone do olho para mostrar a guia de visualização para testar as alterações de código.
  5. Use a amostra das seções a seguir para modelar o código que você usará para o requisito comercial.
    Nota: O código deste exemplo é genérico e pode ser usado em aplicativos semelhantes como um modelo. O desenvolvimento e a configuração do Widget do iFrame são específicos para os parâmetros do Salesforce. Consulte: Mapear dados de HTML para formulário.
    1. Adicione o código correspondente ao script do cliente.
    2. Adicione o elemento iFrame Automation Co-Pilot ao modelo HTML.
    3. Certifique-se de que o parâmetro referrerpolicy=”origin” esteja no modelo HTML para evitar problemas de origem cruzada.
  6. Salve o widget. A visualização será carregada.
  7. Revise a visualização e faça as edições necessárias no modelo HTML e no script do cliente.
  8. Salve as alterações.

Amostra de modelo 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>

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