创建 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 中构建项目。