|
Blogs by

Jerry Wang

下面是一些我日常工作中使用Chrome开发者工具的心得和小技巧,希望对您提高开发和调试的效率能有所帮助。 1. Element属性断点 在Element标签页选中某个html标签,在右键菜单里设置Attributes modifications断点。下图意思是一旦title标签的属性发生变化,断点自动触发。 我曾经处理过一个incident,用户抱怨在Fiori应用里做了一些操作之后,页面的title被修改成一个错误的值。借助这个属性断点功能,我很快找到了title被修改的那行代码。这个incident的更多细节请参考我的博客: A quick way to find which code has changed the UI5 application page title by debugging 2. 在浏览器的原生方法里设置断点 这种说法其实并不准确,因为我们没办法在Chrome里查看浏览器原生方法的实现代码,更别提设置断点了。 其实我的需求是,希望调试的时候,在这些浏览器原生方法以某些特殊输入参数被调用时能停下来。 举个例子,在我研究Angular框架时,用ng-repeat画了一个列表,如下图所示。我发现对于每条列表记录,最终生成的原生html代码都有一个注释元素,如下图红色高亮区域显示。 我很好奇Angular框架是在哪行代码生成的这三个注释元素。按照推理,这些注释肯定是通过原生方法createComment创建的,然而我无法在这个方法里面设置断点。如果直接在Angular框架里根据源代码createComment搜索,然后在所有的搜索结果处设置断点——这种方法理论上可行,然而效率太低,因为搜索结果有将近100处调用了createComment。 怎么办? (1) 在angular.js文件最开始的地方设置断点, 打开应用,断点触发: (2) 将浏览器原生的方法实现保存在变量oldFn里,然后重写createComment。在重写的版本里,加上我自己的判断逻辑:我期望只有当创建的comment文本包含ngRepeat时,断点才触发。实现如下图所示。在console里执行下图代码,完成对createComment原始实现的覆盖。 然后在调试器里继续执行,最终断点在我想要找的位置触发:

1. 直接将outlook的邮件添加到C4C的业务文档里 2. 直接在outlook里创建C4C的预约Appointment 从C4C系统下载Outlook的Addin, 安装之后,会在Outlook里看见一个新的面板: 点击Log On登录: 如果需要的话,在Settings里设置proxy。 登录之后,即可立即在outlook里直接看到该User WANGJERRY1164在C4C里的notification: 上图outlook里看到的notification来自C4C系统: 1. 直接将outlook的邮件添加到C4C的业务文档里 在outlook的C4C面板里能直接搜索C4C系统里的联系人: 假设我选中第四个: 假设我选中第四个搜索结果,即名为Wang Jerry的联系人,那么我可以直接在outlook里看到这个联系人对应的Opportunity和Activity等信息: 这些信息同样来自C4C系统: outlook里的邮件可以通过拖拽的方式直接添加到C4C的业务文档上去。 如下图所示,我将标题为”Ticket has been created for you”这封邮件拖到outlook C4C面板的Opportunity上去,注意下图鼠标形状,提示这个拖放操作可以完成。 一旦拖放完成后,弹出提示”1 item is being synchronized”: 一个item正在同步。 同步完成之后即可在C4C系统的Opportunity里看到这个来自outlook的mail: 2.

如何在本地找到sap-ui-core.js.map文件 sap-ui-core.js.map文件内容一览 如何生成.map文件 在我的博客A debugging issue caused by source code mapping里我介绍了在我做SAP C4C开发时遇到的一个曾经困扰我很久的问题,最后结论是这个问题由于JavaScript的source code map机制在Chrome开发者工具里起作用,其实是working as designed的一种行为。但是当时因为时间限制,没有去深入学习JavaScript source code map的更多细节。 在这篇文章里我用一个简单的UI5应用来研究该机制。这个应用的UI仅仅包含一个Button,点击之后弹出一个Message Toast。 下面是我XML view和Controller的实现。 打开Chrome开发者工具里的source code map开关: 然后浏览器里访问这个UI5应用,我们就能在Chrome开发者工具里看到这些UI5库文件的调试版本(.dbg.js)。但是在Chrome开发者工具的Network标签里,我们观察不到这些调试版本文件的加载。那么问题来了:这些.dbg.js文件从哪里来的? 当关闭Chrome开发者工具的source code map功能之后,我们在Chrome开发者工具里再也观察不到这些.dbg.js文件了。将下图和source code map打开时的截图做比较: 如何在本地找到sap-ui-core.js.map文件 单击sap-ui-core.js,在其最后一行1875行,看到该行内容: //#

How to locate sap-ui-core.js.map in your local laptop Go through sap-ui-core.js.map How to generate map file In my blog A debugging issue caused by source code mapping I introduced an issue which makes me confused

部署方式 SAP标准UI开发方式 Partner UI开发方式 SAP后台开发方式 Partner后台开发方式 与其他系统集成的技术手段 Key User Extensibility Office integration Jerry在S/4HANA for Customer Management(以下简称S4CRM)和Cloud for Customer(以下简称C4C)开发团队都工作过,这篇文章给出这两款产品一些技术层面的比较。 下图是我原创的表格。 注:表格中S4CRM指2018年2月28日发布的1.0版本。 部署方式 这一差异显而易见,本地部署和云端部署的区别导致了表格里其他比较项目的差异。 SAP标准UI开发方式 S4CRM和C4C的UI虽然看起来都是Fiori风格,但实现技术不同。 S4CRM的标准UI采用的仍然是SAP CRM WebClient UI技术,只不过SAP WebClient UI团队的开发同事们巧妙地设计了一系列CSS,并且对WebClient UI的框架做了一些调整(所谓的”Visual Harmonization”), 使得其视觉效果和体验接近于原生的Fiori应用。 如果看到一个界面风格和原生Fiori应用很类似的UI,您不能判定该UI到底是基于WebClient UI还是SAP UI5,可以打开Chrome开发者工具,倘若能找到下图红色区域所示的CRM

S/4HANA Fiori应用的搜索分页实现 CRM Fiori应用的搜索分页实现 在我的博客Paging Implementation in S/4HANA for Customer Management 我介绍了S/4HANA for Customer Management里采用WebClient UI技术实现的UI上的搜索分页实现。 那么S/4HANA和CRM里原生的Fiori应用,其搜索分页又是如何实现的? 这篇博客分别选取S/4HANA里的Product Master,以及CRM里的My Opportunities这两个应用为例来介绍。 S/4HANA Fiori应用的搜索分页实现 点击搜索按钮之后,默认返回前25个命中的product,同时显示总共命中的product数目:140。 这个分页效果通过OData请求的参数$skip=0&top=25实现的。而总共命中条数140的显示通过另一个参数$inlinecount来实现,该参数的后台实现原理类似ABAP Open SQL里的SELECT COUNT(*)。 从Chrome开发者工具里观察该请求的回应,确实只有25条记录返回。 将该搜索结果列表scroll至底部,发现有另一个OData request自动发出: 该请求的头部参数为$skip=25&top=25,因此能够从后台只取从第26到50个product: 在我博客SAP Fiori里的List是如何做到懒加载Lazy load的 我解释了$skip递增的序列值0,25,50,75…是如何在前台生成的。

Search Paging implementation in S/4HANA Fiori application Search Paging implementation in CRM Fiori application Search Paging implementation in S/4HANA for Customer Management In my blog https://blogs.sap.com/2018/03/28/paging-implementation-in-s4hana-for-customer-management/ I introduce the search paging implementation in S/4HANA for

今天一同事问我这个问题:S/4HANA Fiori应用里的列表,一旦Scroll到底部就会自动向后台发起新的请求把更多的数据读取到前台显示。 以Product Master这个应用为例,我点击搜索之后,结果区域显示当前系统一共有140个product,但是只有前25个返回并显示在浏览器里。 这个分页效果是UI5 OData的参数实现的:$skip=0&top=25。 而总数140,是通过参数$inlinecount实现,其原理和ABAP Open SQL的SELECT COUNT(*)类似。 从Chrome开发者工具能观察到头25个product的payload: 当将列表滚动至底部时,第二批共25个product从后台读取出来,显示在前台: 这个http请求的参数:$skip=25&top=25,用于读取从第25个到第50个product。 从调用栈能清楚发现是scroll这个事件触发的第二批product的读取动作。 然后再去GrowingEnablement.requestNewPage这一个调用栈,发现一个属性_iLimit维护了一个开始索引,每次scroll到底部的事件触发之后,该属性值都会被GrowingThreshold累加。 因为API this._oControl.getGrowingThreshold每次返回的是一个常量25, 因此_iLimit的值每次scroll到底部之后看起来是这样的:25,50,75,100 … 这些值会被用来作为HTTP请求参数$skip的值传到后台: 我同事的问题:growingThreshold在文件sap.m.ListBase.js里被硬编码成20, 但是运行时在何处被改写成了25? 要回答这个问题,需要了解一些UI5 Smart Template的知识,因为例子里这个Product Master的Fiori应用,也是基于Smart Template开发的。可以参考我的博客 My understanding about how object page in Smart

Today my colleague asks me one question: it could be observed in S/4HANA Fiori application for example in Product Master application, Once search button is pressed, by default the first 25 products among totally found