ServiceNow UI 生成器

嘿伙计们，新年快乐！

✨
我知道你们中的一些人想知道过去几个月我去了哪里。通过云架构师考试后，我决定深入研究这个大家都在谈论的闪亮的新 Web 界面：UI Builder！

什么是 UI 生成器？

UI Builder 是一个 Web 界面，用于为工作区和门户创建和配置自定义页面。它是 Now Experience UI 框架 的一部分，允许您：
•构建页面。
•设置布局和组件。
•定义操作的事件处理程序。
•使用数据绑定获取和显示数据。
•创建客户端脚本和客户端状态参数（也称为变量）以在组件内使用。

它本质上是一个一站式商店，用于创建自定义网络体验。让我们来分解一下 UI Builder 的关键部分以及如何开始。

UI 生成器的工作原理

1. 体验和页面

体验是用户可以管理工作、查找信息或获取帮助的页面集合。每个页面均由其 URL 定义，并定义该 URL 中的内容。它由两个关键元素组成：布局和组件。
2.布局
布局组织内容在页面上的显示方式。它们是构建页面的第一步，可以使用：
•基本列布局：最多六列的预定义结构。
•高级布局：Flexbox 或基于CSS 网格的设计可实现更多自定义。
布局还附带一些工具，例如简化的内容树以及用于配置和样式设置的面板。
3.组件
组件是页面的构建块，例如表单、按钮、数据列表、图表、图像或菜单。设置布局后，您可以向页面添加组件。您可以使用配置面板自定义每个组件，其中包括：
•配置选项卡： 使用静态值、数据绑定或 JavaScript 编辑属性。
•样式选项卡： 添加自定义 CSS。
•事件选项卡： 设置由用户交互触发的操作。

最佳实践是先添加布局，然后添加组件。

页面变体和条件

UI Builder 中的所有页面都是变体。您创建的第一个页面是默认变体。考虑诸如表单视图之类的变体：相同的记录，但根据上下文以不同的方式显示。您可以为不同的受众或条件创建其他变体。
条件决定页面变体何时可见。这些可以使用以下方式设置：
•使用条件生成器设置规则。
•通过编码查询指定条件。
为了使条件起作用，它们依赖于页面参数传递的数据，我们将在下一篇文章中详细介绍这些数据。

接下来是什么？

让我们在 UI Builder 中创建简单的体验！
我们将创建一种允许用户查看记录页面的体验。

1.入门。

.登录到您的 ServiceNow 实例。
.导航至现在体验框架> UI Builder 在过滤器导航器中打开 UI Builder 界面。

2.创造体验

.点击右上角的创建按钮。

.从下拉列表中选择体验。将出现一个模式窗口。
。填写以下详细信息：
•名称： 任何名称。例如“默认工作空间”
•应用程序外壳 UI： 工作区应用程序外壳
•登陆路径：保留默认 - 主页
•角色： 暂时删除默认角色。

.点击创建，然后选择打开体验继续。

3.创建页面

。在新体验中，单击 创建新页面 或页面和变体旁边的 图标。

我们将使用模板
选择标准记录模板

.输入模板的页面名称。 URL 路径将自动填充。

.点击继续，
.我们的记录模板带有预先配置的必需（表和sys_id）和可选（查询，extraParams视图，selectedTab）参数，查看它然后选择看起来不错。

4.创建变体

.命名您的页面变体，然后暂时跳过受众和条件。点击继续。
.熟悉变体编辑器：
•左面板： 用于添加布局和组件的内容树。
•右面板： 配置面板，带有用于自定义组件的选项卡。
•左下： 用于动态数据的工具，例如数据资源、客户端状态参数和客户端脚本。

就是这样！

在下一篇文章中，我们将通过向页面变体添加页面参数来扩展我们的经验，以允许我们传递要在页面内使用的数据值。

本概述介绍了 UI Builder 的基础知识，从布局和组件到页面和变体。在接下来的文章中，我们将通过探索以下内容更深入地创建动态、交互式页面：
•页面参数。
•数据资源。
•客户端状态参数。
•客户端脚本。
•活动。
在本系列结束时，您将牢牢掌握 UI Builder 以及如何创建资源丰富、用户友好的体验！！

---

了解有关 UI 构建器的更多信息
•立即参加 UI Builder 的免费学习课程
https://nowlearning.servicenow.com/lxp/en/now-platform/ui-builder-fundamentals-washington?id=learning_course_prev&course_id=7ba080d447fdd65076e07884f16d435e

•UI Builder 上的 ServiceNow 文档
https://www.servicenow.com/docs/bundle/xanadu-application-development/page/administer/ui-builder/concept/ui-builder-overview.html

以上是ServiceNow UI 生成器的详细内容。更多信息请关注PHP中文网其他相关文章！