activities

latest

false

Importante :

Este contenido se ha localizado parcialmente a partir de un sistema de traducción automática. La localización de contenidos recién publicados puede tardar entre una y dos semanas en estar disponible.

Actividades del flujo de trabajo

Última actualización 7 de abr. de 2026

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.

Crea un archivo HTML y asigna un título al formulario con la etiqueta <title> .

Por ejemplo, <title>My HTML Form</title>
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"> .

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

Crea un evento de formulario para cada botón, utilizando uipathAPI.sendMessage, dentro de una etiqueta <script> .

Para este ejemplo, crea un evento para cuando se haga clic en el botón Aceptar :

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

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

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

Comience a crear el formulario agregando componentes.

Añade el título del formulario dentro de una etiqueta <div> .

Para este ejemplo, utiliza el siguiente título:

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

Añade los componentes Botón y define los eventos que desencadenan, de forma similar a como configurarías un componente 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>
<div class="actions">
        <button class="confirm" onclick="okClicked()">OK</button>
        <button class="cancel" onclick="cancelClicked()">Cancel</button>
    </div>

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

¿Te ha resultado útil esta página?

AnteriorAPI para formularios HTML y llamadas

Sig.Construyendo el proyecto en Studio