[Question] How to set options of 'SELECT' Traits type dynamically when its previous traits value is set?

Hello @artf again…!! I’m working with your million dollar tool since last few weeks as I’m working on a project where this 'Drag ‘n Drop’ tool is very useful.

I’m frequently having many questions about ‘How to’ type!

Once again I’m having a question for now.

I have use component to create a dynamic block which get values of API URL, with authentications and receives product data from it. This data have many different product categories. So, after receiving data(check code below), I have to populate a new trait with type ‘select’ which will list all those categories.

So the question is how to set options list in ‘select’ trait dynamically after API call?

My code structure is like this:

comps.addType('productList', {
	model: defaultModel.extend({
      init() {
        this.listenTo(this, 'change:apiurl change:items change:callApi', this.doStuff);
      },
      doStuff() {
      	// All stuff of API calls
      	// Will receive data of categories in array[{ value:'val1',name:'name1' }, ....];
      	// Will set HTML in the editor using editor.setComponents(<html-data></html-data>);

      	How to set categories TRAITS now? I tried:
      	MyDynamicDataArrayGoesHere = array[{ value:'val1',name:'name1' }, ....];
      },
      defaults: Object.assign({}, defaultModel.prototype.defaults, {
        editable: true,
        droppable: true,
        traits: [
          {
            label: 'API URL',
            name: 'apiurl',
            options: [
              {value: 'text', name: 'Text'}
            ]
          },
          {
            label: 'Username',
            name: 'username',
            type: 'text',
            changeProp: 1
          },
          {
            label: 'Password',
            name: 'password',
            type: 'password',
            changeProp: 1
          },
          {
            label: 'Items',
            name: 'items',
            type: 'text',
            changeProp: 1
          },
          {
          	label: 'Categories',
          	name: 'cats',
          	type: 'select',
          	options: MyDynamicDataArrayGoesHere			// Tried this but didn't worked!
          	changeProp: 1
          }
        ],
    }),

},
{
  isComponent: function(el) {
    if(el.tagName == 'PRODUCTLIST'){
      return {type: 'productList'};
    }
  },
}),

view: defaultType.view,
});

I already tried custom traits, but in that I’ll first have to call API and get the category list, which is called in doStuff(). So how to set select traits option in doStuff()…??? Thanks a lot 😇

[blairpanek]

editor.TraitManager.getTraitsViewer().render(); this is what you are looking for… @HarshOB @cmcintosh

[artf]

You should get the trait from the model and then update its options:

doStuff(){
  var categsTrait = this.get('traits').where({name: 'cats'})[0];
  categsTrait.set('options', [{ value:'val1',name:'name1' }, ....])
}