Mappage des données de Salesforce vers un formulaire

Vous pouvez utiliser cet exemple pour modéliser le code lors du développement du Widget iFrame en vue de transférer et de consommer les données de l'hôte depuis Salesforce.

Avertissement :

Vous devez ajouter la Control Room à la page URL de confiance du fournisseur de services de contenu, sinon les données ne seront pas transmises de l'hôte vers Copilote d\'automatisation et provoqueront des erreurs.

Communauté d'aide et de formation

Présentation

Dans l'exemple suivant, nous utilisons Salesforce comme application hôte pour illustrer l'utilisation de HTML et de JavaScript permettant le transfert de données de l'hôte (Salesforce) vers un Widget iFrame Copilote d\'automatisation. Le développement et la configuration du Widget iFrame sont spécifiques aux paramètres de Salesforce. L'exemple de code mappe les valeurs existantes de la page hôte aux éléments de formulaire initiaux d'un processus automatisé, exploité dans Copilote d\'automatisation. Dans cet exemple, le code est générique et peut être utilisé pour modéliser la structure dans des applications similaires. Un développeur doit modifier les éléments du code pour qu'ils correspondent à vos éléments de formulaire initiaux. Cela permettra de mapper les données de Salesforce à votre widget et de créer des champs pré-remplis lors de l'exécution de l'automatisation, qui incluront les données nécessaires à votre activité spécifique.

Assurez-vous que vous avez suivi les étapes ci-dessous.
  • Utiliser les autorisations AAE_Robotic_Administrator pour configurer le Widget iFrame Copilote d\'automatisation et avoir le code d'intégration à portée de main. Consultez Configurer un widget iFrame dans une application Web.
  • Disposer d'un accès de développeur à votre application Web Salesforce qui prend en charge la technologie iFrame.
  • Disposer des éléments et attributs documentés de l'automatisation des processus qui apparaîtront dans le iFrame.
    En particulier, l'ID de processus et les ID des fichiers de saisie du formulaire initial.
    • L'ID de processus : L'utilisateur disposant des autorisations AAE_Robotic_Administrator peut afficher un processus en le sélectionnant dans votre liste de processus. Remarque la valeur numérique dans l'URL (https://URL>/aari#/processes/97).
    • ID du fichier de saisie  : Champs du formulaire initial du processus dans le concepteur de formulaires. Vous utiliserez les champs ID élément pour tous les fichiers de saisie qui doivent être mis en correspondance avec les données Salesforce.

Développer un composant Web Lightning pour Salesforce

Développez un composant Web Lightning (LWC) dans Salesforce pour recevoir le code d'intégration de votre Widget iFrame Copilote d\'automatisation. Le LWC est une pile de cadres légers modernes créés sur la base des dernières normes du Web, utilisant les langages HTML et Javascript. Le développement et le déploiement d'un LWC nécessitent Visual Studio Code (VSCode) et le plug-in SFDX.Vous êtes prêt à développer votre LWC lorsque vous avez installé les extensions Salesforce pour VSCode nécessaires et que vous les avez configurées pour votre instance Salesforce.

Procédure

Les étapes suivantes décrivent le développement du code VSC nécessaire à votre projet de LWC. Utilisez l'exemple de code correspondant fourni et modifiez les attributs en y ajoutant vos détails pour adapter votre code aux besoins de votre entreprise.
  1. Créez un nouveau fichier HTML et insérez l'exemple HTML pour cette section.
    1. Saisissez le nom et la description du composant (p. ex, Case_Record_CoPilot).
    2. Entre les balises <template>, ajoutez votre extrait iFrame personnalisé généré par Automation Anywhere (code d'intégration). Rendez-vous à l'étape 6 pour découvrir l'exemple HTML, qui contient également une balise lightning-card permettant d'afficher un titre sur le composant.
    3. Remplacez YOUR CONTROL ROOM URL par une valeur qui pointe vers votre Control Room.
    4. Veillez à ce que le paramètre referrerpolicy=”origin” figure dans votre modèle HTML afin d'éviter les problèmes entre origines.
  2. Enregistrez votre widget.
  3. Identifiez le fichier de votre Javascript et insérez l'exemple de Javascript. Ce fichier représente votre contrôleur.
    1. Saisissez le nom (p. ex, Case-Record-CoPilot.js).
    2. Modifiez les Case field names en fonction des données à transférer. Utilisez une liste de noms d'API séparés par des virgules qui correspondent aux champs de Salesforce à partir desquels les données sont mappées.
    3. Remplacez YOUR CONTROL ROOM URL par le domaine de votre Control Room.
    4. Remplacez l'Process ID par l'ID de processus Copilote d\'automatisation (vous le trouverez dans l'URL du processus).
    5. Veillez à remplacer TextBox0 et Dropdown3 par des ID d'éléments correspondant aux éléments de formulaire initiaux dans Copilote d\'automatisation. Ajoutez des champs supplémentaires si nécessaire.
    6. Les données qui seront mappées au champ du formulaire sont représentées par this.caseRec.fields.Status.value.
      • caseRec est un objet qui possède un certain nombre de valeurs de champ accessibles par la notation par points.
      • Le nom du field que vous souhaitez mapper suit les champs et
      • value garantit que la valeur des données est celle qui est récupérée et mappée.
  4. Une fois le mappage terminé, faites un clic droit sur votre fichier JS.
  5. Dans le menu, sélectionnez SFDX : Déployer la source dans l'organisation. Cette opération génère votre nouveau composant et le rend disponible dans votre instance Salesforce.
  6. Enfin, ouvrez l'Éditeur de mise en page à partir de l'enregistrement du cas ou du composant que vous mappez, et faites glisser votre LWC sur la mise en page.
  7. Enregistrez vos modifications.
  8. Testez votre processus. Les données doivent être mappées avec les entrées. Si vous ne voyez aucune donnée, c'est que le code comporte peut-être une erreur. Utilisez les outils de développement de Chrome pour inspecter les journaux de la console et localiser le problème.

Exemple de modèle HTML

Utilisez l'exemple des sections suivantes pour modéliser le code que vous utiliserez pour les besoins de votre entreprise.

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

L'exemple de code connectera l'iFrame aux données de l'enregistrement Salesforce à l'aide de la méthode PostMessage (service filaire). Spécifiez la liste des champs de votre formulaire pour obtenir la constante CHAMP et fournissez-la à getRecord. Le service filaire alimentera les données qui seront ensuite mappées dans des variables et ajoutées à la charge utile postMessage. Voici un exemple que vous pouvez modifier en fonction des besoins de votre entreprise.

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