CRM WebClient 和 Hybris backoffice 的 UI 开发都不需要开发人员手写原生的 html 代码。

CRM WebClient UI

在 CRM WebUI workbench 里，开发人员需要写下图这些 SAP 封装的 tag：

这些 Tag 能在事物码 SE80 里找到：

Hybris backoffice UI

比如我通过 backoffice 左边倒 L 形的工作中心列表查看优惠券列表，这个列表实际上是一棵树，根节点是 Marketing。

上图界面是通过在 XML 文件里定义 Hybris 封装的 tag 来实现的，原理和 CRM WebClient UI 类似。

按照第 15 行的注释，这种开发方式可以理解成"Configuration-based development"。第 17 行定义了一个类型为 explorer-tree 的控件。

第 19 行用 navigation-node 定义 marketing 这个根节点，id 为这个节点的属性。

Hybris wiki 上有这些 Hybris 封装的 tag 的详细用法：

类似的，下面这个表格包含了 6 列：

该表格是用 listview 这个 tag 实现的，下图即是 6 列对应的定义：

Simple search 的界面：

XML 文件里显示 Simple search 实际执行时基于 couponId 和 name 两个字段进行搜索:

要获取更多 Jerry 的原创技术文章，请关注公众号"汪子熙":