Entwerfen Sie Formulare mit benutzerdefiniertem HTML

Anstatt Formulare mit uiform- Dateien zu erstellen, die Sie in Studio erstellen, können Sie benutzerdefinierte Formulare erstellen, indem Sie HTML-Dateien verwenden, die Sie in Ihr Projekt hochladen. Dieses Tutorial zeigt, wie ein einfaches Formular mit einer HTML-Datei erstellt und angezeigt wird. Dieses Formular zeigt eine kurze Nachricht, zwei Schaltflächen sowie das Live-Datum und die Uhrzeit an, zu der der Benutzer mit dem Formular interagiert.

Tipp: Sie können diese Schritte auch anwenden, um benutzerdefinierte HTML-Callout-Dateien zu erstellen.

Um benutzerdefinierte HTML-Formulare zu erstellen, mit denen Sie Formularwerte abrufen und festlegen sowie Formularereignisse auslösen können, müssen Sie bestimmte UiPath-APIs verwenden. Das folgende Beispiel enthält drei UiPath-spezifische APIs, die Sie in Ihre benutzerdefinierten HTML-Formulare integrieren sollten:

• getValue: function (elementId) – Ermöglicht Ihnen das Abrufen von Formularwerten.
• setValue: function (elementId, value) – Ermöglicht das Festlegen von Formularwerten.
• sendMessage: function (id, value) – Ermöglicht Ihnen das Auslösen eines Formularereignisses, z. B. Geschlossen. Innerhalb der Aktivität Formulartriggerkann auf jedes Formularereignis, das Sie mit dieser API erstellen, nur als Formularmeldungsereignis zugegriffen werden.

Fügen Sie die folgenden Beispiel-APIs in Ihren benutzerdefinierten HTML-Formulardateien hinzu:

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

Sehen Sie sich das Ergebnis dieses Tutorials im folgenden Video an:

Workflow-Beispiel

Um die Schritte zu befolgen und das Tutorial selbst auszuprobieren, sehen Sie sich das Beispielprojekt hier an.