Daten aus Salesforce dem Formular zuordnen

Dieses Beispiel kann zur Modellierung von Code bei der Entwicklung von iFrame-Widgets zur Übertragung und Nutzung von Hostdaten in Salesforce verwendet werden.

Achtung:

Sie müssen den Control Room auf der Seite „Vertrauenswürdige URL“ des Inhaltsdienstanbieters hinzufügen, sonst werden die Daten nicht vom Host an Automation Co-Pilot weitergegeben und es kommt zu Fehlern.

Hilfe und Trainings-Community

Übersicht

Im folgenden Beispiel wird Salesforce als Host-Anwendung genutzt, um die Verwendung von HTML und JavaScript für die Übertragung von Daten vom Host (Salesforce) an ein Automation Co-Pilot iFrame-Widget zu demonstrieren. Die Entwicklung und Einrichtung des iFrame-Widgets ist spezifisch für Salesforce-Parameter. Der Beispielcode ordnet vorhandene Werte von der Host-Seite den anfänglichen Formularelementen eines automatisierten Prozesses zu, der in Automation Co-Pilot ausgeführt wird. Der Code in diesem Beispiel ist generisch und kann in ähnlichen Anwendungen verwendet werden, um die Struktur zu modellieren. Ein Entwickler sollte die Elemente des Codes so bearbeiten, dass sie mit Ihren anfänglichen Formularelementen übereinstimmen. Dadurch werden Daten aus Salesforce Ihrem Widget zugeordnet, und während der Laufzeit der Automatisierung werden Felder vorausgefüllt, die die Daten Ihrer spezifischen Geschäftsanforderungen einbeziehen.

Achten Sie darauf, dass die folgenden Voraussetzungen erfüllt sind:
  • Verwenden Sie die AAE_Robotic_Administrator-Berechtigungen, um das Automation Co-Pilot iFrame-Widget einzurichten, und halten Sie den Einbettungscode bereit. Weitere Informationen finden Sie unter Konfigurieren eines iFrame-Widgets in einer Web-Anwendung.
  • Sie verfügen über Entwicklerzugriff auf Ihre Salesforce-Webanwendung, die die iFrame-Technologie unterstützt.
  • Sie verfügen über die dokumentierten Elemente und Attribute aus der Prozessautomatisierung, die im iFrame angezeigt werden.
    Insbesondere die Prozess-ID und die IDs der anfänglichen Formulareingabefelder.
    • Die Prozess-ID: Nutzer mit AAE_Robotic_Administrator-Berechtigung können diese durch Auswahl eines Prozesses aus der Prozessliste anzeigen. Beachten Sie den numerischen Wert in der URL: https://URL>/aari#/processes/97.
    • Eingabefeld ID: Felder aus dem Ausgangsformular des Prozesses im Formulardesigner. Sie verwenden die Element-ID-Felder für alle Eingabefelder, die den Salesforce-Daten zugeordnet werden sollen.

Entwicklung einer Lightning-Webkomponente für Salesforce

Entwickeln Sie eine Lightning-Webkomponente (LWC) in Salesforce, um den Einbettungscode für Ihr Automation Co-Pilot iFrame-Widget zu erhalten. LWC ist ein Stapel moderner, leichter Frameworks, die auf der Grundlage der neuesten Internetstandards mit HTML und Javascript entwickelt wurden. Für die Entwicklung und Bereitstellung einer LWC ist Visual Studio Code (VSCode) zusammen mit dem SFDX-Plugin erforderlich.
  • Die folgende Trailhead-Übung kann Sie dabei unterstützen, Ihre VSCode-Umgebung einzurichten, falls Sie noch keine haben. Einrichten der Visual Studio-Entwicklungsumgebung
  • Diese Trailhead-Übung kann Sie durch die Konfigurationen für Salesforce Extensions führen. Nicht alle Schritte sind erforderlich. In erster Linie helfen Ihnen die Schritte „Projekt erstellen“ und „Authentifizieren Ihrer Salesforce-Instanz“ beim Einstieg. Beginn der Codierung mit Visual Studio
Sie sind bereit, Ihre LWC zu entwickeln, wenn Sie die notwendigen Salesforce Extensions für VSCode installiert und sie für Ihre Salesforce-Instanz konfiguriert haben.

Vorgehensweise

Die folgenden Schritte beschreiben die Entwicklung von VSCode, der für Ihr LWC-Projekt benötigt wird. Verwenden Sie den entsprechenden bereitgestellten Beispielcode und bearbeiten Sie die Attribute mit Ihren Angaben, um Ihren Code an Ihre geschäftlichen Anforderungen anzupassen.
  1. Erstellen Sie eine neue HTML-Datei und fügen Sie das HTML-Beispiel für diesen Abschnitt ein.
    1. Geben Sie den Namen und die Beschreibung für die Komponente an (z. B. Case_Record_CoPilot).
    2. Fügen Sie zwischen den bereitgestellten <template>-Tags Ihr benutzerdefiniertes iFrame-Snippet ein, das durch Automation Anywhere generiert wird (Einbettungscode). Siehe Schritt 6 für das HTML-Beispiel, das auch ein Lightning-Card-Tag enthält, um einen Titel für die Komponente anzuzeigen.
    3. Ersetzen Sie YOUR CONTROL ROOM URL durch einen Wert, der auf Ihren Control Room verweist.
    4. Vergewissern Sie sich, dass der Parameter referrerpolicy=”origin” in Ihrer HTML-Vorlage enthalten ist, um Probleme mit der Herkunft zu vermeiden.
  2. Speichern Sie Ihr Widget.
  3. Ermitteln Sie die Datei für Ihr Javascript und fügen Sie das Javascript-Beispiel ein. Diese Datei stellt Ihren Controller dar.
    1. Geben Sie den Namen ein (z. B. Case-Record-CoPilot.js).
    2. Bearbeiten Sie die Case field names für die zu übertragenden Daten entsprechend. Verwenden Sie eine durch Komma getrennte Liste von API-Namen, die mit den Feldern in Salesforce übereinstimmen, von denen die Daten zugeordnet werden.
    3. Ersetzen Sie YOUR CONTROL ROOM URL durch die Domain Ihres Control Rooms.
    4. Ersetzen Sie die Process ID durch die ID des Automation Co-Pilot-Prozesses. Sie finden Sie in der URL des Prozesses.
    5. Ersetzen Sie TextBox0 und Dropdown3 durch Element-IDs, die mit den ursprünglichen Formularelementen in Automation Co-Pilot übereinstimmen. Fügen Sie bei Bedarf weitere Felder hinzu.
    6. Die Daten, die dem Formularfeld zugeordnet werden, werden durch this.caseRec.fields.Status.value dargestellt.
      • Der caseRec ist ein Objekt, das eine Reihe von Feldwerten enthält, auf die durch Punktnotation zugegriffen wird.
      • Der field-Name, den Sie zuordnen möchten, folgt Feldern und
      • der value stellt sicher, dass der Datenwert abgerufen und zugeordnet wird.
  4. Sobald die Zuordnung abgeschlossen ist, klicken Sie mit der rechten Maustaste auf Ihre JS-Datei.
  5. Wählen Sie im Menü die Option SFDX: Quelle für Organisation bereitstellen aus. Dadurch wird Ihre neue Komponente generiert und in Ihrer Salesforce-Instanz verfügbar gemacht.
  6. Öffnen Sie schließlich den Seitenlayout-Editor im Falldatensatz oder in der Komponente, die Sie zuordnen, und ziehen Sie Ihre LWC auf das Seitenlayout.
  7. Speichern Sie Ihre Änderungen.
  8. Testen Sie Ihren Prozess. Die Daten sollten den Eingaben zugeordnet werden. Wenn Sie keine Daten sehen, liegt möglicherweise ein Fehler im Code vor. Verwenden Sie die Chrome-Entwicklerwerkzeuge, um die Konsolenprotokolle zu prüfen und das Problem zu lokalisieren.

Beispiel einer HTML-Vorlage

Gehen Sie nach dem Beispiel aus den folgenden Abschnitten vor, um den Code zu modellieren, den Sie für Ihre Geschäftsanforderungen verwenden werden.

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

Mit dem Beispielcode wird iFrame unter Verwendung der PostMessage-Methode (Nachrichtenagentur) mit den Salesforce-Datensätzen verbunden. Geben Sie die Liste der Felder in Ihrem Formular an, um die Konstante FIELD hineinzuziehen, und übermitteln Sie diese dann an getRecord. Die Nachrichtenagentur füllt die Daten auf, die dann in Variablen abgebildet und der postMessage-Nutzlast hinzugefügt werden. Es folgt ein Beispiel, das Sie für Ihre persönlichen Geschäftsanforderungen abändern können.

Beispiel für 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); } } } }