SAP Cloud for Customer Rule Editor的使用方法和底層工作原理

i042416發表於2020-08-28

In C4C it is very convenient to define rule to dynamically control the visibility of a given UI element. This blog mainly focus on how it works under the hood, so that in case you meet with trouble or this dynamical mechanism does not work as you expected, you can first do trouble shooting by yourself before creating a ticket to SAP. For example I would like to enable FEED facet only in condition that the Priority equals to Immediate,


SAP Cloud for Customer Rule Editor的使用方法和底層工作原理


and hide it for any other values:


SAP Cloud for Customer Rule Editor的使用方法和底層工作原理


In order to achieve this we can simply create one rule as below, which means the visibility of FEED tab equals to the value of expression “Root.PriorityCode” evaluated in the runtime.


SAP Cloud for Customer Rule Editor的使用方法和底層工作原理


When this rule is created, the rule detail is stored as a CalculationRule node in UI Model. You can find it by appending “debugMode=true” in url.


SAP Cloud for Customer Rule Editor的使用方法和底層工作原理


Inside this CalculationRule node there is one important sub node:

<InvalidationTrigger id="e45bc0e9dd7ea57fff7cf29238564aad" bindingExpression="/Root/PriorityCode">


SAP Cloud for Customer Rule Editor的使用方法和底層工作原理


With this setting, whenever I change the UI element bound to Model field /Root/PriorityCode, the rule will be evaluated.


SAP Cloud for Customer Rule Editor的使用方法和底層工作原理


The rule represented in String format will be parsed into an Abstract Syntax Tree:


SAP Cloud for Customer Rule Editor的使用方法和底層工作原理 SAP Cloud for Customer Rule Editor的使用方法和底層工作原理


And its value gets evaluated:


SAP Cloud for Customer Rule Editor的使用方法和底層工作原理


The visibility of FEED tab is called as “DynamicProperty” as it is controlled dynamically by the rule I specified. The update on the visibility property will lead to the fact that the whole NavigationBar with internal ID ___bar1 is added to the invalidation queue whose elements will be invalidated later.


SAP Cloud for Customer Rule Editor的使用方法和底層工作原理


The Navigation bar gets rerendered in line 623:


SAP Cloud for Customer Rule Editor的使用方法和底層工作原理


The Navigation bar has its dedicated renderer NavigationBarRenderer which does the actual rendering work ( see my blog for  detail about UI5 control render)


SAP Cloud for Customer Rule Editor的使用方法和底層工作原理 SAP Cloud for Customer Rule Editor的使用方法和底層工作原理


This is the reason why finally you could not see FEED tab in UI as the corresponding DOM element is not rendered by NavigationBarRenderer due to the IF evaluation in line 78.


SAP Cloud for Customer Rule Editor的使用方法和底層工作原理


要獲取更多Jerry的原創文章,請關注公眾號"汪子熙":

SAP Cloud for Customer Rule Editor的使用方法和底層工作原理


來自 “ ITPUB部落格 ” ,連結:http://blog.itpub.net/24475491/viewspace-2715433/,如需轉載,請註明出處,否則將追究法律責任。

相關文章