使用自定义 HTML 设计表单

除了使用在 Studio 中构建的 uiform 文件创建表单，您还可以使用上传到项目中的 HTML 文件来创建自定义表单。 本教程演示如何使用 HTML 文件创建和显示简单表单。 此表单在用户与表单交互时显示一条简短消息、两个按钮以及实时日期和时间。

提示： 您也可以应用这些步骤来创建自定义 HTML 标注文件。

要构建允许获取和设置表单值以及触发表单事件的自定义 HTML 表单，您需要使用特定的 UiPath API。 下面的示例包含三个特定于 UiPath 的 API，应将它们集成到自定义 HTML 表单中：

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

在下面的视频中查看本教程的结果：

工作流示例

要按照这些步骤自行试用本教程，请查看 此处的示例项目。