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 的本地安装包，将其安

如果雪花下落到超出屏幕的底部，会在 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` 文件夹。

这个文件包含的就是这个第三方库的完整实现源代码，其中第 18 行的逻辑，意思就是如果。我们来复习一下本教程迄今为止，介绍的超过 100 多篇文章里，开发出的 SAP UI5 应用的访问方式。代码第 5 行开始的 resources 配置，意思是告诉 SAP UI5 框架，从当前目录的。里，声明这个第三方 Middleware，如下图代码第 11 行所示，并且指定默认的。不知道大家注意到了没，比如我们访问百度的时候，是不需要输入完整的。大家在开始本章学习之前，请先完成前置章节的学习，了解先关的知识点。

通过这段代码，我们可以实现，在 SAP UI5 Custom Middleware 里，每次 HTTP 请求完成后，记录请求的原始 URL 和响应头部信息。这个实现可以在启动 SAP UI5 应用的控制台里，打印出原本只能在 Chrome 浏览器开发者工具 Network 面板里看到的信息，对于调试和监控应用程序的网络交互有所帮助。对象是 Express 应用中的响应对象，而 ‘finish’ 事件是在响应结束时触发的事件。事件对应的回调函数中，打印响应字段的头部字段，此时就可以打印出所有字段的内容了。

3 代表 major 版本即大版本，中间的 0 代表 minor 版本即小版本，最后的 0 称为 patch 版本。格式的配置文件，会被 SAP UI5 Tooling 解析。我们先看本地项目里的 package.json 文件，里面定义的对。打开这个超链接，里面提到，只有 3.0.0 和 3.0 以上的。本文介绍，当在 SAP UI5 应用工程文件夹里，执行。为 3.0 的 ui5.yaml，必须要求。文件，里面就包含了具体下载的版本号，的 SAP UI5 项目，其。这里的 3.0.0 是所谓的。

不过也没关系，因为按照本文开头介绍的，我们已经有相当多的解决方案来避免跨域问题了，本文这个练习，虽然没有实现我们的初衷，但还是在实战中进一步熟悉了 SAP UI5 Toolings 提供的 Custom Middleware 的开发和配置步骤。既然本教程前一篇文章我们学习了 SAP UI5 Custom Middleware 的开发技术，本文就来动手实战，通过 Custom Middleware 来给发往远端的 OData 请求的响应字段里添加。的配置如下，在第九行的 server 区域，声明了一个。

Jerry老师，有个问题想请教一下：官网右上角有个 Change Version 选项。有的控件属性可能在某个版本里就不能使用了。所以我们在写代码的时候，可能就会需要去指定一个 version 版本。在代码中指定 version，是 manifest 最开头的【_version】属性吗？①如果不是的话，是使用那个属性来指定呢？②如果是的话：第10课的sample code中_version是1.12.0，这个版本是可以在上面网站的ChangeVersion里找到该选项的。

相信通过本教程迄今为止的学习，大家已经从实战中感受到 SAP UI5 Tooling 提供的一套强大而一致的命令行接口，涵盖了从 SAP UI5 项目初始化到构建、调试、测试和部署的各个方面。命令行时，实际上启动了一个 Web server，本地开发好的 SAP UI5 应用会部署到这个本地 Web Server 上，然后我们就可以开始在浏览器里进行测试了。负责将 SAP UI5 应用发向服务器端的 HTTP 请求的响应，取回到浏览器端，因此我们的自定义 Middleware 在这个时间点执行时，

笔者做了一个例子，我们选择下拉菜单里不同的选项，可以使用 iframe，将百度，Bing 和 QQ 的 HTML 页面，动态地嵌入到我们开发的 SAP UI5 应用里。

它包含了有关事件的详细信息，允许开发者对事件进行操作和响应。SAP UI5 框架，通过捕捉键盘和鼠标事件，并且把它们的处理函数，注册到一个私有的函数的做法，实现了 SAP UI5 应用在 iframe 嵌入模式下的。如果大家不想对 HTML 原生的事件对象的使用细节，花费太多的精力去理解，可以简单地理解成，事件对象的这两个方法调用之后，用户用鼠标和键盘触发的相关操作，都如。了，因为 SAP UI5 应用里面所有的按钮和输入元素都失效，无法再在嵌入的 iframe 里运行了，这正是我们期望达到的效果。

攻击者通过将恶意内容覆盖在看似正常的页面上，诱使用户误点击隐藏在其它元素上的按钮或链接，从而触发意外的操作。（Inline Frame 的缩写）提供了一种将其他网页内容嵌入到当前页面的方式，使得页面可以同时展示多个独立的文档。是 HTML 中的一个标准标签，用于在当前 HTML 页面里，嵌套另一个独立的 HTML 文档。这种攻击通常通过透明的或半透明的图层来实现，用户在不知情的情况下与隐藏的恶意元素互动。也可能引发一些安全性问题，在前端领域，最为人熟知的一个安全问题，就是所谓的。

笔者这套教程写作之后，有朋友反馈，说教程配套的代码里，每个步骤的 SAP UI5 应用都是笔者事先创建好的，这些朋友想自己动手，从零开始创建一个全新的 SAP UI5 应用，问我具体的步骤是什么？然后弹出一个 form 表单，维护这个应用基本的信息，比如应用标题，基于的 SAP UI5 框架的版本号，创建好的应用会放置在哪个目录，诸如此类的信息。我们进入 00 文件夹的 jerrymodule 子文件夹，就能看到创建好的 SAP UI5 应用的源代码了，如下图所示。