使用自定义 HTML 设计表单

Instead of creating forms with uiform files that you build in Studio, you can create custom forms, using HTML files that you upload inside your project. This tutorial demonstrates how to create and display a simple form using an HTML file. This form displays a short message, two buttons, and the live date and time when the user interacts with the form.

提示：

您也可以应用这些步骤来创建自定义 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>

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

工作流示例

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