UI5开发 – 发布到Fiori LaunchPad以及调试

最新推荐文章于 2025-06-25 18:42:44 发布
原创 最新推荐文章于 2025-06-25 18:42:44 发布 · 1.6k 阅读 · 4 ·
CC 4.0 BY-SA版权
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
文章标签：

#sap #eclipse #Fiori #UI5 #odata

本文介绍了如何调试UI5应用，包括在Chrome中打开应用链接、使用F12打开调试界面并在Source tab下设置断点。同时，详细阐述了将UI5应用发布到Fiori LaunchPad的步骤，包括创建Catalog、Target Mapping、Tile、group，以及在SAP创建角色并分配给用户。虽然应用已成功在Fiori LaunchPad上运行，但因Fiori不加载index.html导致Google API未加载，这个问题将在后续文章中解决。

通过前面的几篇文章，我们已经完整的开发了一个UI5应用，在本文主要介绍如何进行代码调试，以及如何把这个UI5的应用放到Fiori LaunchPad里面给别人访问。对于调试，根据不同的浏览器有不同的调试方法，个人建议使用Chrome，里面自带simulator可以模拟移动设备。

调试

打开Chrome，输入应用的链接：

按F12，打开调试界面

在Source tab下，可以看到js代码，其中可以设置断点

如何使用chrome调试代码，网上有很多文章可以参考，这里不做累述。

把应用发布到Fiori：

打开链接： https://<server>:<port>/sap/bc/ui5_ui5/sap/arsrvc_upb_admn/main.html

创建一个新的Catalog：

最低0.47元/天 解锁文章
迈入 SAP Fiori Elements 开发的大门 - 什么是 Fiori Elements，它和 Freestyle UI5 开发方式有何区别？
2007 年 ~ 2025 年，深耕 SAP 技术 18 年
04-15 2634
Fiori Elements 和 SAP UI5 Freestyle 是两种不同的开发方式，二者各有其优势和应用场合。如果 SAP UI5 应用开发需要在极短的时间快速完成，并且应用仅仅需要完成 SAP Fiori Elements 预置模板就能覆盖的标准流程，对灵活性，自由度和可扩展性没有太多要求，那么 Fiori Elements 是比较合适的选择。 如果应用需要实现非标准化的业务流程和用户界面，对定制化，可扩展性和灵活性有较高要求，则推荐使用 Freestyle UI5 开发方式。
35. 如何把本地开发的 SAP UI5 应用部署到 ABAP 服务器上
2007 年 ~ 2025 年，深耕 SAP 技术 18 年
02-08 4966
本教程前 34 个步骤， SAP UI5 应用一直是在本地 Visual Studio Code 中开发并通过本地命令行 ui5 serve 启动然后本地测试的。 本步骤我们将学习，如何使用 SAP UI5 Tools 的命令行，一键将这个本地开发好的 SAP UI5 应用，部署到 ABAP On-Premises 服务器上运行。 要按照本步骤介绍的指令进行练习，必须先有一个可以使用的 ABAP On-Premises 系统才行。 本文介绍详细的把 SAP UI5 部署到 ABAP 服务器上的步骤。....
1. SAP Fiori 和 SAP UI5 的区别和联系
2007 年 ~ 2025 年，深耕 SAP 技术 18 年
07-13 1774
之所以很多朋友容易把 SAP Fiori 和 SAP UI5 混为一谈，是因为 SAP S/4HANA 这个旗舰级产品，里面包含的 Fiori App(Application 的缩写，中文意思即应用)，全部采用 SAP UI5 这个工具开发而成。SAP UI5 在 Fiori 应用开发技术领域固然占据了统治地位，但我们绝不能将这两个概念混为一谈。
如何将UI5应用部署到Fiori On-Premise和On-Cloud的Launchpad上去
weixin_34416649的博客
04-07 203
On-Premise Launchpad 具体步骤参考我的博客: 如何将BSP应用配置成Fiori Launchpad上的一个tile On-Cloud Launchpad Fiori Cloud Launchpad里每个tile分配的应用必须是已经部署到SAP Cloud Platform的应用，因此首先必须在WebIDE里将测试好的应...
Fiori LaunchPad安装、配置、部署
热门推荐
IT好人-杨大山
03-23 1万+
Fiori LanuchPad（快速启动板） 安装、配置、部署
Demo：UI5 layout
森林木的博客
09-26 421
Layout 主要用的有三种 MatrixLayout：矩阵、表格式 HorizontalLayout： 行式 VerticalLayout：列式     Create project without default view layout" />   Edit Code in index.html   Demo1 矩阵式（表格式） layout" /> layout" /> Demo 2 行 l
115. 关于将本地 SAP UI5 应用配置到本地 Fiori Launchpad 的技术实现深入讲解
2007 年 ~ 2025 年，深耕 SAP 技术 18 年
08-05 1287
1. 本文深入阐述了在 SAP Fiori Launchpad 里配置 SAP UI5 信息，使其能够作为一个 tile，点击后在 Fiori Launchpad 里被打开的两种方法。方法1 需要在 url 字段正确维护待打开的 SAP UI5 应用在工程里的路径信息，方法2 需要在 additionalInformation 字段里维护完整的包含了命名空间的 SAP UI5 Component 名称。 2. 本文展示了一种错误消息驱动的探索方式，即故意维护一个不合法的值，通过 SAP UI5 框架抛出的错
54. 如何将本地 SAP UI5 应用配置到本地 Fiori Launchpad
2007 年 ~ 2025 年，深耕 SAP 技术 18 年
03-23 3286
SAP Fiori Launchpad(启动版) 是包括 SAP S/4HANA，SAP CRM 在内的很多标准产品提供给用户访问 UI 应用的标准入口，界面如下图所示： Fiori Launchpad 里的一个个矩形框，称之为 tile，点击之后，会跳转到配置的 SAP UI5 应用。Tile 与 SAP UI5 应用之间的映射关系，在 SAP 标准产品后台进行设置。 本教程到目前步骤为止，我们都是通过本地运行 npm install，然后 ui5 serve 之后，来访问该工具打印出的 url....
114. 如何通过单步调试的方式找到引起 Fiori Launchpad 路由错误的原因
2007 年 ~ 2025 年，深耕 SAP 技术 18 年
08-03 1086
本文通过图文并茂的方式，分享了如何通过 SAP UI5 开发人员自己单步调试的方式，弄清楚什么样的路由目标，即浏览器地址栏 # 特殊符号后面的 hash 部分，才会被判定为合法。这种方式可以被概括为错误消息驱动的单步调试方式，即通过错误消息，在 Chrome 开发者工具中找到调试的入口，然后通过调试的方式，找到 hash 合法判断的准确代码位置。......
部署UI5应用到 Fiori Launchpad 的详细步骤
此内容旨在帮助开发人员和IT专业人员理解如何将UI5应用整合到SAP的下一代用户界面平台，即Fiori，以便提供无缝的用户体验。 首先，了解关键概念：UI5是SAP的开源JavaScript框架，专注于构建现代、响应式的企业应用...
SAP Fiori Launchpad配置指南
10-27
SAP Fiori Launchpad是移动或桌面设备上Fiori应用程序的入口，Launchpad Designer是配置Launchpad的标准工具。本配置指南提供了设置SAP Fiori Launchpad和Launchpad Designer所需的信息。 此外，它还提供了将所有类型的SAP Fiori应用程序添加到Launchpad中的步骤。
SAP Fiori(SAPUI5)简介
06-23
SAPUI5, SAPFiori简介，更多信息：http://edu.youkuaiyun.com/course/detail/5046
Fiori Launchpad 使用管理应用生命周期。
weixin_42646630的博客
06-10 542
我在fiori launchpad上 写了创建了一个Dialog对象，然后我点击portal直接到主页，然后我再进入这个APP，我发现我的this._valueMaterialGrpDialog 对象存在，不是undifined状态。
Fiori学习：（4）Fiori Launchpad介绍以及相关配置
panabc119的专栏
12-19 4297
SAP Fiori Launchpad（启动板）被称为移动和桌面设备上 Fiori 应用程序系统的入口点。它包含 Fiori 系统中的各种磁贴（tile）。tile 是用于访问不同 Fiori 应用程序的方形对象。对这些 tile 的访问基于用户角色。SAP Fiori tiles 可在多种设备类型上运行，并为事务、分析、概况、智能业务应用程序等业务应用程序提供单点访问。
SAP 配置Fiori Launchpad
xiaodunju3960的博客
07-21 4656
** SAP 配置Fiori Launchpad ** Fiori在意大利语中是“花”的意思，因此我们也可以看到SAP Fiori Launchpad的官方登录页面背景是一朵花。Fiori是针对SAP S/4 HANA推出的，可以在电脑、平板、手机上显示SAP美观的前端界面。 关于将Fiori Launchpad配置出来的方法总结如下，这里我们采用手动配置的方法： 在ABAP前端系统激活SA...
深入解析 Fiori Launchpad Notification：架构、配置与用户体验全景
最新发布
2007 年 ~ 2025 年，深耕 SAP 技术 18 年
06-25 217
开发者可继承接口，在注册自研 Provider，利用实例化消息；若想批量推送，可用API (
SAP UI5 的本地 Fiori sandbox Launchpad
2007 年 ~ 2025 年，深耕 SAP 技术 18 年
04-25 594
源代码如下： <!DOCTYPE html> <html> <head> <meta http-equiv="X-UA-Compatible" content="IE=edge" /> <meta http-equiv="Content-Type" content="text/html;charset=UTF-8" /> <meta name="viewport" content="wi
UI5-培训篇-Fiori培训
abbilglf665483的博客
03-08 934
1.学习网站： 　SAPUI5学习地址： 　https://blog.youkuaiyun.com/stone0823/article/category/6650292/1? 　SAPUI5文档： 　https://sapui5.hana.ondemand.com/#/demoapps 　SAP Build 模型： 　https://developers.sap.com/tutorial...
Fiori UI5开发学习
Pianpianluoye
02-26 590
FIori UI5开发学习笔记Fiori Launch Pad磁贴Fiori App类型UI5 版本 Fiori Launch Pad 磁贴 磁贴包括静态磁贴、动态磁贴、新闻磁贴 Fiori App类型 分为事务型、分析型、事实表单&上下文跳转 UI5 版本 快捷键Ctrl + Shift + Alt + P ...
评论
成就一亿技术人!
拼手气红包6.0元
还能输入1000个字符
 
红包 添加红包
表情包 插入表情
表情包 代码片
 条评论被折叠 查看
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值