利用ES6里标准化的JavaScript proxy对象拦截 C4C页面的HTML div原生操作

SAP Cloud for Customer的UI实现里，有不少使用JavaScript在运行时动态创建div标签的例子。

如果想研究这些情形发生的上下文，我们可以使用ES6提供的标准Proxy对象，给浏览器原生的document.createElement方法注入一个proxy，里面设置一个断点。这样每当div标签页被动态创建时，我们注入的proxy将会取代标准的document.createElement被浏览器调用。从断点停下来的调用上下文，我们即可观测到更多信息。

const handler = { // Our hook to keep the track
    apply: function (target, thisArg, args){
        console.log("Jerry Intercepted a call tocreateElement with args: " + args);
        debugger;
        return target.apply(thisArg, args)
    }
}
document.createElement= new Proxy(document.createElement, handler);

比如每次SAP Cloud for Customer UI出现busy indicator的动画效果时，其实浏览器就是残躯新建一个div标签的方式实现的。

使用setTimeout实现busy indicator的动态效果。

例子如下：

https://<host>/sap/fpa/ui/tenants/008/app.html#;view_id=story;storyId=E1E3EAF366F3CCAD5AD936E67714AFCF;f01Model=t.9.CBGDBM56H1FN8SP62W3ZERTNNK:CBGDBM56H1FN8SP62W3ZERTNNK;f01Dim=Entity;f01Val=[%22China%22,%22United%20States%22]

上述例子传递了两个值给technical ID为Entity的dimension，描述信息为Country Name，传递的两个值是encode过后的China和United States：

可以利用SAP Analytics Cloud自带的Compare to Previous Day功能，将当天的值同前一天的值相比较：

如果一个page里所有的图使用的是同一个model，则该model可以在url里省略。

https://<host>/sap/fpa/ui/tenants/008/app.html#;view_id=story;storyId=E1E3EAF366F3CCAD5AD936E67714AFCF;f01Dim=Entity;f01Val=China

model ID可以通过这个url查看：

https://de.ap1.projectorca.cloud/api/v1/stories?include=models

以Github网站为例，

F12打开Chrome开发者工具，Security标签页，View certificate，点击view detais，选择Copy to file.

事务码STRUST，打开SSL client SSL Client (Standard)，切换到编辑模式：

选择import certificate，选择之前从Chrome导出的certificate，点击Add to certificate list.

重启ICM，使certificate立即生效。