创建 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>

4. 在 <script> 标签内使用 uipathAPI.sendMessage为每个按钮创建表单事件。
   在此示例中，为单击“ 确定 ”按钮时创建一个事件：

    function okClicked() {
   			uiPathApi.sendMessage("ok 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>

7. 添加“ 按钮 ”组件并定义它们触发的事件，这与在“ 表单生成器”中配置“按钮”组件的方式类似。
   对于此示例，添加以下按钮和相应的事件：

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

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