SAP资深技术专家Jerry Wang的分享

原创 一个SAP成都研究院开发工程师的2020年度总结：未知生，焉知死

转眼间，又到了2020年末写年度总结的时候了。我一直觉得，对于像Jerry这样，年复一年整天两点一线，除了编程还是编程的程序员来说，年度总结可以增加一些生活的仪式感。本文是我开通公众号之后的第四个年终总结，前三年的年度总结如下：Jerry的2017, 编程与游泳一个SAP开发人员的2018年终总结一个SAP开发人员的2019年终总结2020年，对于很多人来说都是刻骨铭心的一年，对于我来说更不例外。回顾自己前三十多年，从上学到高考，读研究生，再到求职，娶妻生子，我的生活一直都一帆风顺

原创 SAP Spartacus里，点击checkbox右边的span文本，不会触发checkbox勾选的原因

如下图：我希望点击Approver之后，其前面的checkbox会自动被选中，然而并没有发生。检查其html代码：input和span的parent标签是div，而不是label，换成label标签页之后问题消失。更多Jerry的原创文章，尽在：“汪子熙”:...

原创 SAP Spartacus User Form里checkbox的设计原理

user form里每个区域总共由3个元素组成：一个label，充当container作用一个span元素，维护textual label一个实际的functional elementlabel标签的样式：18px，bold因为label是在section这个父节点下面，所以_details.scss文件里定义的 .details label选择器生效：flex 50%去掉之后的效果：测试一下这个label标签到底会影响哪些页面元素：具有红色边框的都是labe

原创 SAP Spartacus user form去除嵌套label的side effect之一

如图：所有label下面的div标签，都会受到这个修改的影响：padding-bottom:10px，造成了同样通过div实现的title dropdown list也产生一个10px的bottom padding，这样整体文本内容就往上顶了：

原创 Angular Reactive Form里的setNgReflectProperty

源代码：import { Component } from '@angular/core';import { FormControl } from '@angular/forms';@Component({ selector: 'app-reactive-favorite-color', template: ` Favorite Color: <input type="text" [formControl]="favoriteColorControl"> `})e

原创 SAP Spartacus user role页面的checkbox设计明细介绍

1：tag选择器2. class选择器3. tag选择器把font-weight：bold去掉之后的效果：把font-size: 18px去掉后的效果：cx-org-list label:padding-inline-end: 10px 删除之后，checkbox挨得很近了。display：block去掉之后cx-org-list .details label label:去掉font-weight: normal后，字体变粗了：label .form-check: 去掉..

原创 Angular ngIf指令运行时执行原理

源代码如下：这里的NgIf是一个Directive实例吗？重要的属性：_elseTemplateRef和_elseViewRef为空，意思是template中的ngif没有指定如果条件为false，应该加载什么template或者view.thenTemplateRef指向的是如果condition为true，应该加载的模板信息。设置NgIf实例的private属性：触发ngIf属性的set方法：在NgIf的_viewContainer里添加ngIf condition为true

原创 SAP Spartacus User form属性的运行时字段明细

http://localhost:4200/powertools-spa/en/USD/organization/users/08ecc0b1-16ef-4a74-a1dd-4a244300c974/edit刷新之后，浏览器地址栏首先变为：http://localhost:4200/powertools-spa/en/USDsetNgReflectProperty函数针对如下的Directive不断触发：在SkipLink Component里被反复调用到：执行到ngif和formG

原创 SAP Spartacus User form通过label标签的实现原理

第一次见到这个有点诧异，居然是通过label实现的：上述页面可以从SAP Spartacus User list，点击某个user进入明细页面开始编辑：看到这个ng-reflect-name=roles, 就知道其template里，有一个[name]=XXX的绑定设计：design time：runtime：注意design time的appendTo=“cx-org-list”, 翻译成了runtime的: ng-reflect-append-to='cx-org-list".原来

原创 外部系统调用PO的webservice服务，往SAP系统发送数据，用的XISOAPAdapter的方式，出现错误

我的微信群里有朋友提问：外部系统调用PO的webservice服务，往SAP系统发送数据，用的XISOAPAdapter的方式，出现这个错误我的回答：https://answers.sap.com/questions/10832026/error-comsapaiiafsdkxiutilurimalformeduriexception.html更多Jerry的原创文章，尽在：“汪子熙”:...

原创 Can‘t bind to formControl since it isn‘t a known property of input错误消息的处理

试图给input标签页施加formControl这个Directive的时候，出现如下错误：Can’t bind to ‘formControl’ since it isn’t a known property of ‘input’.解决办法：导入ReactiveFormsModule :import { ReactiveFormsModule } from '@angular/forms';加入app module的imports区块里：之后语法错误消失：更多Jerry的原创文

原创 SAP Spartacus user和org user form两处不同的checkbox风格

如图：两处checkbox实现的文件位置：screenshot of checkbox class in user-form.component.html:screenshot for checkbox in unit-user-role.component.html:html source code and css style for checkbox in user form:html source code and css style for checkbox in unit-use

原创 Angular formControl指令定义的位置

一段测试代码：import { Component } from '@angular/core';import { FormControl } from '@angular/forms';@Component({ selector: 'app-reactive-favorite-color', template: ` Favorite Color: <input type="text" [formControl]="favoriteColorControl"> `}

原创 Angular form学习笔记：Angular两种实现form的方式

https://angular.io/guide/forms-overviewAngular提供了两种通过form来处理用户输入的方式：reactive formtemplate-driven formAngular provides two different approaches to handling user input through forms: reactive and template-driven. Both capture user input events from th

原创 Angular form控件的shadow DOM

import { Component } from '@angular/core';import { FormControl } from '@angular/forms';@Component({ selector: 'app-reactive-favorite-color', template: ` Favorite Color: <input type="text" [formControl]="favoriteColorControl"> `})export

原创 Angular form控件原生HTML代码里ng-reflect-form属性和其值的生成时机

简单的Component代码：import { Component } from '@angular/core';import { FormControl } from '@angular/forms';@Component({ selector: 'app-reactive-favorite-color', template: ` Favorite Color: <input type="text" [formControl]="favoriteColorControl"&g

原创 一个SAP成都研究院开发工程师 2020 年的所有文章列表

这个公众号 2018～2019年两年总共发表了179篇原创文章，分别来自SAP成都研究院28位同事。这179篇原创文章的列表，可以从这里获得：SAP成都研究院小伙伴们2018～2019两年间的179篇原创文章合集2020年，Jerry住了一个月的院，在家里又瘫了两个月，总共发表了87篇原创文章。三年下来，总共发布了269篇原创文章。2020年末累计关注人数：9435感谢这些关注者们一如既往的支持，2021年Jerry会继续坚持输出技术文章。下面是2020年全年87篇文章列表。点击文章标题即

原创 SAP中国，在中国，为中国，一些包含了SAP logo的NBA运动套装

原创 网友提问：关于CX_VSI_SYSTEM_ERROR异常，Fiori病毒扫描参数文件

Jerry的技术交流群里，有网友提问：调用webservice的时候 就报了这个错误：看我的回答：解答：https://blog.csdn.net/i042416/article/details/92983980https://blog.csdn.net/i042416/article/details/85006625更多Jerry的原创文章，尽在：“汪子熙”:...

原创 使用Visual Studio Code调试运行在SAP云平台上处于运行状态的nodejs应用

https://blogs.sap.com/2020/11/23/debugging-nodejs-application-in-vscode-running-on-sap-cloud-foundry该nodejs应用的package.json：{ "name": "debug-cloud", "version": "1.0.0", "description": "", "main": "index.js", "engines": { "node": "12.X"},

原创 SAP系统和微信集成的系列教程之七：使用Redis存储微信用户和公众号的对话记录

这是Jerry 2020年的第88篇文章，也是汪子熙公众号总共第269篇原创文章。本系列的英文版Jerry写作于2017年，这个教程总共包含十篇文章，发表在SAP社区上。系列目录(1) 微信开发环境的搭建(2) 如何通过微信公众号消费API(3) 微信用户关注公众号之后，自动在SAP C4C系统创建客户主数据(4) 如何将SAP C4C主数据变化推送给微信公众号(5) 如何将SAP UI5应用嵌入到微信公众号菜单中(6) 如何通过OAuth2获取微信用户信息并显示在SAP UI5应用中(7

原创 Angular form学习笔记

https://angular.io/start/start-formsAngular里的form分成两部分：the objects that live in the component to store and manage the form, and the visualization of the form that lives in the template.位于Component里的objects, 用于store和管理form以及template里的visualization部分。

原创 网友提问：SAP FUNCTION使用cl_http_client POST REQUEST的问题

网友提问：请教大家个问题：SAP FUNCTION 使用cl_http_client POST REQUEST 给对方的API,包含多个参数以及一个JSON放在body里，对方服务器发现我们的REQUEST过去，所有数据都被拼在url里，如果JSON数据过多，SAP端就会是Bad request报错。我的问题是，这个参数怎么做才能不拼在URL里？参考我写的例子：https://github.com/wangzixi-diablo/abap/blob/master/ABAP/C4COData

原创 SAP fiori上直接连接到操作系统层面 然后进行相关操作的需求

哪位童鞋弄过 fiori上直接连接到操作系统层面 然后进行相关操作的需求啊?现在在做一个串口的, 我是在OS上跑一个nodeJS的服务, 网页(fiori)直接websocket和OS的服务通讯应用没起的话 ecc后台运行外部命令就不可行了更多Jerry的原创文章，尽在：“汪子熙”:...

原创 一个css文件里实际并不存在的class，不能给element layout产生任何影响

原创 有网友提问，关于本地XML转JSON的小工具

有没有什么本地XML转JSON的小工具？我找到一个可以在本地使用的工具：https://sourceforge.net/projects/xml2json-converter/更多Jerry的原创文章，尽在：“汪子熙”:

原创 Angular jasmine fixture.detectChanges如何触发directive的set方法

测试代码：import { Component } from '@angular/core';import { waitForAsync, ComponentFixture, TestBed } from '@angular/core/testing';import { FocusDirective } from './focus.directive';import { KeyboardFocusService } from './services';import { By } from '@an

原创 Angular jasmine returnValue方法的实现原理

一个实际的例子：首先创建一个闭包函数this.plan，存储传入的期望返回值。this.plan是SpyStrategy的一部分。紧接着返回spied wrapper函数，方便链式调用：callThrough的意思是，仍然监控函数的执行，只是wrapper执行时，返回原始函数调用的结果。更多Jerry的原创文章，尽在：“汪子熙”:...

原创 Angular jasmine spied Method toHaveBeenCalled的执行原理

语法：expect(传入一个被spied后的方法).matcher检查el.focus是spied method：expect函数返回的是一个matcher：进行toHaveBeenCalled的matcherFactory：Expector原型链上的compare方法逻辑：首先生成一个matcher实例，然后使用apply的方式动态调用之：spy函数的and属性就是SpyStrategy，其Plan属性返回的就是andReturnValue里指定的值。calls属性就是调用trac

原创 Angular jasmine spyOn函数的实现原理

例子：语义：希望service.findFirstFocusable方法被监控，同时其调用之后，返回el变量。输入参数1：MockkeyboardFocusService输入参数2：字符串findFirstFocusable这两个参数去调用spyRegistry.spyOn方法。首先要判断MockkeyboardFocusService这个对象里确实有findFirstFocusable方法：如果这个对象已经有and和calls属性，说明已经被spied了：其中and指向spy s

原创 SAP从业者群里讨论SAP技术的更新换代问题

刚接触新的东西，有挫败感很正常。我每次学新东西也经常这样比如按照教程自己做，最后得不出教程介绍的效果时我知道十年前神经外科医生开颅手术都是用显微镜做，最近趋势是改用内镜做了。很多用显微镜能做出很好手术的医生，也被迫换成内镜。因为内镜是趋势。那些做了几十年显微镜手术的老医生，换成内镜很不习惯。年轻医生刚从业就从内镜开始学，没有历史包袱，上手很快。所以不是程序员这一行行业才面临着持续学习....

原创 SAP系统和微信集成的系列教程之六：如何通过OAuth2获取微信用户信息并显示在SAP UI5应用中

这是Jerry 2020年的第87篇文章，也是汪子熙公众号总共第269篇原创文章。本系列的英文版Jerry写作于2017年，这个教程总共包含十篇文章，发表在SAP社区上。系列目录(1) 微信开发环境的搭建(2) 如何通过微信公众号消费API(3) 微信用户关注公众号之后，自动在SAP C4C系统创建客户主数据(4) 如何将SAP C4C主数据变化推送给微信公众号(5) 如何将SAP UI5应用嵌入到微信公众号菜单中(6) 如何通过OAuth2

原创 Angular jasmine如何从detectChange触发refreshView进而执行到Component的hook实现

触发RefreshView：refreshView的方法实现里，会多处调用executeCheckHook方法：每个待执行的hook方法的名称都能在注释里找到：例如：execute pre-order hooks (OnInit, OnChanges, DoCheck)execute view hooks (AfterViewInit, AfterViewChecked)：从而执行到Component的各种hook：更多Jerry的原创文章，尽在：“汪子熙”:...

原创 Angular refreshView里Component template函数的执行原理

在refreshView里执行template function：执行template：template function如图：单步执行到[cxFocus]时：再单步执行，进入函数ɵɵpureFunction0：/** * @license * Copyright Google LLC All Rights Reserved. * * Use of this source code is governed by an MIT-style license that can be *

原创 Angular开发模式下的setNgReflectProperties函数

执行上下文：detectChange触发的refreshView里：LView：待测试的视图：datavalue：value：type：3 - elementtype：0 - containerfunction setNgReflectProperties(lView, element, type, dataValue, value) { if (type === 3 /* Element */ || type === 0 /* Container */) {

原创 Angular refreshView的执行原理

完整源代码：/** * Processes a view in update mode. This includes a number of steps in a specific order: * - executing a template function in update mode; * - executing hooks; * - refreshing queries; * - setting host bindings; * - refreshing child (embedde

原创 Angular jasmine单元测试框架fixture.detectChanges的实现原理

源代码：fixture的类型是component-fixture，里面会调用_tick方法：具体执行的detectChange逻辑，取决于Change Detect reference：RootViewRef，执行view方面的change detect：class RootViewRef extends ViewRef { constructor(_view) { super(_view); this._view = _view; }

原创 Angular jasmine单元测试框架TestBed.createComponent的实现原理

单元测试代码里的createComponent，是通过TestBedRender实现的：TestBedRenderer3：获得注入的TestComponentRenderer：const result = this.testModuleRef.injector.get(token, UNDEFINED, flags);得到DomTestComponentRenderer：一个硬编码的rootElementId：root0创建一个template元素，里面包含一个div元素，id为r

原创 Angular jasmine单元测试框架里使用it函数定义single spec

it函数接收两个参数，描述信息和包含了待测试的单元测试代码的函数： /** * Define a single spec. A spec should contain one or more {@link expect|expectations} that test the state of the code. * * A spec whose expectations all succeed will be passing and a spec with any

原创 Angular jasmine单元测试框架里describe的实现原理

源代码：describe函数传入的两个参数：描述信息和箭头函数：从注释能看出，describe函数的语义：Create a group of specs (often called a suite)getJasmineRequireObj().interface = function(jasmine, env) { var jasmineInterface = { /** * Callback passed to parts of the Jasmine base interfa