漫谈 SAP 产品里页面上的 Checkbox 设计与实现

本文回顾笔者从业多年以来，所经历过的不同 SAP 产品里的 Checkbox 的设计与实现。

文章目录

(1) SAP GUI 里的 Checkbox

(2) SAP CRM 里的 Checkbox

(3) SAP Cloud for Customer 里的 Checkbox

(4) SAP UI5 里的 Checkbox

(5) SAP S/4HANA 里的 Checkbox

(6) SAP Spartacus 里的 Checkbox

复选框允许用户设置二进制值（例如“真/假”）。 当用户单击复选框时，它会在选中和未选中之间切换。 选中表示复选框文本描述的状态适用，或者该项目已被选中。

复选框文本描述了积极的行动（如“真”或“是”）。 文本可以是复选框左侧的标签控件，也可以是显示在框右侧的复选框文本。

如果只有一个复选框，您可以根据表单格式使用标签或文本。

如果有多个复选框，则标签描述整组复选框。 在这种情况下，使用复选框的文本属性来描述各个复选框。

在一组复选框中，可以选中或取消选中每个复选框。 用户可以检查多个选项。

复选框不会立即应用设置； 更改在用户通过触发操作按钮（例如保存）确认后生效。

Checkbox 的使用场景：

• 只能选择或取消选择一个选项，例如接受使用条款。 仅在含义明显时才使用它（单个复选框）。

• 您有一组或一组可以彼此独立选择的选项（复选框组）。

• 您的用例要求在没有任何用户交互的情况下立即显示所有可用选项（在只读情况下也是如此）。

• 选项列表的值是主要信息，需要立即显示。

• 对设置的更改需要在提交之前由用户确认和审核。 这有助于防止用户意外更改设置。

• 您希望将多个子选项分组在一个父选项下，并且需要一个中间选择状态（三态）。 三态表示选择了一些（但不是全部）子选项。

• 开关控件的状态可能会让用户感到困惑。 例如，不清楚开关是显示状态还是动作。

本文介绍前三部分，其中历史最悠久的当然就是 SAP GUI 里的 Checkbox.

值得一提的是，SAP GUI Screen 里的控件也支持 Keyboard Accessibility，即通过键盘的 Tab 键，可以逐一导航到屏幕上的每一个控件。

SAP CRM WebClient UI 本质上还是 ABAP BSP 技术，其 Checkbox 的一个例子，如下图 Main Partner 列：

一个用户肉眼可见的 Checkbox，在 SAP CRM 系统里由总共 6 个 HTML 标签组合而成。

当 Checkbox 里的勾选中时，最外层的 wrapper div 标签的 class 变为 th-sapcb-chkd，chkd 是 checked 的缩写。 内层 a 标签属性值 aria-checked 设置为 true.

div 内层一个隐藏的 input 标签，如下图标号 6 所示，用于同 ABAP 后台进行值传递，其 value 属性值变为 X.

当 Checkbox 勾选时，上述介绍的最外层 wrapper div 的 class 变为 th-sapcb-blk, blk 意为 blank; 内层 a 标签的 aria-checked 属性设置为 false，hidden input 的 value 属性值置空。

而 Checkbox 的小勾视觉效果，通过 a 标签的 CSS::before 选择器实现。如上图黄色所示。

::before 选择器的用法，通过下面这个简单的例子可以学会——在施加了::before 选择器的 HTML 元素前部，会自动出现选择器 content 属性指定的内容。

'\e05d'代表小勾的视觉效果：

我们试着在 Chrome 开发者工具里将这个 content 属性值改一改。'\e05c'代表 hint，一个小感叹号：

'\e05d'代表 group：

::before 选择器的 width 和 height 属性控制 Checkbox 矩形框的宽和高：

这一套::before content 属性值和对应的 icon 视觉效果图的映射关系，可以在这个链接里获得：

https://sapui5.hana.ondemand.com/test-resources/sap/ui/core/Icon.html

当然，SAP CRM 的开发人员，是不会直接编写原生的 HTML 代码的。在 SAP CRM 里需要将一个控件定义成 Checkbox，只需要实现这个控件绑定的模型节点字段的 GET_P 方法：

里面将控件的 fp_fieldtype 设置为 field_type_checkbox.

Jerry 之前的文章 SAP UI 搜索分页技术 提到，SAP CRM UI 采用服务器端渲染技术，WebClient UI 框架基于上述维护的控件元数据，为一个 Checkbox 控件，在 ABAP 端渲染出上述介绍的总共 7 个 HTML 元素对应的原生 HTML 代码。

SAP Cloud for Customer(C4C)里的 Checkbox

SAP C4C 里的 Checkbox 颜值较之 SAP GUI 和 SAP CRM 有了很大的提升：

同 SAP CRM 一样，SAP C4C 最终渲染出的 HTML 页面里，也是由多个 HTML 元素协同工作，形成最后的 Checkbox 视觉效果。

C4C 的 Checkbox 处于未选中状态时，wrapper div 的 aria-checked 属性值为 false, 内层 div 被赋予 css 类 sapMSwtOff，span 节点的值为 No：

Checkbox 处于选中状态时，aria-checked 属性切换为 true,内层 div 的 class 切换成 sapMSwtOn, span 的值为 Yes：

C4C 里的 Checkbox，视觉效果上并不是 SAP GUI 里和 SAP CRM 里朴素的小勾，而是一个类似抽屉的滑动效果。

这个效果并未像 SAP CRM 那样采取::before 实现，而是通过给一个 div 标签同时添加 sapMSwtOn 和 sapMSwtHandle 这两个类实现的，handle 的字面意思即抽屉的把手。

Checkbox 关闭状态的把手视觉效果通过 sapMSwtOff 和 sapMSwtHandle 这两个类共同实现，把手尺寸通过 sapUiSizeCompact 的 height 和 width 控制：

当然，SAP C4C 二次开发人员也不需要直接编写这些原生的 HTML 代码，而是在 SAP C4C UI Designer 里，从控件工具箱里拖拽一个 Checkbox 类型的控件到 UI 编辑界面即可实现 Checkbox 效果。