Criação do arquivo do formulário HTML

Esta parte do tutorial mostra como projetar um arquivo de formulário HTML personalizado, usando as APIs do UiPath.

1. Crie um arquivo HTML e dê ao formulário um título, usando a tag <title> .
   Por exemplo, <title>My HTML Form</title>
2. Aplique um estilo ao formulário, com base no seu caso de uso.
   Para esse exemplo, o estilo CSS é aplicado usando a tag <style type="text/css"> .
3. Após aplicar o estilo, adicione as APIs da UiPath como JavaScript dentro do seu arquivo HTML, da seguinte forma:

   <script type="text/javascript">
   			var uiPathApi = {
                   getValue: function (elementId) {
                       // this is a callback, being called from the workflow
                       // enter your own code to get element values
                       var el = document.getElementById(elementId);
                       if (el.value == undefined) {
                           return el.innerHTML;
                       } else {
                           if (el.checked == undefined) {
                               return el.value;
                           } else {
                               return el.checked;
                           }
                       }
                   },
           
                   setValue: function (elementId, value) {
                       // this is a callback, being called from the workflow
                       // enter your own code to set element values
                       var el = document.getElementById(elementId);
                       if (el.value == undefined) {
                           el.innerHTML = value;
                       } else {
                           if (el.checked == undefined) {
                               el.value = value;
                           } else {
                               el.checked = value;
                           }
                       }
                   },
           
                   // Call this to trigger a "Form Message" event
                   // This function is set by the forms engine after the page loads,
                   // but declaring it here as empty helps with code autocompletion
                   sendMessage: function (id, value) { },
   			};
   	</script>

4. Crie um evento de formulário para cada botão, usando uipathAPI.sendMessage, dentro de uma tag <script> .
   Para este exemplo, crie um evento para quando o botão OK for clicado:

   function okClicked() {
   			uiPathApi.sendMessage("ok clicked");
   		}

   E, em seguida, crie um evento para quando o botão Cancelar for clicado:

   function cancelClicked() {
   			uiPathApi.sendMessage("cancel clicked");
   		}

5. Comece a criar o formulário adicionando componentes.
6. Adicione o título do formulário dentro de uma tag <div> .
   Para este exemplo, use o seguinte título:

   <div>Welcome to UiPath! Click OK to continue or Cancel to close this automation.</div>

7. Adicione os componentes Botão e defina os eventos que eles disparam, de maneira semelhante a como você configuraria um componente Botão dentro do Construtor de Formulários.
   Para esse exemplo, adicione os botões a seguir e os eventos correspondentes:

   <div class="actions">
   		<button class="confirm" onclick="okClicked()">OK</button>
   		<button class="cancel" onclick="cancelClicked()">Cancel</button>
   	</div>

8. Adicione a data e hora ativa na parte inferior do formulário, usando um argumento chamado como time.

   <div class="bottom">Current date/time is <span id="time">N/A</span></div>

Após finalizar o design do arquivo HTML, comece a criar seu projeto no Studio usando esse arquivo.