活动
最新
False
横幅背景图像
工作流活动
上次更新日期 2024年2月23日

创建 HTML 表单文件

本教程的这一部分演示如何使用 UiPath API 设计自定义 HTML 表单文件。
  1. 创建一个 HTML 文件,并使用 <title> 标签为表单指定标题。
    例如:<title>My HTML Form</title>
  2. 根据您的用例,对表单应用一些样式。
    在此示例中,使用 <style type="text/css"> 标签应用 CSS 样式。
  3. 应用样式后,在 HTML 文件中将 UiPath API 添加为 JavaScript,如下所示:
    <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>
  4. <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");
    		}
  5. 通过添加组件开始构建表单。
  6. <div> 标签内添加表单标题。
    对于本示例,请使用以下标题:
    <div>Welcome to UiPath! Click OK to continue or Cancel to close this automation.</div><div>Welcome to UiPath! Click OK to continue or Cancel to close this automation.</div>
  7. 添加“ 按钮 ”组件并定义它们触发的事件,这与在“ 表单生成器”中配置“按钮”组件的方式类似。
    对于本示例,添加以下按钮和相应的事件:
    <div class="actions">
    		<button class="confirm" onclick="okClicked()">OK</button>
    		<button class="cancel" onclick="cancelClicked()">Cancel</button>
    	</div><div class="actions">
    		<button class="confirm" onclick="okClicked()">OK</button>
    		<button class="cancel" onclick="cancelClicked()">Cancel</button>
    	</div>
  8. 使用名为 time的参数,在表单底部添加实时日期和时间。
    <div class="bottom">Current date/time is <span id="time">N/A</span></div><div class="bottom">Current date/time is <span id="time">N/A</span></div>
完成 HTML 文件设计后,即可开始使用此文件在 Studio 中构建项目。

此页面是否有帮助?

获取您需要的帮助
了解 RPA - 自动化课程
UiPath Community 论坛
Uipath 白色徽标
信任与安全
© 2005-2024 UiPath. All rights reserved.