以下示例可用于在开发 iFrame widget 时建模代码，以便在 ServiceNow 中传输和使用主机数据。

开始之前

以下示例使用 ServiceNow 作为主机应用程序，演示如何使用 HTML 和 JavaScript 实现从主机到 Automation Co-Pilot (iFrame widget) 的数据传输。 引用的代码将主页 (ServiceNow) 中的现有值映射到 Automation Co-Pilot 流程初始表单元素。 该示例中的代码是通用的，可以在类似应用程序中使用，以便为根据您特定业务需求对元素所做的修改建模。 iFrame widget 的开发和设置是针对 ServiceNow 参数的。

确保您已完成以下步骤。
  • 为最终用户提供系统创建的 AAE_Robotic_Interface 用户角色。
  • 拥有网页界面上的 Automation Co-Pilot for Business Users 的访问权限。
  • 拥有支持 iFrame 技术的所选主机网页应用程序的访问权限。
  • 您已经设置了 iFrame 小部件。 有关更多详细信息，请参阅 在网页应用程序中配置 iFrame 小部件。

过程

  1. 在 ServiceNow 中，单击开始构建。 这将引导您跳转到相应的开发人员账户。 ServiceNow 开发人员账户
  2. 浏览以下路径：所有 > 服务门户 > 服务门户配置 > 服务门户配置 > 小部件编辑器 > 创建新小部件。
  3. 在创建小部件时启用创建测试页面，以便在开发过程中查看 HTML 模板和客户端脚本。
  4. 单击启用预览，然后单击眼睛图标以显示用于测试代码更改的预览选项卡。
  5. 使用以下示例来建模您将用于业务需求的代码。
    注： 该示例中的代码是通用的，可以作为模型用于类似的应用程序。 iFrame widget 的开发和设置是针对 ServiceNow 参数的。 请参阅：将 HTML 中的数据映射到表单。
    1. 将相应的代码添加到客户端脚本中。
    2. 将 Automation Co-Pilot iFrame 元素添加到 HTML 模板中。
    3. 确保参数 referrerpolicy=”origin” 在您的 HTML 模板中，以避免跨源问题。
  6. 保存您的小部件。 将加载预览。
  7. 查看预览，并对 HTML 模板和客户端脚本进行必要的编辑。
  8. 保存您的更改。

HTML 示例

<div> <!-- your widget template --> <label for="fname"> 名字：</label> <input type="text" id="fname" name="fname" value="sikha"><br><br> <label for="lname">姓氏：</label> <input type="text" id="lname" name="lname" value="poyyil"><br><br> <iframe src='https://aa-pet-us-17.my.automationanywhere.digital/copilot?tags=%5B%5D' name="aari-embedded-app" width="100%" height="500px" style="border: none;" referrerpolicy="origin"> </iframe> </div>

客户端脚本示例

api.controller=function() { /* widget controller */ var c = this; console.log(c) console.log(window) var getLatestData = function() { return { 167 : { TextBox0: document.getElementById("fname").value, TextBox1: document.getElementById("lname").value, hiddenVariable0: document.getElementById("id").value } }; } console.log("Data" + JSON.stringify(getLatestData())); console.log(event) setTimeout(function() { window.addEventListener('message', function(event) { if(event.data.aariDataRequest === 'aari-data-request') { var mappedHostData = getLatestData(); var id = event.data.processId ||event.data.botId; console.log("Event data: " + JSON.stringify(event.data)); console.log("Data passed: " + JSON.stringify(mappedHostData[id])); var iframeElement = document.getElementsByName("aari-embedded-app")[0]; iframeElement.contentWindow.postMessage({data: mappedHostData[id] }, iframeElement.getAttribute("src")); } }); }, 100); };