SAP Cloud for Customer页面根据后台数据响应的刷新原理介绍

Recently I am working with partner and they are asking for the reason of one UI5 refresh behavior.

I simply display the BO ID, Description, Create Date and NodeID for demonstration purpose.

The event handler bound to the Click Me button:

Observed behavior

Suppose I have two Service Request BO instance in the system:

• ID 333 with creation date 26.02.2014
• ID 1071 with creation date 06.09.2017 By default BO detail data for ID 1071 is displayed:

After I type ID 333 in the input field and press button, the data for BO 333 is read from backend and displayed:

However, if I input an invalid id for example 333a, there is no refresh in UI. This behavior is complained by customer.

How C4C UI refreshes according to response from backend

Let’s first investigate on the first scenario – read against a valid BO id. For example currently BO ID 333 is displayed in UI, and we type ID 1071 and press Click Me button.

(1) Add sap-ui-debug=true in url to load the debug version of UI5 source code.

(2) Set breakpoint on file UpdateService.js, function _updateData. Type ID 1071 and click button, the BO data will be read from backend. Once response is available, this function will be called. From debugger we can find out that the BO detail data is already contained in the response.

And there is a for loop performed on this data structure, to write the latest data back to UI controller’s corresponding model node field. Below screenshot shows the model field ID in Root node will be merged with the latest data, 1071.

In function setRawValue in DataField.js, the new value is set only on the condition that it does not equal to the old value ( see the if evaluation in line 917 ).

Please notice that the assignment in line 922 will NOT lead to the UI refresh with new value 1071 displayed, because till now, only the latest value of DataField is changed, but the underlying DOM node which actually controls the html display remains unchanged.

The real UI refresh is triggered in file TextField.js, function setValue.

The underlying DOM element for BO ID input field is retrieved in line 635 and stored in variable oInput, so oInput.value contains the old value currently displayed in the UI.

If the latest value does not equal to the current value ( if evaluation in line 636 ), the new value will be filled to the DOM element in line 652.

Why UI does not refresh at all if an invalid BO ID is specified

Based on previous finding, the answer to this question could be easy.

When an invalid BO ID is used to perform read operation, in the response the fields used to bind to UI element do not exist at all.

Just compare it with the response for a normal case where a valid BO ID is used to read.

In this case, the corresponding setValue for each model field bound to UI element will NEVER have any chance to be executed, as they could NEVER be executed by the for loop in line 115 at all. As a result the UI remains unchanged as the state before Click Me button is clicked.