Multicombobox simple example sapui5

MultiBox in sapui5 simple Example


page.view.xml


xmlns:l="sap.ui.layout"

<content>
<l:VerticalLayout
class="sapUiContentPadding"
width="100%">
<MultiComboBox
selectionChange="handleSelectionChange"
selectionFinish="handleSelectionFinish"
width="500px"
items="{samplemodel>/data}" >
<core:Item key="{samplemodel>vendor}" text="{samplemodel>Plant}"></core:Item>
</MultiComboBox>
</l:VerticalLayout>
</content>



controller.js

sap.ui.define([
'sap/ui/model/json/JSONModel'
], function(jQuery, Controller, JSONModel) {
"use strict";

var PageController = Controller.extend("multicombobox.s1", {
onInit: function() {
var oModel1 = new sap.ui.model.json.JSONModel('model/sampledata.json');
    this.getView().setModel(oModel1,"samplemodel");

/*var oModel = new JSONModel(sap.ui.require.toUrl("model") + "/sampledata.json");
this.getView().setModel(oModel);*/
},


});


return PageController;

});

make one folder in webcomponent folder name with model. and make one file inside it name with sampledata.json

sampledata.json


{
"data" : [{ "vendor":"1",
"Plant" : "Kandivali"
},
{ "vendor":"2",
"Plant" : "Chakan"
},
{ "vendor":"3",
"Plant" : "Nashik"
},
{ "vendor":"4",
"Plant" : "Jalgaon"
},
{ "vendor":"5",
"Plant" : "Manmad"
},
{ "vendor":"6",
"Plant" : "Thane"
},
{ "vendor":"7",
"Plant" : "Mumbai"
},
{ "vendor":"8",
"Plant" : "Kharghar"
}
]
}




Post a Comment

Previous Post Next Post