Skip to Content
Author's profile photo Jerry Wang

Smart field with value help

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

/wp-content/uploads/2016/03/clipboard1_908141.png

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

 

/wp-content/uploads/2016/03/clipboard2_908142.png

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.

/wp-content/uploads/2016/03/clipboard3_908143.png

All the source code of this example could be found from this link.

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.

/wp-content/uploads/2016/03/clipboard6_908144.png

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.

/wp-content/uploads/2016/03/clipboard7_908145.png

And the Target property is parsed in the runtime:

/wp-content/uploads/2016/03/clipboard8_908146.png

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.

/wp-content/uploads/2016/03/clipboard9_908147.png

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

/wp-content/uploads/2016/03/clipboard10_908148.png

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.

/wp-content/uploads/2016/03/clipboard11_908149.png

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.

/wp-content/uploads/2016/03/clipboard12_908150.png

The controls are created separately as shown below:

/wp-content/uploads/2016/03/clipboard13_908151.png

/wp-content/uploads/2016/03/clipboard14_908152.png

Go button implementation

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

/wp-content/uploads/2016/03/clipboard15_908153.png

The go button is implemented as instance of smartFilterBar created by ValueHelpProvider.

/wp-content/uploads/2016/03/clipboard16_908154.png

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:

/wp-content/uploads/2016/03/clipboard17_908155.png

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

/wp-content/uploads/2016/03/clipboard18_908156.png

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.

/wp-content/uploads/2016/03/clipboard19_908157.png

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.

/wp-content/uploads/2016/03/clipboard20_908158.png

 

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.

/wp-content/uploads/2016/03/clipboard21_908159.png

/wp-content/uploads/2016/03/clipboard22_908160.png

When the first entry in currency list table is selected:

/wp-content/uploads/2016/03/clipboard23_908161.png

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

/wp-content/uploads/2016/03/clipboard24_908162.png

The key is parsed:

/wp-content/uploads/2016/03/clipboard25_908163.png

An event is raised with this selected key & text:

/wp-content/uploads/2016/03/clipboard30_908164.png

Now we are back to ValueHelpDialog:

/wp-content/uploads/2016/03/clipboard31_908165.png

Fire an OK event with selected key & text:

/wp-content/uploads/2016/03/clipboard32_908166.png

/wp-content/uploads/2016/03/clipboard33_908167.png

/wp-content/uploads/2016/03/clipboard34_908168.png

Assigned Tags

      9 Comments
      You must be Logged on to comment or reply to a post.
      Author's profile photo Magina Zhang
      Magina Zhang

      nice blog and thanks for sharing.

      here is an issue for this topic:

      how can I set the pop-up window with data when initially load it (without click "GO" button).

      I notice when I use smart filter bar, there is a property "preventInitialDataFetchInValueHelpDialog", but is there any setting I can do in smart field?

      Author's profile photo Shambu Venugopal Sunitha
      Shambu Venugopal Sunitha

      This is for folks who came looking for a way to do this.(like me)

      This can be done using the aggregation Configuration for Smart Field

      "sap.ui.comp.smartfield.Configuration"

      You will need to assign the property "preventInitialDataFetchInValueHelpDialog" as false.

      var oConfiguration = new sap.ui.comp.smartfield.Configuration({
      preventInitialDataFetchInValueHelpDialog: false
      });

      Then use method setConfiguration to set the above aggregation for each Smart Field.

      Author's profile photo Toine Pothuizen
      Toine Pothuizen

      I'm struggeling to support a fixed value list in a dropdown smartfield, without a search dialog (popup).

      Basically it should be similar to the tutorial for the value help. However, in my case I need to expose the description in stead of the key. With currencies the key itself is readable/understandable. But sometimes the key is like 0001/0002 etc. So I really need to see the description, but use the key value for data processing.

      I would like to add the additional annotation via the model extension class (..MPC_EXT class in method DEFINE). In the frontend I have added smart:configuration to show both the description and id. But how to build the additional annotations in ABAP?

      Do I need parameters in case I don't want a search dialog?

      I tried it like this:

          super->define( ).

          model->get_entity_set( iv_entity_set_name = 'Products' )->create_annotation( /iwbep/if_mgw_med_odata_types=>gc_sap_namespace )->add(
            iv_key = 'semantics'
            iv_value = 'fixed-values' ).

          model->get_entity_type( iv_entity_name = 'Product' )->set_is_value_list( abap_true ).

          model->get_entity_type( iv_entity_name = 'Interaction'
            )->get_property( iv_property_name = 'ProductCode'
            )->set_value_list( iv_value_list_type = /iwbep/if_mgw_odata_property=>gcs_value_list_type_property-fixed_values ).

          DATA(lo_annotation) = vocab_anno_model->create_annotations_target( 'CRM_UTILITIES_UMC.Interaction/ProductCode'
            )->create_annotation( iv_term = 'com.sap.vocabularies.Common.v1.ValueListMapping' ).

          DATA(lo_record) = lo_annotation->create_record( ).
          lo_record->create_property( 'Label' )->create_simple_value( )->set_string( 'Product' ).
          lo_record->create_property( 'CollectionPath' )->create_simple_value( )->set_string( 'Products' ).
          data(lo_coll) = lo_record->create_property( 'Parameters' )->create_collection( ).
          lo_record = lo_coll->create_record( iv_record_type = 'com.sap.vocabularies.Common.v1.ValueListParameterOut' )      ##NO_TEXT.
          lo_record->create_property( 'LocalDataProperty' )->create_simple_value( )->set_property_path( 'ProductCode' ).
          lo_record->create_property( 'ValueListProperty' )->create_simple_value( )->set_string( 'ProductCode' ).

      Cloud you please advise?

      Thx, Toine

      Author's profile photo Phani Vasabattula
      Phani Vasabattula

      I am having the same issue. Can you please explain if this is resolved? Thanks..

      Author's profile photo Oliver Russinger
      Oliver Russinger

      Hello

      can anyone explain why the UI5 value list (bound to smartfield) does not show the default-parameter values, if they are set in the searchhelp.

      Example: SearchHelp DEBIS (has a default parameter VKO -> the salesorg) , this parameter is set in userdata (set/get parameter)

      when invoking searchhelp in ui5 this value is not shown on the screen, but on executing the search (without filling out the salesorg-field), this parameter is used for the selection.

      this is very confusion to the user as they do not fil out the salesorg field but the searchehlp-query uses his default parameter.

      comparing to sapgui or webdynpro: this default values are shown to the user in the help dialog.

      has anyone also that problem ? should we only use searchhelps without default parameters?

      kind regards

      oliver

      Author's profile photo Tanveer Shaikh
      Tanveer Shaikh

      Hi Jerry,

      Can we achieve this using local annotations in Webide annotation modeler with HANA xsodata as backend ?

      Thanks,

      Tanveer

      Author's profile photo Julian Paulina
      Julian Paulina

       

      Hi,

      I'm also looking for ways to do this.

      Did you had any progress?

       

      Thanks Julian

      Author's profile photo aevi rontos
      aevi rontos

      is it possible to implement smartFields without odata annotations?

      Author's profile photo Holger Schäfer
      Holger Schäfer

      Hi guys,
      the smart fields can completely be controlled by local annotations.

      We even use smart fields with an olingo java backend where no annotations are generated out-of-the-box.

       

      Regards Holger