Mapear dados do ServiceNow para o formulário

O exemplo a seguir pode ser usado para modelar o código ao desenvolver o Widget do iFrame para transferir e consumir dados do host no ServiceNow.

Antes de começar

O exemplo a seguir usa o ServiceNow como o aplicativo host para demonstrar o uso de HTML e JavaScript para habilitar a transferência de dados do host para Automation Co-Pilot (Widget do iFrame). O código referenciado mapeia os valores existentes da página do host (ServiceNow) para os elementos do formulário inicial do processo Automation Co-Pilot. O código neste exemplo é genérico e pode ser usado em aplicativos semelhantes para modelar a estrutura das edições feitas nos elementos de suas necessidades comerciais específicas. O desenvolvimento e a configuração do Widget do iFrame são específicos para os parâmetros do ServiceNow.

Certifique-se de ter concluído as seguintes etapas.
  • Concedeu uma função AAE_Robotic_Interface User criada pelo sistema ao usuário final.
  • Ter acesso ao Automation Co-Pilot para usuários corporativos na interface da web.
  • Tenha acesso a um aplicativo de Web host de sua escolha que seja compatível com a tecnologia iFrame.
  • Você já configurou o widget iFrame. Para obter mais detalhes, consulte Configurar um widget iFrame em um aplicativo da Web.

Procedimento

  1. No ServiceNow, clique em Começar a criar. Isso o redirecionará para sua conta de desenvolvedor correspondente. Conta de desenvolvedor ServiceNow
  2. Navegue pelas seguintes opções: Todos > Portal de serviços > Configuração do portal de serviços > Configuração do portal de serviços > Editor de widget > Criar um novo widget.
  3. Ative Criar página de teste ao criar o widget para exibir o modelo HTML e o script do cliente durante o desenvolvimento.
  4. Clique em Habilitar visualização e clique no ícone do olho para mostrar a guia de visualização para testar as alterações de código.
  5. Use a amostra a seguir para modelar o código que você usará para o requisito comercial.
    Nota: O código deste exemplo é genérico e pode ser usado em aplicativos semelhantes como um modelo. O desenvolvimento e a configuração do Widget do iFrame são específicos para os parâmetros do ServiceNow. Consulte: Mapear dados de HTML para formulário.
    1. Adicione o código correspondente ao script do cliente.
    2. Adicione o elemento iFrame Automation Co-Pilot ao modelo HTML.
    3. Certifique-se de que o parâmetro referrerpolicy=”origin” esteja no modelo HTML para evitar problemas de origem cruzada.
  6. Salve o widget. A visualização será carregada.
  7. Revise a visualização e faça as edições necessárias no modelo HTML e no script do cliente.
  8. Salve as alterações.

Amostra 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/aari/#/embedded?tags=%5B%5D' 
name="aari-embedded-app" 
width="100%" 
height="500px" 
style="border: none;" 
referrerpolicy="origin">
</iframe>
</div>

Amostra de script do 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 
         }
        };
       }
  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);
};