Diseñar formularios utilizando HTML personalizado

En lugar de crear formularios con archivos uiform que creas en Studio, puedes crear formularios personalizados, utilizando archivos HTML que cargas dentro de tu proyecto. Este tutorial demuestra cómo crear y mostrar un formulario simple utilizando un archivo HTML. Este formulario muestra un mensaje corto, dos botones y la fecha y hora en vivo cuando el usuario interactúa con el formulario.

Consejo:

También puedes aplicar estos pasos para crear archivos de llamada HTML personalizados.

Para crear formularios HTML personalizados que te permitan obtener y establecer valores de formulario, así como desencadenar eventos de formulario, debes usar API de UiPath específicas. El siguiente ejemplo contiene tres API específicas de UiPath que debe integrar en sus formularios HTML personalizados:

• getValue: function (elementId) : te permite recuperar valores del formulario.
• setValue: function (elementId, value) : te permite establecer valores del formulario.
• sendMessage: function (id, value) : te permite desencadenar un evento de formulario, como Cerrado. Dentro de la actividad de desencadenador de formulario, cualquier evento de formulario que crees utilizando esta API, solo se puede acceder como un evento de mensaje de formulario .

Añade las siguientes API de muestra en tus archivos de formulario HTML personalizado:

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

Vea el resultado de este tutorial en el siguiente vídeo:

Ejemplo de flujo de trabajo

Para seguir los pasos y probar el tutorial tú mismo, consulta el proyecto de ejemplo aquí.