Crie formulários usando HTML personalizado

Em vez de criar formulários com arquivos uiform que você cria no Studio, é possível criar formulários personalizados usando arquivos HTML que você carrega dentro do seu projeto. Este tutorial demonstra como criar e exibir um formulário simples usando um arquivo HTML. Este formulário exibe uma mensagem curta, dois botões e a data e hora ativa quando o usuário interage com o formulário.

Dica: Você também pode aplicar essas etapas para criar arquivos de texto explicativo HTML personalizados.

Para construir formulários HTML personalizados que permitam obter e definir valores de formulário, além de disparar eventos de formulário, você precisa usar APIs da UiPath específicas. O exemplo abaixo contém três APIs específicas da UiPath que você deve integrar em seus formulários HTML personalizados:

getValue: function (elementId) — permite que você recupere valores do formulário.
setValue: function (elementId, value) — permite definir valores do formulário.
sendMessage: function (id, value) — permite disparar um evento de formulário, como Encerrado. Dentro da atividade Form Trigger, qualquer evento de formulário que você criar usando essa API poderá ser acessado apenas como um Evento de mensagem de formulário .

Adicione os APIs de exemplo abaixo em seus arquivos de formulário HTML personalizados:

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