Diseñar formularios utilizando HTML personalizado

En lugar de crear formularios con archivos uiform creados en Studio, puedes crear formularios personalizados utilizando archivos HTML que cargues dentro de tu proyecto. Este tutorial muestra 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 en las que el usuario interactúa con el formulario.

Consejo: también puede aplicar estos pasos para crear archivos de aviso 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 activar un evento de formulario, como Cerrado. Dentro de la actividad desencadenador del formulario, solo se puede acceder a cualquier evento de formulario que crees con esta API como evento de mensaje del 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><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>