CODEWITHSUNDEEP
javascriptajaxsapui5
Chan Yoong Hon
Chan Yoong Hon

Reputation: 1812

SAPUI5 Create ComboBox dynamically in controller

Currently I am developing of SAPUI5 application, in my page. I have to create ComboBox dynamically based on data from microservices.

i follow sample code from following url. view-source:https://sapui5.hana.ondemand.com/test-resources/sap/m/ComboBox.html

However, it return me empty in my combobox

The following is my sample code.

$.ajax({
                    url: "json/customers.json", 
                    dataType: 'json',
                    success: function(response){
                        var data= response; 
                        console.log(data);
                        var customerModel = new JSONModel(data);
                        console.log(customerModel);
                        oController.getView().setModel(customerModel, "customerJSON");
                        var ExtensionForm = oController.getView().byId("Extension_Form");

                                ExtensionForm.addContent(new sap.m.ComboBox(oController.getView().createId(“ExtensionLabelId”), {
                                    items: {
                                        path: "{ComboBoxModel>/}",
                                        template: new sap.ui.core.Item({
                                            key: "{ComboBoxModel>CUSTOMER_NAME}",
                                            text: "{ComboBoxModel>CUSTOMER_NAME}"
                                        })
                                    },
                                    value : "{model2>/"+ keys[i] + "/fieldvalue}",
                                    enabled: false
                                }));
                    },
                    error: function(error)
                    {
                        console.log("Error Message : " + JSON.stringify(error));
                    }
                });

Upvotes: 5

Views: 7662

Answers (1)

Chan Yoong Hon
Chan Yoong Hon

Reputation: 1812

I solve it already. I just remove the curly brackets {} in path and now works perfectly for me.

The following is my code

$.ajax({
                    url: "json/customers.json", 
                    dataType: 'json',
                    success: function(response){
                        var data= response; 
                        console.log(data);
                        var customerModel = new JSONModel(data);
                        console.log(customerModel);
                        oController.getView().setModel(customerModel, "customerJSON");
                        var ExtensionForm = oController.getView().byId("Extension_Form");

                                ExtensionForm.addContent(new sap.m.ComboBox(oController.getView().createId(“ExtensionLabelId”), {
                                    items: {
                                        path: "ComboBoxModel>/",
                                        template: new sap.ui.core.Item({
                                            key: "{ComboBoxModel>CUSTOMER_NAME}",
                                            text: "{ComboBoxModel>CUSTOMER_NAME}"
                                        })
                                    },
                                    value : "{model2>/"+ keys[i] + "/fieldvalue}",
                                    enabled: false
                                }));
                    },
                    error: function(error)
                    {
                        console.log("Error Message : " + JSON.stringify(error));
                    }
                });

Upvotes: 4

Related Questions