工作流活动

上次更新日期 2025年3月25日

创建 HTML 表单文件

本教程的这一部分演示如何使用 UiPath API 设计自定义 HTML 表单文件。

创建一个 HTML 文件，并使用 <title> 标签为表单指定标题。
例如：<title>My HTML Form</title>
根据您的用例，对表单应用一些样式。
在此示例中，使用 <style type="text/css"> 标签应用 CSS 样式。

应用样式后，在 HTML 文件中将 UiPath API 添加为 JavaScript，如下所示：

 [object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object]<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> 标签内使用 uipathAPI.sendMessage为每个按钮创建表单事件。

在此示例中，为单击“ 确定 ”按钮时创建一个事件：

 function okClicked() {
			uiPathApi.sendMessage("ok clicked");
		}function okClicked() {
			uiPathApi.sendMessage("ok clicked");
		}

然后为单击“ 取消 ”按钮时创建一个事件：

 function cancelClicked() {
			uiPathApi.sendMessage("cancel clicked");
		}function cancelClicked() {
			uiPathApi.sendMessage("cancel clicked");
		}

通过添加组件开始构建表单。

在 <div> 标签内添加表单标题。

对于此示例，请使用以下标题：

 Welcome to UiPath! Click OK to continue or Cancel to close this automation.<div>Welcome to UiPath! Click OK to continue or Cancel to close this automation.</div>

添加“ 按钮 ”组件并定义它们触发的事件，这与在“ 表单生成器”中配置“按钮”组件的方式类似。

对于此示例，添加以下按钮和相应的事件：

 [object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object]<div class="actions">
		<button class="confirm" onclick="okClicked()">OK</button>
		<button class="cancel" onclick="cancelClicked()">Cancel</button>
	</div>

使用名为 time的参数，在表单底部添加实时日期和时间。

 Current date/time is N/A<div class="bottom">Current date/time is <span id="time">N/A</span></div>

完成 HTML 文件设计后，即可开始使用此文件在 Studio 中构建项目。

此页面有帮助吗？

前一个适用于 HTML 表单和标注的 API

下一个在 Studio 中构建项目

获取您需要的帮助

了解 RPA - 自动化课程

UiPath Community 论坛