Skip to Content

[UI5]How can I do data binding with dynamic path?

Hi experts. I have two sap.m.Input boxes, one is for Country and the other is for Region. The Region input box has the property suggestionItems which is binded to a model of region list. Actually we have differerent region lists for different countries. So we hope to have behavior that when user change the value in the Country input, the suggestionItems in Region input is also changed. For example:

1. User change country to "US", the suggestionItems of Region input becomes suggestionItems="{path: 'regionModel>/regionList/US'}"

2. User change country to "DE", the suggestionItems of Region input becomes suggestionItems="{path: 'regionModel>/regionList/DE'}"

I know I could achieve this by editing the binding information in the onChange function of the Country input. But I wish to have a automatic and dynamic data binding in my .view.xml file. Is it possible?

I tried the expression binding but seem it doen't work.

suggestionItems="{path: = 'regionModel>/regionList/' + ${country}}, sorter: {path: 'description/val', descending: false}}"

Do you have any ideas? Thank you in advanced!

Add comment
10|10000 characters needed characters exceeded

  • Get RSS Feed

3 Answers

  • Best Answer
    Nov 30, 2017 at 06:56 PM

    Hi,

    As far as I know dynamic path binding is not possible in XML(as this is static). Use Javascript to bind the dynamic path.

    Another alternative I can think of is filters....why not apply filters to suggested item on 'Region' when 'Country' is selected?

    Add comment
    10|10000 characters needed characters exceeded

  • Dec 02, 2017 at 11:32 AM

    Hi,

    In odata create one filter parameter to input the country and onChange event apply the filter to region input field. When filter is applied it will make the backend call based on filter property and binding will be refreshed.

    Add comment
    10|10000 characters needed characters exceeded

  • Dec 04, 2017 at 06:16 AM

    Hi Cong Wang,

    For your country input box, implement the foll. code :

    <Input liveChange="onChange"/>

    In your controller, get the value entered by the user first and then filter the model :

    function onChange(evt){
     var country = evt.getSource().getValue();
     //Now get your model instance and filter it with the country, in the 
     //success function, get the list of regions and set it to an global JSON model(either view or core)
     your_model_instance.read("/entitySet?$filter=region eq 'country' ",null,null,true,function(data){
      global_JSON_Region.setData(data);
    });
    }

    Now in your region input box, implement the foll. code:

    <Input
    				id="regionInput"
    				type="Text"
    				showSuggestion="true"
    				showValueHelp="true"
    				suggestionItems="{/Your_Region_Entity_Set}" >
    				<suggestionItems>
    					<core:Item text="{Region_Name_Field}" />
    				</suggestionItems>
    			</Input>
    

    Hope this helps,

    Regards,

    Arjun Biswas

    Add comment
    10|10000 characters needed characters exceeded