Concevoir des formulaires à l’aide de code HTML personnalisé

Au lieu de créer des formulaires avec des fichiers uiform que vous créez dans Studio, vous pouvez créer des formulaires personnalisés à l'aide de fichiers HTML que vous téléchargez dans votre projet. Ce tutoriel montre comment créer et afficher un formulaire simple à l'aide d'un fichier HTML. Ce formulaire affiche un court message, deux boutons, ainsi que la date et l’heure de mise en production lorsque l’utilisateur interagit avec le formulaire.

Astuce : Vous pouvez également appliquer ces étapes pour créer des fichiers de légende HTML personnalisés.

Pour créer des formulaires HTML personnalisés qui vous permettent d'obtenir et de définir des valeurs de formulaire, ainsi que de déclencher des événements de formulaire, vous devez utiliser des API UiPath spécifiques. L'exemple ci-dessous contient trois API spécifiques à UiPath que vous devez intégrer dans vos formulaires HTML personnalisés :

getValue: function (elementId) - vous permet de récupérer les valeurs du formulaire.
setValue: function (elementId, value) : vous permet de définir des valeurs de formulaire.
sendMessage: function (id, value) : permet de déclencher un événement de formulaire, tel que Closed. Dans l' activité du déclencheur de formulaire, tout événement de formulaire que vous créez à l'aide de cette API n'est accessible qu'en tant qu'événement de message de formulaire .

Ajoutez les exemples d'API ci-dessous dans vos fichiers de formulaire HTML personnalisés :

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