工作流活动

上次更新日期 2026年2月25日

使用自定义 HTML 设计表单

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

提示：

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

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

getValue: function (elementId) - 用于检索表单值。
setValue: function (elementId, value) - 允许您设置表单值。
sendMessage: function (id, value) - 允许您触发表单事件，例如Closed 。在表单触发器活动中，您使用此 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>