Asignar datos de ServiceNow al formulario

El siguiente ejemplo se puede utilizar para modelar código al momento de desarrollar el Widget de iFrame para transferir y consumir datos del host en ServiceNow.

Antes de empezar

El siguiente ejemplo utiliza ServiceNow como aplicación host para demostrar el uso de HTML y JavaScript para permitir la transferencia de datos del host a Automation Co-Pilot (Widget de iFrame). El código al que se hace referencia asigna los valores existentes de la página de host (ServiceNow) a los elementos del formulario inicial del proceso de Automation Co-Pilot. El código de este ejemplo es genérico y se puede utilizar en aplicaciones similares para modelar la estructura de las ediciones realizadas en los elementos de sus necesidades empresariales específicas. El desarrollo y la configuración del Widget de iFrame son específicos de los parámetros de ServiceNow.

Asegúrese de haber completado lo siguiente.
  • Se proporcionó un rol de usuario AAE_Robotic_Interface creado por el sistema para el usuario final.
  • Tener acceso a Automation Co-Pilot para usuarios de negocios en la interfaz web.
  • Tener acceso a la aplicación web host de su elección que sea compatible con la tecnología iFrame.
  • Ya configuró el widget iFrame. Para obtener más detalles, consulte Configurar un widget iFrame en una aplicación web.

Procedimiento

  1. En ServiceNow, haga clic en Comenzar a crear. Esto lo redirigirá a su cuenta de desarrollador correspondiente. Cuenta de desarrollador de ServiceNow
  2. Navegue por lo siguiente: Todo > Portal de Servicios > Configuración de Portal de Servicios > Configuración de Portal de Servicios > Editor de widgets > Crear un nuevo widget.
  3. Active Crear página de prueba al crear el widget para ver la plantilla HTML y la secuencia de comandos del cliente durante el desarrollo.
  4. Haga clic en Habilitar vista previa y haga clic en el icono del ojo para mostrar la pestaña de vista previa y probar los cambios de código.
  5. Utilice el siguiente ejemplo para simular el código que utilizará para los requisitos de su empresa.
    Nota: El código de este ejemplo es genérico y se puede utilizar en aplicaciones similares como modelo. El desarrollo y la configuración del Widget de iFrame son específicos de los parámetros de ServiceNow. Consulte: Asignar datos de HTML a un formulario.
    1. Agregue el código correspondiente a la secuencia de comandos del cliente.
    2. Agregue el elemento iFrame de Automation Co-Pilot a la plantilla HTML.
    3. Asegúrese de que el parámetro referrerpolicy=”origin” está en la plantilla HTML para evitar problemas de origen cruzado.
  6. Guarde el widget. Se cargará la vista previa.
  7. Revise la vista previa y realice las ediciones necesarias en la plantilla HTML y la secuencia de comandos del cliente.
  8. Guarde sus cambios.

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

Ejemplo de script del cliente

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