Mappage des données de Salesforce vers un formulaire
- Mis à jour : 2023/11/14
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.
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 Automation Co-Pilot et provoqueront des erreurs.
Avant de commencer
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 vers Automation Co-Pilot (Widget iFrame). Le code référencé mappe les valeurs existantes de la page hôte (Salesforce) sur les éléments du formulaire initial du processus Automation Co-Pilot. Le code de cet exemple est générique et peut être utilisé dans des applications similaires pour modéliser la structure des modifications apportées aux éléments selon vos besoins spécifiques. Le développement et la configuration du Widget iFrame sont spécifiques aux paramètres de Salesforce. Developer Console de Salesforce
- A fourni un rôle AAE_Robotic_Interface User créé par le système pour l'utilisateur final.
- A accès à l'Automation Co-Pilot pour les utilisateurs professionnels sur l'interface Web.
- A accès à l'application Web hôte de votre choix qui prend en charge la technologie iFrame.
- Vous avez déjà configuré le widget iFrame. Pour plus de détails, consultez l'article Configurer un widget iFrame dans une application Web.
Procédure
- Dans Salesforce, cliquez sur pour ouvrir l'environnement de développement.
- Accédez aux pages suivantes : .
- Activez l'option Create test page (Créer une page de test) lors de la création du widget pour afficher le modèle html et le script client pendant le développement.
- Cliquez sur Enable Preview (Activer l'aperçu) et cliquez sur l'icône d'œil pour afficher l'onglet d'aperçu permettant de tester les modifications du code.
- Utilisez l'exemple des sections suivantes pour modéliser le code que vous utiliserez pour les besoins de votre entreprise.Remarque : Dans cet exemple, le code est générique et peut être utilisé comme modèle dans des applications similaires. Le développement et la configuration du Widget iFrame sont spécifiques aux paramètres de Salesforce. Voir : Mappage des données de l'HTML vers un formulaire.
- Ajoutez le code correspondant au script du client.
- Ajoutez l'élément iFrame Automation Co-Pilot au modèle HTML.
- Veillez à ce que le paramètre
referrerpolicy=”origin”figure dans votre modèle HTML afin d'éviter les problèmes entre origines.
- Enregistrez votre widget. L'aperçu va se charger.
- Passez en revue l'aperçu et apportez les modifications nécessaires au modèle HTML et au script du client.
- Enregistrez vos modifications.
Exemple de modèle 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>
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 code
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);
}
}
}
}