Map data from ServiceNow to form

The following example can be used to model code when developing the iFrame widget to transfer and consume host data in ServiceNow.

Before you begin

The following example uses ServiceNow as the host application to demonstrate using HTML and JavaScript to enable the transfer of data from host to Automation Co-Pilot (iFrame widget). The referenced code maps existing values from the host page (ServiceNow) to the Automation Co-Pilot process initial form elements. The code in this example is generic and can be used in similar applications to model structure for edits made to the elements of your specific business needs. Development and setup of the iFrame widget is specific to ServiceNow parameters.

Ensure you have completed the following.
  • Provided a system-created AAE_Robotic_Interface User role for the end user.
  • Have access to the Automation Co-Pilot for Business Users on the web interface.
  • Have access to the host web application of your choice that supports the iFrame technology.
  • You already set up the iFrame widget. For more details, see Configure an iFrame widget in a web application.

Procedure

  1. From ServiceNow, click Start Building. This will redirect you to your corresponding developer account. ServiceNow developer account
  2. Navigate through the following: All > Service Portal > Service Portal Configuration > Service Portal Configuration > Widget Editor > Create a New Widget.
  3. Enable Create test page while creating the widget to view the HTML template and client script during development.
  4. Click Enable Preview and click the eye icon to show the preview tab for testing the code changes.
  5. Use the following sample to model the code you will use for your business requirement.
    Note: The code in this example is generic and can be used in similar applications as a model. Development and setup of the iFrame widget is specific to ServiceNow parameters. See : Map data from HTML to form.
    1. Add the corresponding code to Client script.
    2. Add the Automation Co-Pilot iFrame element to the HTML template.
    3. Ensure the parameter referrerpolicy=”origin” is in your HTML template to avoid cross origin issues.
  6. Save your widget. The preview will load.
  7. Review the preview and make necessary edits to the HTML template and client script.
  8. Save your changes.

Sample of HTML

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

Sample of Client script

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