新年快乐，各位！
我知道大家最近都在好奇我的动向。通过云架构师考试后，我决定深入研究一下现在很火的Web界面构建工具：UI Builder！
UI Builder是什么？
UI Builder是一个用于创建和配置自定义工作区和门户页面的Web界面。它是Now Experience UI框架的一部分，允许你：
- 创建页面
- 设置布局和组件
- 定义操作的事件处理程序
- 使用数据绑定获取和显示数据
- 创建在组件中使用的客户端脚本和客户端状态参数（也称变量）
它是一个一站式自定义Web体验创建工具。让我们来深入了解UI Builder的关键部分和使用方法。
UI Builder的工作原理
1. 体验和页面
体验是由一系列页面组成的，用户可以在这些页面上管理工作、查找信息或获取帮助。每个页面都由其URL定义，并定义该URL中的内容。它包含两个核心元素：布局和组件。
2. 布局
布局决定页面内容的显示方式。它是页面构建的第一步，可以使用：
- 基本列布局：最多六列的预定义结构。
- 高级布局：基于Flexbox或CSS网格的设计，允许更多自定义。
布局还提供了一些工具，例如简化的内容树和用于配置和样式设置的面板。
3. 组件
组件是页面的构建块，例如表单、按钮、数据列表、图表、图像或菜单。设置好布局后，你可以向页面添加组件。你可以使用配置面板自定义每个组件，包括：
- 配置选项卡： 使用静态值、数据绑定或JavaScript编辑属性。
- 样式选项卡： 添加自定义CSS。
- 事件选项卡： 设置用户交互触发的操作。
最佳实践：先添加布局，再添加组件。
页面变体和条件
UI Builder中的所有页面都是变体。你创建的第一个页面是默认变体。例如，表单视图就是一个变体的例子：相同的记录，但根据上下文以不同的方式显示。你可以为不同的受众或条件创建其他变体。
条件决定页面变体何时可见。可以通过以下方式设置：
- 使用条件生成器设置规则。
- 通过编码查询指定条件。
条件的生效依赖于页面参数传递的数据，我们将在后续文章中详细介绍。
接下来是什么？
让我们在UI Builder中创建一个简单的体验！
我们将创建一个允许用户查看记录页面的体验。
1. 开始
- 登录你的ServiceNow实例。
- 在过滤器导航器中，找到Now Experience Framework > UI Builder，打开UI Builder界面。
2. 创建体验
- 点击右上角的创建按钮。
- 从下拉列表中选择体验。将出现一个模式窗口。
- 填写以下信息：
- 名称： 任意名称，例如“默认工作区”
- 应用程序外壳UI： 工作区应用程序外壳
- 登陆路径： 保持默认 - 主页
- 角色： 暂时删除默认角色。
- 点击创建，然后选择打开体验继续。
3. 创建页面
- 在新的体验中，点击创建新页面或页面和变体旁边的图标。
我们将使用模板
选择标准记录模板
- 输入模板的页面名称。URL路径将自动填充。
- 点击继续，
- 我们的记录模板带有预先配置的必需（表和sys_id）和可选（查询，extraParams视图，selectedTab）参数，查看它然后选择看起来不错。
4. 创建变体
- 命名你的页面变体，然后暂时跳过受众和条件。点击继续。
- 熟悉变体编辑器：
- 左面板： 用于添加布局和组件的内容树。
- 右面板： 配置面板，带有用于自定义组件的选项卡。
- 左下： 用于动态数据的工具，例如数据资源、客户端状态参数和客户端脚本。
就这样！
在下一篇文章中，我们将通过向页面变体添加页面参数来扩展我们的体验，以允许我们传递要在页面内使用的数据值。
本概述介绍了UI Builder的基础知识，从布局和组件到页面和变体。在接下来的文章中，我们将通过探索以下内容更深入地创建动态、交互式页面：
- 页面参数。
- 数据资源。
- 客户端状态参数。
- 客户端脚本。
- 活动。
在本系列结束时，你将完全掌握UI Builder以及如何创建功能丰富、用户友好的体验！！
了解更多关于UI Builder的信息
-
立即参加UI Builder的免费学习课程 https://www.php.cn/link/88e0f16114a1e011c87b797513095a20
-
UI Builder的ServiceNow文档 https://www.php.cn/link/6c6d15562b486b1d1256f567ffb6fd11
