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

大家在学习教程过程中，如果有任何关于 SAP UI5 开发方面想了解的内容，可以直接在教程各篇文章下评论留言，我会将大家的意见统一汇总到下面的表格，作为我更新教程的内容参考来源之一。

笔者在业余时间设计了这份 SAP UI5 学习教程，把开发一个完整的 SAP UI5 应用的流程，拆分成若干个步骤，力求每个步骤里，把涉及到的知识点都涵盖到。建议零基础或者对 SAP UI5 知之甚少的 SAP UI5 初学者，按照顺序从第一个步骤开始循序渐进地学习，把这些代码下载到本地，配合教程的文字讲解，自己动手，以加深理解。对于已经有一定基础的 SAPUI5 开发人员，可以通过本文的目录，跳过前面一部分比较基础的章节，直接挑选对自己工作项目有关，或者包含某些知识点自己尚未掌握的章节来有针对性地学习。

工欲善其事,必先利其器。时至今日，SAP 提供了非常多的 SAP UI5 开发工具，既包含本地搭建的，也包含浏览器里远端使用的工具，比如 WebIDE 和 Business Application Studio.我们访问下面这个链接，就能找到所有这些工具的安装或者配置步骤：https://tools.hana.ondemand.com/#sapui5如果想选择本地开发，SAP 推荐的工具是 Visual Studio Code，也就是本文要介绍的内容。也可以下载 WebIDE 的本地安装包，将其安

本文介绍了如何在 SAP S/4HANA 的物料主数据编辑应用中，通过 SAP UI5 实现一个支持 Markdown 格式的在线编辑器。需求的核心是让用户在 Notes 区域输入 Markdown 文本，并实时渲染为 HTML。作者建议使用开源的 Markdown 解析工具 marked，并将其集成到 SAP UI5 应用中。具体步骤包括：下载 marked.min.js 并将其放入项目文件夹，通过 sap.ui.define 加载该库，并在 SAP UI5 控制器中调用 marked.parse 方法将

本文介绍了如何在 SAP UI5 应用中使用 XMLHttpRequest 调用 ABAP 系统的 API，并通过简单的 JSON 数据交互实现前后端通信。文章详细描述了从创建 ABAP HTTP 服务到在 SAP UI5 中发送请求并接收响应的完整流程。首先，用户在 SAP UI5 界面输入包含 name 和 age 的 JSON 字符串，点击按钮后，通过 XMLHttpRequest 将数据发送到 ABAP 服务器。服务器处理请求后，将 name 和 age 分别替换为中文并返回结果，最终在 SAP U

SAP UI5 调用 DeepSeek API 调用并实现流式响应渲染。文章首先解释了流式响应的必要性，即减少用户等待时间，提升体验。接着，详细说明了如何在SAP UI5中实现这一功能，包括如何设置API调用、处理流式响应数据，并在UI中动态显示。文章还提供了源代码的使用方法，并强调了替换API密钥的重要性。最后，通过代码逐行解析，展示了如何利用XMLHttpRequest处理流式数据，并在SAP UI5的TextArea控件中实时更新显示。

借助 JSON 格式的天然可读性，开发者可以在本地存储、远程接口缓存、离线场景甚至 Fiori Elements 的暂存层之间快速交换数据，并以极低的学习曲线完成复杂 UI 的原型或生产交付。点击上图黄色的 copy 按钮，即可将 JSON.stringify 方法生成的 JSON 字符串，拷贝到剪切板里。对于稍稍复杂一些的 JSON 变量，我们就可以使用本文介绍的方法，另存到本地，以备将来进一步研究。文件，在构造函数里设置断点，然后刷新浏览器，断点会频繁触发。很简单，在 console 面板，执行代码。

笔者之前的教程文章，对于 SAP UI5 应用描述符文件最近笔者在持续更新 Fiori Elements 的开发教程，有不少学习者反映，Fiori Elements 应用的扩展场景，往往需要在里添加扩展配置项，比如和这些配置项比较繁琐，容易出错。一旦配置项出错，manifest.json 无法正确被解析，此时需要开发人员去调试 SAP UI5 框架解析 manifest.json 时，到底哪里出了问题。对于这种情况我们需要知道从哪里设置断点进行分析。本文就来聊聊这个话题。

里面凡是涉及到要研究 SAP UI5 应用从远端服务器读取的 OData 业务数据时，笔者都是采用在 Chrome 开发者工具的 Network 面板里去查看的方法。Network 面板，能监控到所有 Fiori Elements 或者 SAP UI5 前端应用，向后端发起的 HTTP 请求和获得的响应数据。打开页面之后，我们使用快捷键 F12，打开 Chrome 开发者工具。大家从上图可以看到，因为这个结果的全部内容，都放在一行显示了，查阅起来非常不直观，所以我们要将其另存为本地文件。

无论是承载简单表单，还是构建复杂的卡片式信息面板，只要遵循合理的嵌套、正确的轴向对齐与性能监控，它就能在 Fiori 设计体系中贡献清晰且稳健的页面结构。掌握这些细节，开发者便能在不写额外 CSS 的前提下交付高质量、响应式并具备良好可访问性的业务界面。这个控件常被用于表单分区、卡片内部布局、对话框内容排列，或者任何需要“自上而下”自然流动的场景。，让 UI5 构建工具打包并做 RTL 翻转、主题变量替换，保证一致的企业级体验。分别对应交叉轴与主轴，对垂直方向的控件而言，主轴是垂直线，不要混淆 (

SAP UI5 里有不少能在浏览器里显示图片的控件，比如再比如, 下面是一个例子：可以看到，这两种控件指定图片数据来源的src属性，都使用的相对绑定的路径:然后浏览器在运行时渲染页面时，自动在相对路径之前，添加上服务器的主机名和端口号。那么这背后都是怎么工作的呢？且听笔者一一道来。

对于这种需求，最好的办法，就是通过单步调试的方式，研究 Fiori Elements List Report 的 Send-Email 按钮是怎么实现的。这位朋友想把这个在 SAP UI5 应用里唤起邮件发送客户端的功能，在自己的 freestyle SAP UI5 应用里也集成进去，问我该怎么实现。其中邮件的主题，正文，CC 和 BCC 的邮箱值，都是通过硬编码写在控制器的 JavaScript 代码里的。显然，这个文件里，必定包含了 Send-Email 按钮的点击事件处理函数的声明。

为了简单起见，我们在 XML 视图里，不使用任何 SAP UI5 包装后的控件，而是直接采用 html 原生的 div 元素，如下图第 14 行代码所示，用来在 SAP UI5 应用里，渲染生成好的二维码图片。</

如果雪花下落到超出屏幕的底部，会在 if (flakeA.y >= windowH) 中将雪花重新移动到画布的上方，从而模拟了雪花连续不断飘落的效果，这就像在现实里雪花一直往下落，落出视野又会在远处出现新的雪花。假如我们在真实世界中观察飘落的樱花或雪花，就会发现它们往往不会完全竖直下落，而是带有一定的水平偏移，这段逻辑就模仿了这样的效果。雪花的出现位置、半径大小、飘落速度等均透过此函数得以随机化，以呈现更加自然逼真的雪花分布，就好比真实的雪花从天空飘落时，不可能保持千篇一律的形态与速度，而是千差万别。

当 bPlayed 默认为 false 时，点击播放按钮之后，首先把这个标志位设置成 true，然后在代码第 14 行，调用 audio 元素的。注意，因为这个 audio 元素没有放置在 XML 视图里，所以这里我们使用的是浏览器原生的 dom 查询 API，而不是控制器自带的。大家打开上面的链接，能看到下面的界面，可以通过鼠标点击音乐控件的三角符号，来播放或者暂停音乐。的属性，因此需要在 SAP UI5 的控制器里手动启动播放功能。只要支持 audio 的浏览器，打开页面时，

按 F12 打开 Chrome 开发者工具，切换到 Console 面板，然后回到 SAP UI5 应用，点击 Say Hello 按钮，就可以在 Console 里，看到笔者在控制器 JavaScript 文件里，使用 console.log 打印出的。有朋友私信我，询问自己编写了一个 SAP UI5 应用，公司有需求，需要在应用里编写代码，检测用户是通过手机，平板电脑，还是 PC 端浏览器访问的应用？然后刷新浏览器，打开 Chrome 开发者工具，切换到 Sources 面板，使用快捷键。

其他的 node_modules 文件夹，和 manifest.json，package.json，ui5.yaml 等文件，统统不用管。在 Nginx 压缩包的 html 文件夹下，有一个 index.html，这是 nginx 服务器的默认欢迎页面。当然，我们也可以把本教程全部的源代码，都拷贝到 Nginx 服务器的 html 文件夹下，这当然没有问题，只不过最后在浏览器里访问的时候，需要在。本文向大家介绍详细的将本教程开发的 SAP UI5 应用，部署到 Nginx 服务器上的步骤。

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

本教程的示例代码，除了使用笔者推荐的本地 Visual Studio Code 之外，当然也可以使用 SAP BTP 上的 SAP Business Application Studio 来编辑和修改。之后在 SAP BTP 的 subaccount 里，点击 SAP Business Application Studio 超链接：然后选择在弹出窗口里，选择应用类型。因为本教程专门讲的就是 SAP UI5 开发，所以选择最左边的即可。

进入 SAP Business Application Studio 之后，我们点击编辑器左侧这个钻石状的图标，即可打开 SAP Business Application Studio 环境里的 SAP Joule.Boosters 类似于传统 ABAP On-Premise 系统里的 SPRO 事务码，将 SAP BTP 在浏览器里需要完成的配置，封装成向导，我们只需要按照向导，一步步回答问题，就可以完成配置。所谓 Trial 用户，即大家使用自己的邮箱即可免费注册体验 SAP BTP 的服务。

课程有个读者，咨询一个问题：> 您好，请教一个问题。是只有通过UI5 Tools向导创建的应用才会有Application Information。非向导创建的，比如跟着官方的Walkthrough教程做的练习，也想用这个Application Info页面，该怎么做呢？

除了笔者下面两篇文章提到的 Visual Studio Code 扩展之外，本文介绍的是笔者自己在 SAP UI5 开发过程中使用的 Visual Studio Code Extensions，能提高不少开发效率。请大家根据自己实际的需要决定是否安装。

笔者开发教程曾经介绍过两种不同的方式，能够将本地开发的 SAP UI5 应用，部署到 ABAP 服务器上。有教程读者提问：采用这些方法，对 ABAP 系统有没有什么要求吗？比如能够把 SAP UI5 应用部署到 ERP 系统吗？本文就来详细分析这个问题。

大家可能已经注意到了，本提供的源代码中，每个步骤对应的开发文件夹下面，都有一个文件。这个文件定义了本地 SAP UI5 开发项目，或者 SAP Business Application Studio 云端 SAP UI5 开发项目的各种依赖，其中就包括区域。通常用于定义开发和构建阶段的依赖，而不是应用的生产环境依赖。在定义的依赖中，任何 SAP UI5 项目都包含了@ui5/cli。

本文介绍笔者从事 SAP UI5 和 Fiori 开发多年以来，积累的一些经验和小技巧。会保持更新。

跨站请求伪造（Cross-Site Request Forgery，简称 CSRF）是一种网络攻击手段，它允许攻击者伪造用户的身份来执行未经授权的操作。为了防止 CSRF 攻击，常用的一种技术手段就是 CSRF Token.CSRF Token 是一种随机生成的防伪 Token，它由服务器颁发给客户端，并需要客户端在提交某些特定类型的请求时，将该 Token 添加到 HTTP 请求的头部字段去。

在我的博客A debugging issue caused by source code mapping里我介绍了在我做SAP C4C开发时遇到的一个曾经困扰我很久的问题，最后结论是这个问题由于JavaScript的source code map机制在Chrome开发者工具里起作用，其实是working as designed的一种行为。但是当时因为时间限制，没有去深入学习JavaScript s...

两句话概括本文内容。当需要将文件名包含中文字符或者其他特殊符号的本地文件，通过 OData 服务调用，写入 SAP 系统时，对可能包含特殊字符的文件名，调用 API对文件名进行处理。这个函数用于对 URI 的一部分进行编码，以便将其嵌入到 URI 地址中。在 Web 应用中，经常需要通过 URL 传递各种数据，特别是在 GET 请求中通过查询字符串发送数据时。如果数据包含某些特殊字符，如空格、&、%、# 等，直接将这些字符嵌入到 URL 中可能会导致服务器解析错误或安全问题。这时，

这个标志位在控制器里有一些复杂的计算逻辑，因此按钮的动态显示逻辑，实现在控制器里，而没有放在 XML 视图里通过简单的声明方法去定义。除了按照笔者的教程学习 SAP Fiori 开发之外，学习 SAP 标准的 Fiori 应用的源代码，也能提高我们的开发水平。我们在最终页面的 Footer 区域观察到的按钮，是 S3 视图的控制器里，通过 JavaScript 代码动态生成的。顺便说一句，为什么这个按钮，不直接定义在 XML 视图里，而要在控制器里，用 JavaScript 代码动态实现呢？

我的课程有学习者遇到下面的问题，向我求助。错误截图：错误日志：yes笔者：Visual Studio Code 的 SAP UX Tools 会将本地 SAP UI5 项目的资源文件，打包成一个压缩包，部署到远端 ABAP 系统上。这条 info 日志意思是 Visual Studio Code 开始创建压缩包了。笔者：压缩包创建成功。笔者：部署过程正式开始。笔者：压缩包的内容通过 HTTP POST 请求发送到 ABAP 服务器。

本文写作动机，来源于一位课程学习者的提问。在课程第 24 篇文章下有朋友留言：老师，有个问题想问一下，我换成自己 odata 数据源数据已经取出来，其他功能都正常，但是过滤功能不好用，我改了自己的数组类型字段和过滤字段，还有其他地方需要改吗？其他功能都调整正常但是过滤功能还是不好用？老师，我通过后端 odata 服务获取过滤参数实现过滤功能，但是我有个疑问，教程 22 过滤不是通过前端实现的吗，有点懵，还是前后端都可实现？这个问题比较典型，后面也蕴含了一些有用的知识点，本文就深入介绍。先说结论，

本文介绍的这个sap.m.Link控件看似简单，但它确实学习 SAP UI5 Smart Control 控件家族里Smart Link乃至里基于 Semantic Object 进行应用间跳转的重要理论基础，因此我们有必要牢固掌握这个控件的使用方法。比如 Fiori Elements List Report 类型的应用，其 Smart Table 区域的表格列，有很多超链接。点击这些超链接之后，可以看到一些弹出对话框：类似上面描述的这种场景，就大量使用到了 SAP UI5 的 Link 控件。

而当 Chrome 开发者工具打开之后，debugger 关键字让整个开发者工具停顿在断点上，故此时 endTime 和 startTime 的差，远远大于 100 毫秒，于是执行 if 分支里的。不过出于纯技术讨论，接下来笔者给大家介绍如何让你们的 SAP UI5 应用，在打开 Chrome 开发者工具之后，具有类似本文开头介绍的和文心一言类似的效果。，因为有很多种方式，可以使这种简陋的防御措施失效，比如在 Console 面板，手动将。变量值进行修改，使其之差小于 100，于是就不会进入重定向语句。

我们先来复习一下这个课程的内容。里的Categoryproperty 具有的注解：然后 XML 视图里，在控件的聚合内，将key属性定义成上图的Category字段：最后就能在界面渲染出 Smart Filter 字段了。后来我的里有朋友提问，如何对 Smart Filter Bar 控件默认渲染出来的这个控件外观不满意，想对其进行定制化，比如替换成其他类型的 SAP UI5 控件，应该怎么操作？本文就来详细介绍步骤。本步骤的源代码，位于文件夹 188 内。

关于 SAP UI5 控件的 Aggregation 概念，本教程之前的文章已经介绍过，这个概念允许控件（Control）以树状结构的形式组织其子控件。Aggregation 本质上是控件之间的关联，用于定义父子关系，其中一个控件可以是另一个控件的容器。利用 Free Style 做成 Fiori 画面里面使用 Smart Table 控件，现在想定在 Smart Table 控件右上的位置添加一个自定义按钮（取消按钮），点击之后把列表选中的数据进行取消处理。Aggregation），每个。

利用 Free Style 做成 Fiori 画面里面使用 Smart Table 控件，现在想定在 Smart Table 控件右上的位置添加一个自定义按钮（取消按钮），点击之后把列表选中的数据进行取消处理。这个控件内，不需要定义任何其他内容，所有的渲染工作直接交给外层的 Smart Table 控件就行了。属性中，可以指定 Grid Table，Analytical Table 和 Tree Table，这三种表格，都默认支持。在打开的应用里，使用本教程之前文章，介绍的 Chrome 扩展。

反馈教程代码的一个 bug.关于文件夹 96 里的代码：Jerry老师你好。我在本地执行这节课的代码时，碰到了下面的问题，有什么比较好的方法可以解决或者避免吗：Component.js的【attachRequestCompleted】方法被触发之前，先加载了Master.controller里的init方法。Master.controller的init方法中，调用了component的【getPageNumber()】方法。

在选择使用 SAP UI5 Freestyle 还是 Fiori Elements 时，开发团队需要权衡其优势和缺陷，并根据具体的业务需求，项目情况，以及开发团队人员的技术水平来进行决策。

其实稍作修改，就能让我们自己编写的 SAP UI5 应用里的代码，也能打印出类似的彩色日志。之前的文章，我只是介绍了如何做，限于篇幅，没有介绍详细的工作原理。本文我们就一起来学习下。

本文我们一起来看看如何使用 `ui5-middleware-servestatic` 来让 SAP UI5 应用加载本地的库文件。如果大家之前跟着笔者一起，完成了第 100 篇文章的开发步骤之后，在名叫 100 的文件夹里，已经存在了名叫 `resources` 的子文件夹了，这个子文件夹里包含了下载并解压完成的 SAP UI5 库文件。本文我们就重用这个 `resources` 文件夹。