Daten aus ServiceNow dem Formular zuordnen

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

Bevor Sie beginnen

Im folgenden Beispiel wird ServiceNow als Host-Anwendung verwendet, um die Verwendung von HTML und JavaScript für die Übertragung von Daten vom Host zu Automation Co-Pilot (iFrame-Widget) zu demonstrieren. Der referenzierte Code ordnet vorhandene Werte von der Host-Seite (ServiceNow) den anfänglichen Formularelementen des Automation Co-Pilot-Prozesses zu. Der Code in diesem Beispiel ist generisch und kann in ähnlichen Anwendungen verwendet werden, um die Struktur für Bearbeitungen zu modellieren, die an den Elementen Ihrer spezifischen Geschäftsanforderungen vorgenommen werden. Die Entwicklung und Einrichtung des iFrame-Widgets ist spezifisch für ServiceNow-Parameter.

Achten Sie darauf, dass die folgenden Voraussetzungen erfüllt sind:
  • Es wurde eine vom System erstellte Rolle namens AAE_Robotic_Interface User für den Endnutzer bereitgestellt.
  • Sie haben Zugriff auf die Automation Co-Pilot für Geschäftsanwender auf der Weboberfläche.
  • Sie haben Zugriff auf eine Host-Webanwendung Ihrer Wahl, die die iFrame-Technologie unterstützt.
  • Sie haben das iFrame-Widget bereits eingerichtet. Weitere Einzelheiten finden Sie unter Konfigurieren eines iFrame-Widgets in einer Webanwendung.

Vorgehensweise

  1. Klicken Sie in ServiceNow auf Erstellung starten. Dadurch werden Sie zu Ihrem entsprechenden Entwicklerkonto weitergeleitet. ServiceNow-Entwicklerkonto
  2. Navigieren Sie durch die folgenden Punkte: Alle > Service-Portal > Service-Portal-Konfiguration > Service-Portal-Konfiguration > Widget-Editor > Ein neues Widget erstellen.
  3. Aktivieren Sie Testseite erstellen während der Erstellung des Widgets, um die HTML-Vorlage und das Client-Skript während der Entwicklung anzuzeigen.
  4. Klicken Sie auf Vorschau aktivieren und klicken Sie auf das Auge-Symbol, um die Vorschau-Registerkarte zum Testen der Codeänderungen anzuzeigen.
  5. Verwenden Sie das folgenden Beispiel, um den Code zu modellieren, den Sie für Ihre Geschäftsanforderungen verwenden werden.
    Anmerkung: Der Code in diesem Beispiel ist generisch und kann in ähnlichen Anwendungen als Modell verwendet werden. Die Entwicklung und Einrichtung des iFrame-Widgets ist spezifisch für ServiceNow-Parameter. Siehe: Daten aus HTML in ein Formular übertragen.
    1. Fügen Sie den entsprechenden Code zum Client-Skript hinzu.
    2. Fügen Sie das Automation Co-Pilot-iFrame-Element in die HTML-Vorlage ein.
    3. Vergewissern Sie sich, dass der Parameter referrerpolicy=”origin” in Ihrer HTML-Vorlage enthalten ist, um Probleme mit der Herkunft zu vermeiden.
  6. Speichern Sie Ihr Widget. Die Vorschau wird geladen.
  7. Überprüfen Sie die Vorschau und nehmen Sie die erforderlichen Änderungen an der HTML-Vorlage und dem Client-Skript vor.
  8. Speichern Sie Ihre Änderungen.

HTML-Beispiel

<div>
<!-- your widget template -->
<label for="fname">First name:</label>
<input type="text" id="fname" name="fname" value="sikha"><br><br>
<label for="lname">Last name:</label>
<input type="text" id="lname" name="lname" value="poyyil"><br><br>

<iframe 
src='https://aa-pet-us-17.my.automationanywhere.digital/copilot?tags=%5B%5D' 
name="aari-embedded-app" 
width="100%" 
height="500px" 
style="border: none;" 
referrerpolicy="origin">
</iframe>
</div>

Client-Skript-Beispiel

api.controller=function() {
  /* widget controller */
  var c = this;
  console.log(c)
  console.log(window)
  var getLatestData = function() {
   return {
    167 : {
     TextBox0: document.getElementById("fname").value,
     TextBox1: document.getElementById("lname").value, 
     hiddenVariable0: document.getElementById("id").value 
         }
        };
       }
  console.log("Data" + JSON.stringify(getLatestData()));
  console.log(event)
  setTimeout(function() {
   window.addEventListener('message', function(event) {
    if(event.data.aariDataRequest === 'aari-data-request') {
     var mappedHostData = getLatestData();
     var id = event.data.processId ||event.data.botId;
     console.log("Event data: " + JSON.stringify(event.data));
     console.log("Data passed: " + JSON.stringify(mappedHostData[id]));
     var iframeElement = document.getElementsByName("aari-embedded-app")[0];
     iframeElement.contentWindow.postMessage({data: mappedHostData[id]
          }, 
    iframeElement.getAttribute("src")); 
         }
        });
       }, 100);
};