SAP Fiori Elements原理介绍之类型为Value Help的Smart Field工作原理

In previous blog Currency example – how Smart field works, one simple smart field is introduced:

In this blog, let’s go further to study how the value help of currency field is implemented by framework:

Once we open F4 value help of currency field, we could see a new popup. both the value help on currency field itself and this popup dialog are implemented by UI5 framework, there is no application coding at all. The source code of xml view and controller remain unchanged compared with previous example – but indeed the UI element, the currency field, behaves differently – this is actually the meaning of “smart” – the behavior of UI element depends on the annotation defined in OData model metadata.

How could Framework know the currency field should be rendered as F4 value help?

We set breakpoint on this line which is already discussed in previous blog.

For the logic how the variable oMetaData.annotations.uom is parsed from metadata.xml, please refer to previous blog. In OData Metadata, we use the following annotation to tell Framework that the UI element which is bound to “CurrencyCode” field in the model must be rendered as value list.

And the Target property is parsed in the runtime:

The calculated annotation from line 495 above is used to enable the original currency field with value help in line 1694 below by control Factory.

In the function addValueHelp, two new object instances ValueHelpProvider and ValueListProvider are created. They will be used later when F4 is pressed.

Finally, in the rendering process, since now the currency field has value help assigned, the corresponding UI5 icon is rendered by InputRender so that end user can easily identify the field has value help supported.

Implementation of F4 value help click

We have just now mentioned ValueHelpProvider. When F4 is pressed, it will react the press event and create an instance of ValueHelpDialog, which is a composite control acting as a container for all UI elements you could see in the popup dialog.

The controls are created separately as shown below:

Go button implementation

By default after you click F4 value help, the table is empty unless you click “Go” button.

The go button is implemented as instance of smartFilterBar created byValueHelpProvider.

The event handler of search is defined in line 317, the function _onFilterBarSearchPressed. In this event handler, it will delegate to _rebindTable.

ValueHelpProvider.prototype._onFilterBarSearchPressed = function() {
  this._rebindTable();
};

_rebindTable will fire a request to backend to ask for data for currency value list:

Once the response is available ( from mock data Currency.json in project ), the table is updated with data binding:

How the item selected from popup dialog could pass back to application

In the metadata, we have defined via annotation that the “Price” field has “CurrencyCode” field as its unit code.

Here below is the type definition for CurrencyCode, one property CURR for currency code and DESCR for currency description.

<EntityType Name="Currency">
    <Key>
     <PropertyRef Name="CURR" />
    </Key>
    <Property Name="CURR" Type="Edm.String" MaxLength="4"
     sap:display-format="UpperCase" sap:text="DESCR" sap:label="Currency Code"
     sap:filterable="false" />
    <Property Name="DESCR" Type="Edm.String" MaxLength="25"
     sap:label="Description" />
   </EntityType>

It is this annotation which tells UI framework that once end user selects one currency from popup dialog, the value of field “CURR” in popup dialog must be passed back to field “CurrencyCode” in application.

How is this annotation parsed in the runtime? They are separately parsed in function addValueHelp we discussed previously and assigned to variable sValueListProprty and sLocalDataProperty.

When the first entry in currency list table is selected:

This selected state is passed into event handler via variable oControlEvent:

The key is parsed:

An event is raised with this selected key & text:

Now we are back to ValueHelpDialog:

Fire an OK event with selected key & text: