CODEWITHSUNDEEP
javascriptxmlsapui5
21stking
21stking

Reputation: 1251

Convert xml ComboBox to javascript view

I am new to OpenUI5, i have a combobox created using XML view so now i need to create the same combobox but in a JavaScript View. My version is 1.58.2:

My xml combobox code is as follows and it works:

 <ComboBox 
     id="departmentsDropDown"
     selectionChange="handleSelectionChange"
     items="{ path: 'departments>/' }"
     placeholder="{i18n>departmentSelect}" >     
     <core:Item key="{departments>name}" text="{departments>org_unit}" />  
</ComboBox>

My JavaScript view code is as follows and it gives me an error:

var comboBox = new sap.m.ComboBox(this.createId("departmentsComboBox"),{            
            items : "{ path: 'departments>/' }",
            selectionChange : oController.handleSelectionChange
});

Error:

Missing template or factory function for aggregation items of Element sap.m.ComboBox#__jsview1--departmentsComboBox ! -

Upvotes: 0

Views: 453

Answers (1)

Jorg
Jorg

Reputation: 7250

On the javascript side, you need to provide information on what to do with the actual line inside the combobox, IE the template. In the XML it's provided; you're using core:Item for this. It is missing on the javascript side. Here's an example of how to add it:

new sap.m.ComboBox({
    selectedKey: '{model>/key}',
    showSecondaryValues: true,
    items: {
      path: '/Model',
      template: new sap.ui.core.ListItem({
        key: '{Key}',
        text: '{Key}',
        additionalText: '{Description}'
      })
    },
    change: _ => {
       //change logic
    }
  })

It's not exactly the same but you it shows how to add a template. You'll find you'll need the same kind of logic for any control with an aggregation like lists or tables. For more complex controls, you could use a fragment too.

Upvotes: 2

Related Questions