カスタム HTML を使用してフォームを設計する

Studio で構築した uiform ファイルを使用してフォームを作成する代わりに、プロジェクト内にアップロードした HTML ファイルを使用してカスタムフォームを作成できます。このチュートリアルでは、HTML ファイルを使用してシンプルなフォームを作成および表示する方法を説明します。ユーザーがこのフォームを操作すると、短いメッセージ、2 つのボタン、および現在の日時が表示されます。

ヒント: これらの手順を適用してカスタム HTML 吹き出しファイルを作成することもできます。

フォームの値を取得・設定したり、フォームイベントをトリガーしたりできるカスタム HTML フォームを構築するには、特定の UiPath API を使用する必要があります。以下のサンプルには、お使いのカスタム HTML フォームに統合する必要がある UiPath 固有の API が 3 つ含まれています。

getValue: function (elementId) - フォームの値を取得できます。
setValue: function (elementId, value) - フォームの値を設定できます。
sendMessage: function (id, value) - [終了] などのフォームイベントをトリガーできます。[フォームトリガーアクティビティ] 内では、この API を使用して作成したフォームイベントにはフォームメッセージ イベントとしてのみアクセスできます。

カスタム HTML フォームファイルに以下のサンプル API を追加します。

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