Crear el archivo de formulario HTML

Esta parte del tutorial muestra cómo diseñar un archivo de formulario HTML personalizado, utilizando las API de UiPath.

1. Crea un archivo HTML y asigna un título al formulario con la etiqueta <title> .
   Por ejemplo, <title>My HTML Form</title>
2. Aplique algo de estilo al formulario según su caso práctico.
   Para este ejemplo, se aplica el estilo CSS mediante la etiqueta <style type="text/css"> .
3. Después de aplicar el estilo, agrega las API de UiPath como JavaScript dentro de tu archivo HTML, de la siguiente manera:

    <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. Crea un evento de formulario para cada botón, utilizando uipathAPI.sendMessage, dentro de una etiqueta <script> .
   Para este ejemplo, cree un evento para cuando se haga clic en el botón Aceptar :

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

   Y luego crear un evento para cuando se haga clic en el botón Cancelar :

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

5. Comience a crear el formulario agregando componentes.
6. Añade el título del formulario dentro de una etiqueta <div> .
   Para este ejemplo, utilice el siguiente título:

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

7. Añade los componentes del Botón y define los eventos que desencadenan, de forma similar a como se configuraría un componente del Botón dentro del Creador de formularios.
   Para este ejemplo, añade los siguientes botones y los eventos correspondientes:

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

8. Agrega la fecha y hora de publicación al final del formulario, usando un argumento llamado time.

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

Después de terminar de diseñar su archivo HTML, comience a crear su proyecto en Studio con este archivo.