CODEWITHSUNDEEP
sapui5
THI
THI

Reputation: 365

SelectedItem BindingContext not found UI5 application

I am trying to find the binding context of the selectedItem. Even after passing modelName to bindingContext, I get undefined. When I do oEvent.getSourcer() and see the oBindingContexts it is blank. Also the oBindingInfos has ocontext undefined. Though it has sPath. The correct sPath. How can I get the array index in this scenario?

oNewField = new sap.m.Select({
    enabled: "{order>/" + Type+ "/" + i + "/fieldEnabled}",
    forceSelection: false,
    width: "90%",
    // Add dropdoen Items
    items: [
        new sap.ui.core.ListItem({
            key: " ",
            text: " "
        }),
        new sap.ui.core.ListItem({
            key: "{order>/" + Type+ "/" + i + "/DefaultValue}",
            text: "{order>/" + Type+ "/" + i + "/DefaultValue}"
        })
    ],
    change : function(evt) {
        that.onChange(evt); 
    },
});

var selectedKey = this.getView().getModel('order').getProperty(
  "/" + Type+ "/" + i + "/DefaultValue");
oNewField.setSelectedKey(selectedKey);

**On Change Function **

onChange: function(oEvent) {
    debugger;
    var key = oEvent.getSource().getSelectedItem().getKey();
    //need to get BindingContext here.
    var oContext = 
    oEvent.getSource().getSelectedItem().getBindingContext('order')
    //gives undefined
},

Upvotes: 0

Views: 1670

Answers (2)

Rafael López Martínez
Rafael López Martínez

Reputation: 2265

You are not doing any aggregation binding at all. Therefore there is no context to retrieve. You are hardcoding 2 items in your items aggregation.

Check this snippet. It shows you multinple things you can do. I hope onw of them is what your are looking for.

JSBIN: https://jsbin.com/kumudufaje/edit?html,output

<!DOCTYPE html>
<html>
	<head>
		<meta http-equiv='X-UA-Compatible' content='IE=edge'>
		<meta charset="utf-8">

		<title>MVC with XmlView</title>

		<!-- Load UI5, select "blue crystal" theme and the "sap.m" control library -->
		<script id='sap-ui-bootstrap'
			src='https://sapui5.hana.ondemand.com/resources/sap-ui-core.js'
			data-sap-ui-theme='sap_belize_plus'
			data-sap-ui-libs='sap.m'
			data-sap-ui-xx-bindingSyntax='complex'></script>


		<!-- DEFINE RE-USE COMPONENTS - NORMALLY DONE IN SEPARATE FILES -->

		<!-- define a new (simple) View type as an XmlView
		 - using data binding for the Button text
		 - binding a controller method to the Button's "press" event
		 - also mixing in some plain HTML
		 note: typically this would be a standalone file -->

		<script id="view1" type="sapui5/xmlview">
		<mvc:View xmlns="sap.m" xmlns:mvc="sap.ui.core.mvc" controllerName="my.own.controller">
			<Panel id="myPanel">
			</Panel>
		</mvc:View> 
        </script>


		<script>
			// define a new (simple) Controller type
			sap.ui.controller("my.own.controller", {
                onInit: function(oEvent){
                  
                  //aggregation binding
                  var oSelect = new sap.m.Select({
                    items: {
                      path: 'order>/options',
                      template: new sap.ui.core.Item({
                        key: {
                          path: 'order>key'
                        },
                        text: {
                          path: 'order>value'
                        }
                      })
                    },
                    change: this.onSelection1Change.bind(this)
                  });
                  
                  this.getView().byId("myPanel").addContent(oSelect);
                  
                  
                  for(var i=0; i<3; i++){
                    //hardcoded items
                    var oSelect2 = new sap.m.Select({
                      items: [
                        new sap.ui.core.ListItem({
                          key: '',
                          text: ''
                        }),
                        new sap.ui.core.ListItem({
                          key: {path:'order>/Type/' + i + '/DefaultValue'},
                          text: {path:'order>/Type/' + i + '/DefaultValue'}
                        }),
                      ],
                      change: this.onSelection2Change.bind(this)
                    });
                    
                    this.getView().byId("myPanel").addContent(oSelect2);
                  }
                },
              
                onSelection1Change(oEvent){
                  var oContext = oEvent.getSource().getSelectedItem().getBindingContext('order')
                  console.log(oContext); //This prints the binded context
                  
                  var oModel = oContext.getModel();
                  console.log(oModel); //This prints the whole model
                  
                  var oSelectedEntry = oModel.getProperty(oContext.getPath());
                  console.log(oSelectedEntry); //This prints the data
                },
              
                onSelection2Change(oEvent){
                  var sKey = oEvent.getSource().getSelectedItem().getKey();
                  console.log(sKey); //This prints the selected item key
                  
                  var sValue = oEvent.getSource().getSelectedItem().getKey();
                  console.log(sValue); //This prints the selected item value
                  
                  var oKeyBinding = oEvent.getSource().getSelectedItem().getBinding('key')
                  console.log(oKeyBinding); //This prints the binding of the key property, if any
                  
                  if(oKeyBinding){
                    var oModel = oKeyBinding.getModel();
                    console.log(oModel); // This prints the model binded key property, if any
                  }
                }
			});
	
	
	
			/*** THIS IS THE "APPLICATION" CODE ***/
			// create some dummy JSON data
			var data = {
				options: [{
                  key: '1',
                  value: 'option 1'
                },{
                  key: '2',
                  value: 'option 2'
                },{
                  key: '3',
                  value: 'option 3'
                }],
              
                Type:[
                  {DefaultValue: 'Default Value1'},
                  {DefaultValue: 'Default Value2'},
                  {DefaultValue: 'Default Value3'}
                ]
			};
			var oJSONModel = new sap.ui.model.json.JSONModel();
			oJSONModel.setData(data);
			
			// instantiate the View
			var myView = sap.ui.xmlview({viewContent:jQuery('#view1').html()}); // accessing the HTML inside the script tag above
          
			myView.setModel(oJSONModel, "order");
			// put the View onto the screen
			myView.placeAt('content');
		</script>
	
	</head>
	<body id='content' class='sapUiBody'>
	</body>
</html>

Upvotes: 2

Florian
Florian

Reputation: 5091

oEvent.getSource().getSelectedItem().getBindingContext()

You've got it completely right. Note that oEvent.getSource() points to the sap.m.Select. You need another getSelectedItem() to go to the selected sap.ui.core.Item.

Upvotes: 0

Related Questions