UI5开发 – 发布到Fiori LaunchPad以及调试
2017-03-19 本文已影响239人
46b61a5f089d
通过前面的几篇文章,我们已经完整的开发了一个UI5应用,在本文主要介绍如何进行代码调试,以及如何把这个UI5的应用放到Fiori LaunchPad里面给别人访问。对于调试,根据不同的浏览器有不同的调试方法,个人建议使用Chrome,里面自带simulator可以模拟移动设备。
调试
打开Chrome,输入应用的链接:
![](https://img.haomeiwen.com/i2445987/0865027f3b3a1922.png)
按F12,打开调试界面
![](https://img.haomeiwen.com/i2445987/52abd0d7274aebe6.png)
在Source tab下,可以看到js代码,其中可以设置断点
如何使用chrome调试代码,网上有很多文章可以参考,这里不做累述。
把应用发布到Fiori:
打开链接: https://<server>:<port>/sap/bc/ui5_ui5/sap/arsrvc_upb_admn/main.html
创建一个新的Catalog:
![](https://img.haomeiwen.com/i2445987/4c691a1826f7bb68.png)
![](https://img.haomeiwen.com/i2445987/3379977b184c347b.png)
创建Target Mapping
![](https://img.haomeiwen.com/i2445987/f6401662b46b3260.png)
创建一个新的Tile
![](https://img.haomeiwen.com/i2445987/f63fc47c212c61b1.png)
![](https://img.haomeiwen.com/i2445987/41c249f54ebb4b5c.png)
创建一个新的group:
![](https://img.haomeiwen.com/i2445987/2af175877d643024.png)
添加已经创建的catalog到这个group
![](https://img.haomeiwen.com/i2445987/267170eaa22a500e.png)
在SAP创建一个role,添加catalog到这个role,并且分配这个role到用户
![](https://img.haomeiwen.com/i2445987/d6863fa10b15ba0f.png)
![](https://img.haomeiwen.com/i2445987/9001c6c7d099e4c2.png)
打开Fiori LaunchPad
http://yourservername:port/sap/bc/ui5_ui5/ui2/ushell/shells/abap/FioriLaunchpad.html?sap-client=800&sap-language=EN
添加这个app到一个新的group:
![](https://img.haomeiwen.com/i2445987/3a009ba7907beaff.png)
![](https://img.haomeiwen.com/i2445987/e38220a08e1dd9e4.png)
![](https://img.haomeiwen.com/i2445987/f07b26689dfd6af8.png)
![](https://img.haomeiwen.com/i2445987/00fdd78b470f78de.png)
点击运行app
![](https://img.haomeiwen.com/i2445987/35c6a5027273e882.png)
问题: 可以看到,应用已经运行与Fiori LaunchPad,可是地图却没有显示出来,因为在Fiori中,不会加载index.html,而我们google API加载却是在index中完成的,在下篇文章中会给出解决方法。