SAP Cloud for Customer Rule Editor的使用方法和底層工作原理
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,
and hide it for any other values:
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.
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.
Inside this CalculationRule node there is one important sub node:
<InvalidationTrigger id="e45bc0e9dd7ea57fff7cf29238564aad" bindingExpression="/Root/PriorityCode">
With this setting, whenever I change the UI element bound to Model field /Root/PriorityCode, the rule will be evaluated.
The rule represented in String format will be parsed into an Abstract Syntax Tree:
And its value gets evaluated:
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.
The Navigation bar gets rerendered in line 623:
The Navigation bar has its dedicated renderer NavigationBarRenderer which does the actual rendering work ( see my blog for detail about UI5 control render)
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.
要獲取更多Jerry的原創文章,請關注公眾號"汪子熙":
來自 “ ITPUB部落格 ” ,連結:http://blog.itpub.net/24475491/viewspace-2715433/,如需轉載,請註明出處,否則將追究法律責任。
相關文章
- Spring Cloud底層原理SpringCloud
- SAP Cloud for Customer Account和individual customer的區別Cloud
- SAP Cloud for Customer的Container應用設計原理CloudAI
- 深度剖析Spring Cloud底層原理SpringCloud
- Spring Cloud底層原理(核心元件)SpringCloud元件
- SAP Cloud for Customer的前世今生Cloud
- JUnit 註解@Rule的工作原理
- 如何把SAP Kyma和SAP Cloud for Customer連線起來Cloud
- SAP Cloud for Customer裡BusinessPartner, Customer和Employee這些BO的區別Cloud
- SAP Cloud for Customer和SAP Fiori系統裡的OData測試工具Cloud
- SAP Cloud for Customer Work Center(工作中心)的實現原始碼Cloud原始碼
- SAP Analytics Cloud和Cloud for Customer之間的Single Sign on配置Cloud
- SAP Cloud for Customer裡新的Lead UI對Mashup整合的支援原理CloudUI
- runtime的底層原理和使用
- SAP Cloud for Customer裡Sales Order和Sales Quote的建模方式Cloud
- 如何使用SAP Cloud for Customer裡的Data SourceCloud
- 機器學習在SAP Cloud for Customer中的應用機器學習Cloud
- SAP CRM和Cloud for Customer中的Event handler(事件處理器)Cloud事件
- SAP 電商雲 Spartacus UI 同 SAP Customer Data Cloud 的整合UICloud
- HashMap的底層原理HashMap
- flutter底層原理和embedder的隱憂Flutter
- KVO的使用和底層實現原理
- SAP Commerce Cloud 新一代 UI Spartacus 和 Customer Data cloud 的整合CloudUI
- SAP Cloud for Customer(C4C)和微信整合系列教程Cloud
- OC底層探索(十六) KVO底層原理
- SAP CRM,Cloud for Customer和Fiori應用的direct navigation比較CloudNavigation
- SAP Cloud for Customer的CTI呼叫中心解決方案Cloud
- SAP Cloud for Customer的Mashup位於CustomPane裡Cloud
- SAP Cloud for Customer ABSL的一些優化Cloud優化
- SAP Cloud for Customer框架是如何使用JavaScript Promise的Cloud框架JavaScriptPromise
- 使用soapUI消費SAP Cloud for Customer的web serviceUICloudWeb
- PHP 底層原理之類和物件PHP物件
- synchronized底層原理synchronized
- SAP CRM和Cloud for Customer裡的Formatted Text控制元件的比較CloudORM控制元件
- JavaScript 工作原理之十三-CSS 和 JS 動畫底層原理及如何優化其效能JavaScriptCSSJS動畫優化
- SAP Cloud for Customer的Account Team裡的role如何配置Cloud
- Netty的底層原理Netty
- Vue中的底層原理Vue