2007 年 ~ 2025 年，深耕 SAP 技术 18 年

笔者 12 年 SAP UI5 开发岁月中写下的 595 篇 SAP UI5 学习笔记，全部收录到《SAP UI5 百科全书》专栏中去，目录如下。请大家按照自己的学习需要，根据关键字搜索到对应的文章，然后进行学习。

在实际项目中，当用户用手机访问 SAP UI5 应用时，这段代码就会标识 oSystem.phone 为 true，把 sap-phone 类名加到根元素，然后开发者编写的 CSS 样式或脚本逻辑，就可以根据 sap-phone 来做出相应切换，比如缩放排版、移动端专用导航栏等。这些判断机制背后的目的，是让 SAP UI5 框架能够在应用初始化阶段，就快速辨别当前设备的特性，进而给开发者提供现成的适配判断，或者配合 CSS 类名的切换在外观渲染层进行 UI 布局和交互的微调。

之类的样式选择器，这样就无需在组件内部做过多的环境判断，直接依赖 DOM 节点的类名就可以区分出不同设备类型的样式和交互特征。用户的浏览器渲染进程借助这些动态绑定的 CSS 类，可以针对不同的硬件设备执行差异化的样式渲染与交互逻辑，从而让 UI 组件在多种设备端都有适配良好的界面表现。函数的多重判断逻辑，可以较为准确地区分平板设备、移动设备和桌面端，以及像在苹果系统中出现的 iPad OS 桌面模式或在 Android 中出现的浏览器桌面模式时的一些特殊情形。的类名会出现在页面根节点，否则就会移除。

最后返回拼接好的媒体查询表达式。这段代码在 SAP UI5 内部扮演的角色非常重要，因为当任何一个 UI 组件或布局容器需要判断当前设备尺寸时，只要调用这些预定义的 RangeSets，就能拿到对应的断点信息。借助这段代码完成的功能，任何基于 SAP UI5 的应用都能在不同大小的屏幕上自动侦测当前分辨率落在什么范围，然后呈现合适的 UI 排版与功能布局。配置，应用在运行时就能判断当前屏幕尺寸落在哪个范围，然后根据命名范围动态渲染相应的控件布局，提升界面在多端、多尺寸设备上的可用性和美观度。

Pointer Events 与 WebSocket 的检测同样能让开发者做出更精细化的交互规划，比如在支持 Pointer Events 的设备上使用更通用的指针监听，以减少分别处理鼠标与触摸的繁琐步骤。相比简单的浏览器检测字符串，这种特性检测更可靠，因为它注重实际功能而非浏览器版本号，能大幅减少来自浏览器厂商版本差异所带来的误判或冲突。过去，如果没有这样的内置机制，开发者往往需要在多个地方编写繁琐的浏览器检测或特性检测代码，既容易出错，也会造成维护难度。这样可以在后续的事件监听或样式适配时，直接判断。

很多场景下, 开发者都需要根据用户设备的不同操作系统做出针对性的逻辑处理, 比如在 iOS 设备上启用额外的手势支持, 或者在 Windows 平台上根据系统版本号选择不同的文件路径策略。通过这种架构思路, 既能保留通用的应用逻辑, 又能在必要时候对特定操作系统做额外增强, 提升用户体验。结合 Fiori Elements, 如果有某些特性只在 iPad 的大屏模式下才适合展示, 就能在组件初始化的时候先进行环境判断, 根据机型和屏幕大小自动加载特殊布局文件, 让表格或图表以合适的比例呈现给最终用户。

在 SAP UI5 的底层实现中，会维护一个名为 mEventRegistry 的数据结构，这个对象以事件标识符为键，将对应的监听器函数列表作为值。在日后的项目实战中，持续关注事件的注册与解绑时机，保证事件名称与代码语义紧密结合，就能够在 SAP UI5 的生态里游刃有余地处理多种交互场景。通过这种方式，可随时移除不再需要的监听器，避免事件被反复触发。官方源代码中常见的模式是: 先定义一个支持事件的控件类，然后在控件方法里，根据需要对外触发事件或监听其他事件，最终实现松耦合的数据流。

利用 lint 工具的规则切换，开发者在暴露此类全局变量时能够显式告知其他同事，此处的全局变量是经过特殊设计和充分测试的，不属于随意添加的隐患。例如在某些模块中，为了实现快速开发或满足过渡需求，可能暂时放宽对全局变量的限制，但必须在代码接近尾部时恢复规则，从而避免不必要的全局污染在整个项目中扩散。的使用，团队成员可以明确看到哪部分代码需要接受全局变量检测，哪部分代码因特殊原因被豁免，这种清晰的标记有助于未来代码的维护和审计，也使得新加入项目的开发者能够迅速理解项目的代码规范和设计初衷。

方法根据传入的日志级别（FATAL、ERROR、WARNING、INFO、DEBUG、TRACE）构造日志条目，其中包含当前时间、日期、时间戳、日志等级、消息文本与组件名称。模块整体设计考虑到后续设备功能检测所涉及的多项任务，因而将各项功能分为日志记录、事件管理、操作系统检测、浏览器检测、功能支持检测、媒体查询、系统分类以及屏幕方向与尺寸变化检测等部分。模块的源代码，该模块为 OpenUI5 框架提供设备与功能检测能力，能够检测浏览器、操作系统、设备支持特性、媒体查询范围、屏幕方向及窗口尺寸变化等信息。

开启 ChatGPT o3-mini-high 的 Deep research 模型，它花了 5 分多钟时间，给我撸了一篇万字长文，介绍 SAP UI5 的 sap.ui.Device API 的实现细节。笔者的 SAP UI5 开发教程有一篇文章，介绍了 SAP UI5 应用基于设备类型进行页面适配的工作原理，即 SAP UI5 的 Device Adaptation 特性是如何工作的。汪老师，请问如何在 SAP UI5 代码里，判断当前用户是用手机还是平板访问的应用呢？

OData 协议的引入和 Fiori Elements 的支持，整个框架内置丰富的 UI 控件和布局容器。该表维护了与 SAP 业务对象相关的元数据，特别是与开发环境中的对象（如程序、函数模块、屏幕、类、表等）相关的条目。笔者本文的例子运行在 SAP BTP Trial 账号的 SAP Business Application Studio 里，通过浏览器访问，每个人都可以免费体验。比如使用秘塔搜索，搜索的每条结果都直接包含了指向 SAP Help 的超链接，也无需手动打开新的浏览器窗口去验证。

笔者之前的文章 SAP Fiori 应用索引大全 曾经介绍过一个网站，能够得到 SAP 所有 Fiori 应用列表。到2021年7月18日为止，SAP 总共发布了 13268 个 Fiori 应用：其中属于 SAP S/4HANA 且 UI 基于 Fiori Elements 开发的 Fiori 应用数字为：878.这 878 个 Fiori 应用，Jerry 之前的很多文章都曾经提到过，其架构

SAP Joule 不请自答，解释说标记了接口的 UI Component，具备进行异步内容创建的能力，比如其通过 rootView 分配的视图，在运行时可以异步创建。目前 SAP Business Application Studio 里的 SAP Joule 支持下面这八种上下文，绝大部分都和 SAP UI5 开发相关，剩下的则是代码仓库和 SAP 帮助文档的搜索。SAP Joule 回答的大意是：我只负责回答 SAP UI5 开发相关的问题，不要和我扯其他有的没的。

点击 SAP Joule 给出的按钮之后，SAP Business Application Studio 左侧显示的界面，就从 SAP Joule 替换成了 SAP Fiori tools 的 Project Accelerator 工具。接下来就是在后者中标准的操作流程了。笔者之前的文章，有朋友提问，既然 ChatGPT，DeepSeek，Grok 这些主流 AI 工具，回答 SAP 相关问题时都经常翻车，那 SAP 自家的 Joule 表现又如何呢？还有朋友评论：如何才能使用 SAP Joule？

笔者不能算一个纯粹的文学爱好者，只不过从小确实比较爱看书，看的多是各种题材的小说，历史人物传记之类的通俗文学作品。记得笔者读高中时，班上有同学，偶尔在报刊杂志上发表一些作品。不仅能让自己的名字编程铅字出现在除了作业本之外的纸质出版物上，还能领到一笔稿费，这让当时没有太多零花钱的笔者非常羡慕。工作之后，笔者开始在 SAP 社区和微信公众号平台上坚持写文章，某种程度上也算是弥补了自己高中求学时期的一个小小遗憾。

随着 DeepSeek 持续爆火，微信，抖音，知乎，小红书，今日头条，几乎国内所有自媒体平台，都充斥着 DeepSeek 使用教程，以及如何使用 DeepSeek 赚钱的内容。这从另一方面说明，AI 工具已经真真切切走进了普通人的生活。DeepSeek 凭借一己之力，降低了大多数人使用高质量 AI 工具的门槛。笔者无意中翻到之前这篇 2023 年末总结，不禁感慨，一年多过去，自己对 AI 工具的依赖程度也大大加深了。

比较维度SAP UI5Angular架构模式MVC架构，视图-控制器-模型分离 (使用声明式的XML视图定义界面。组件化架构，基于组件和模块组织应用；每个组件封装模板、逻辑和样式。技术栈基于 JavaScript（可使用ES5/ES6），HTML5，CSS；依赖 SAP 提供的库（如 sap.m 控件库）。基于 TypeScript，使用现代Web标准；需要构建工具（Angular CLI）和 Node.js 生态。UI组件内置丰富的企业级UI控件库，遵循SAP Fiori设计规范，开箱即用 (

而 Angular 则凭借其开源生态系统和灵活的架构设计，允许团队按照自己的需求进行定制开发，适应复杂多变的业务逻辑。总体而言，SAP UI5 更适合那些依赖于 SAP 后台系统、追求稳定和安全的传统企业应用，而 Angular 则更契合追求技术前沿、需要快速迭代和跨平台扩展的现代企业应用。相较之下，Angular 是由 Google 推出的开源前端框架，凭借其模块化设计、组件化开发和双向数据绑定机制，赢得了全球开发者的广泛支持。首先，SAP UI5 是由 SAP 公司推出的前端框架，专为企业级系统设计。

整个 SAP UI5 的引导过程实现了高度的配置化和模块化。通过在 HTML 引导脚本中声明所需的库、主题、资源路径等，UI5 能够在加载时自动解析这些配置 (

SAP UI5 的 bootstrap 过程，指的是 UI5 框架在浏览器中初始化的整个流程。这个过程主要涉及 HTML 页面中script标签的配置、资源的加载、模块的初始化，以及 UI5 框架的环境设置。它是 UI5 应用启动的第一步，决定了 UI5 代码如何执行、如何加载核心库、如何处理依赖模块。定义 SAP UI5 的运行时环境—— 确保浏览器能够正确加载 UI5 相关的 JavaScript 代码，并初始化运行环境。解析配置参数—— 解析 HTML 页面中的前缀属性，例如。

SAP UI5 是 SAP 提供的一套基于 JavaScript 的前端框架，旨在构建企业级 Web 应用。在 SAP UI5 项目中，index.html通常是应用的入口文件，负责初始化 UI5 运行时环境，并加载相应的模块。在如下图所示：这一行代码的作用是指定在 UI5 运行时初始化时，要执行的模块。它的核心在于这个 HTML5 自定义属性，该属性的值采用的格式。这个机制是 SAP UI5 的bootstrap机制之一，主要用于在 UI5 框架初始化后，执行特定的 JavaScript 逻辑。

的主要作用是启用 SAP Fiori tools 提供的增强功能，帮助开发者更高效地管理 SAP UI5 项目，特别是在 Fiori elements 扩展开发过程中。这一配置项并不是标准的 npm 或 node.js 配置，而是 SAP Fiori tools 特有的扩展属性，用于控制和优化 SAP UI5 应用的开发体验。在 Fiori elements 项目中，这一配置项可以让开发者更方便地创建和扩展应用，提供更丰富的元数据支持，并在开发过程中提供智能提示。

我们进行 SAP CAP 开发时，在schema.cds里进行数据建模，可以使用 association 和 composition，来描述两个 entity 之间的关联关系。在 SAP BTP 的 Cloud Application Programming Model (CAP) 中，cds文件定义了数据模型，而和是用于建立实体关系的两种关键机制。理解它们的区别对于构建高效、清晰的 CAP 数据模型至关重要。下面，我们将通过严谨的逻辑推理，结合代码示例，深入分析和之间的核心差异。

我们在 SAP Cloud Application Programming 编程模型的 cds 文件里，可以通过@title给 OData 模型字段添加注解，这样这些被注解后的模型字段值，就会出现在最终生成的 Fiori UI 上。在 SAP CAP在 SAP BTP 的 Cloud Application Programming Model（CAP）中，Core Data Services（CDS）是构建数据模型的核心技术。

a. 有 Fiori 后端开发的经验（CDS View，RAP, Odata 基于Fiori element 开发），b. 完全没有 Fiori 前端 JavaScript 的开发经验，也就是说没有做过基于 SAP UI5 Freestyle 应用的开发）

Application Modeler 是 SAP Fiori Tools 套件中不可或缺的一部分。它通过引入模型驱动开发的方法，显著提高了开发效率，并确保了应用程序的一致性与可维护性。虽然它在某些方面仍有改进空间，但其在简化 OData 服务集成和增强用户界面绑定方面的能力已使其成为开发者的有力助手。通过全面理解和熟练使用 Application Modeler，开发者可以在 SAP Fiori 开发中获得更高的生产力，同时为最终用户提供更优质的体验。

以 SAP Fiori Tools 的 Application Modeler 为例。首先我们可以打开 Visual Studio Code 的。然后在 output 视图的下拉菜单里，选择。将其打印的日志级别，设置为最详细的。

SAP Fiori Tools - Application Modeler 是一个功能强大的开发工具，专注于简化 SAP Fiori 应用模型的定义和管理。通过提供直观的可视化设计界面、实时预览功能以及无缝集成其他工具的能力，它为开发者提供了一个高效且易用的工作环境。不论是初学者还是资深开发者，都可以从中受益，大幅提升开发效率并确保应用质量。如果想让手动创建的SAP UI5 Freestyle 应用。

在 SAP UI5 应用的开发中，ui5.yaml文件是一个关键配置文件，用于定义项目的元数据、类型以及与开发服务器相关的中间件配置。以下我们逐步剖析问题中的ui5.yaml文件内容。该文件可以从笔者的上获得。下面是详细的解释。

再加上客户第三方系统的 React，Angular 和 Vue 这些框架开发出的页面，整个解决方案的技术栈可谓是百花齐放了。微前端的设计初衷来源于微服务（Microservices）的思想，其目标是减少开发过程中的耦合，提高代码的可维护性和开发效率。访问应用，然后从 select 控件里选择 Vue，就可以看到在 SAP UI5 里嵌入的 Vue 应用了。笔者在企业管理软件领域从事了多年的开发，对于前端开发中使用混合技术栈的场景可谓是司空见惯了。可能是一个包含不同页面内容的显示区域。

SAP UI5 版本的废弃是指，SAP 宣布某个特定版本或某些功能将在未来不再支持的过程。这通常意味着开发者应避免继续使用这些功能，因为它们将在未来的版本中被移除或替代。框架版本废弃：某个 SAP UI5 的主要或次要版本被标记为废弃。该版本的功能和补丁将不再更新，但仍可在短期内继续使用。API 的废弃：某些 JavaScript 方法、属性或模块标记为废弃。这些废弃通常伴随着建议的替代实现。控件的废弃：UI 控件可能因设计过时或技术限制而被标记为废弃，并通常建议使用新的控件。特性或功能的废弃。

是 Node.js 中的一个错误代码，表示网络连接被对方重置，即在从远程服务器读取数据时，连接意外关闭。在从 SAP 的 NPM 注册表下载所需包时，网络连接可能中断或不稳定，导致连接被重置。确保您使用的是最新版本的 NPM 和 Node.js，因为旧版本可能存在已修复的错误。如果您在公司网络环境中，需要通过代理访问外部网络，请正确配置 NPM 的代理设置。如果问题仍然存在，考虑从其他环境下载所需的 NPM 包，然后在本地进行离线安装。在公司网络环境中，代理设置和防火墙规则可能会影响 NPM 包的下载。

SAP Fiori Tools 的 Application Modeler 是一款集成于 SAP Business Application Studio 和 Visual Studio Code 的扩展工具，旨在简化 SAP Fiori 元素应用的开发过程。通过 Application Modeler，开发者可以添加或删除页面，配置页面属性，并快速预览应用的实时效果，从而提高开发效率并确保应用的一致性。其实是有办法查看的：如上图所示，当前使用的命令菜单，右侧有一个齿轮状的图标。

SAP Fiori 是 SAP 提供的一套设计原则和用户体验框架，旨在为企业用户提供一致、高效且直观的应用体验。在 SAP Fiori 的开发过程中，@sap/generator-fiori（即 SAP Fiori 应用生成器）扮演了关键角色。它是一个基于 Node.js 的 Yeoman 生成器，旨在简化和加速 SAP Fiori 应用的创建过程。

它在桌面和平板设备上同时管理主区域和详细区域的导航容器，而在手机设备上仅管理一个导航容器。下某个子控件的一个聚合（Aggregation），用于在主区域和详细区域的页面上自定义页眉（Header）。提供了一个标准的页眉，但在某些情况下，开发者可能需要自定义页眉的内容或布局。控件在桌面和平板设备上同时管理主区域和详细区域的导航容器，而在手机设备上仅管理一个导航容器。是一个水平布局的容器，通常用于页眉或页脚，可以包含左、中、右三个区域的内容。的示例代码，展示如何在主区域和详细区域的页面上设置自定义页眉。

是 SAP UI5 框架中的一个控件，主要用于在同一屏幕上同时显示主（Master）和详细（Detail）视图，常用于主从式界面布局。它在平板和桌面设备上维护两个导航容器（NavContainer），而在手机设备上仅维护一个导航容器。例如，在较大的屏幕上，主视图和详细视图可以并排显示，而在较小的屏幕上，主视图可能会隐藏，需要通过手势或按钮来切换显示。它在初始化时会在 HTML 文档的头部写入一些属性，例如视口元标签，以使应用更适合移动设备。因此，在同一个应用中，在大屏幕时显示主视图，小屏幕时隐藏在左上角。

1-1-3 原则是 SAP Fiori 的用户体验设计的一个基石，目的是使用户在 SAP 系统中执行任务时尽量高效，并确保应用的复杂性不会对用户造成额外的心理负担。为了实现这一目标，1-1-3 原则将用户的交互流程控制在一个较小的范围内，使得每次操作都围绕特定目标展开，不会因为太多的选择或层级结构而影响用户的效率。1-1-3 原则1 个用户操作对应 1 个目标：在 SAP Fiori 应用中，每个操作应仅对应一个具体的目标。用户不应同时为多个目标而感到困扰。

因此，深入理解 /UI2/CACHE 表的功能，并掌握有效的缓存清理方法，对于维护 SAP Fiori 系统的稳定性和一致性至关重要。按照上述缓存清理步骤，开发团队清理了相关缓存，问题得以解决，用户界面成功显示最新版本。尽管缓存机制提升了性能，但在系统配置、OData 服务、Fiori BSP 应用或主题发生更改，或应用补丁/SAP Notes 后，缓存数据可能变得过时。在系统配置、OData 服务、Fiori BSP 应用或主题发生更改，或应用补丁/SAP Notes 后，及时清理相关缓存至关重要。

当 Fiori 项目实施完成后，这些配置保存下来之后，用户登录 Fiori 系统，在看到渲染好的 Fiori Launchpad 之前，有一个 OData 请求，从后台 ABAP 服务器，读取为该用户分配的 Fiori catalog 和这些 catalog 里分配的 tiles.例如，假设在业务流程中，需要将一个包含多个表和字段的复杂数据集合存储在某处，稍后再将这些数据以相同的形式恢复，Data Cluster 就提供了这种方便、简洁的解决方案。方法里，使用 ABAP 关键字。

符号在 SAP UI5 的 URL 中不仅仅是一个分隔符，更是动态路由、状态管理和深链接的关键所在。通过合理使用，开发者可以实现高效、流畅的用户体验，同时保持系统的可维护性和扩展性。通过 SAP UI5 提供的灵活路由机制，企业应用可以轻松实现复杂导航需求，同时为用户提供直观的交互体验。