Smart field with value help
- How could Framework know the currency field should be rendered as F4 value help?
- Implementation of F4 value help click
- Go button implementation
- Part1 – Currency example – how Smart field works
- Part2 – this blog
- Part3 – Smart Field with Smart Link
- Part4 – How SmartTable works
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.
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.
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 by ValueHelpProvider.
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:
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?
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.
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
I am having the same issue. Can you please explain if this is resolved? Thanks..
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
Hi Jerry,
Can we achieve this using local annotations in Webide annotation modeler with HANA xsodata as backend ?
Thanks,
Tanveer
Hi,
I'm also looking for ways to do this.
Did you had any progress?
Thanks Julian
is it possible to implement smartFields without odata annotations?
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