SugarCRM 7  How can I re-render a multi enum?

I want to change the dropdown options on a multi-enum (descriptors) based on another dropdown (product).

Dependencies and visibility grids don't help here because they don't work on multienum (as far as I know).

I have gotten as far as changing the options property on the filed but it won't render the new list on change.


 
   extendsFrom: 'RecordView',     initialize: function(options){
      this._super('initialize', [options]);
      this.model.on('change:case_product_c', this.toggleDescriptors, this);
   },
   render: function()
   {
      this._super('render');
   },
   toggleDescriptors : function(){
     var case_descriptor_c = this.model.fields['case_descriptor_c'],
     descriptor_dropdown = 'case_'+this.model.get('case_product_c').replace(' ','_') +'_descriptor_dd';
     case_descriptor_c.options = descriptor_dropdown;
     console.log(case_descriptor_c);
   },
                         
The above code works to set the dropdown correctly when the page first loads (the dropdpwn contains the right items based on the selected product of the record being loaded), but when I change the product it changes the case_descriptor_c.options (I have verified this in the log) but not the actual values displayed (when I click in the box I get the old list again)...

I believe I have to render the field again, but I don't know how...
Any hints?

thanks,
FrancescaS
Parents
  • Hi FrancescaS,

    I don't know if this is the best solution but when i try and create dynamic dropdown option based on other fields in the view i would do something like this
    ({
    extendsFrom:'RecordView',
    originalDDOption: null,
    initialize: function(opts){
        this._super('initialize',[opts];
        this._setDDOption();
    },
    _setDDOption(){
      var newDDOption = null
       if(!this.originalDDOption){
         newDDOption = this.originalDDOption = _.clone(app.metadata._dev_data.app_list_strings['(list_dom_here)']);
      } else {
         newDDOption = _.clone(this.originalDDOption);
      } 
      //process your dropdown option list here
      app.metadata._dev_data.app_list_strings['(list_dom_here)'] = newDDOption;
      //i always keep a copy of my original dropdown option so that i could revert the option if needed
    }
    })
    Hope this helped in some ways
  • i have this customization before that there are two dropdown fields and when a value from one dropdown field is changes the display on the other is changed as well, the second dropdown field values are dynamic (these are either a list of account, contact or lead fields) so what i did was something like this

    ({
    extendsFrom: 'EnumField',
    initialize: function(opts){
      this._super('initialize',[opts]);
      this._initEvents();
    }
    _initEvents: function(){
        this._moduleDropdownFieldChange();
        this._fieldDropdownFieldChange();
    }
    //this is the control dropdown where values are Accounts,Contacts,Leads
    _moduleDropdownFieldChange: function() {
       if(this.name == 'templatemodule;){
          this.on('render', this.triggerTemplateFieldChange, this);
          this.model.on('change:'+ this.name, this.triggerTemplateFieldChange,this);
       }
    }
    //child dropdown with dynamic values
    _fieldDropdownFieldChange: function(){
       if(this.name  == 'fieldlist'){
             this.model.on('parent:module:change', function(){
               this.items = {};
               this._render();
             }, this);
       }
    }
    triggerTemplateFieldChange: function(){
       var ddOptions = {'':''}
        //do process here to construct the dropdown options
        app.metadata._dev_data.app_list_strings['fieldlist_list'] = ddOptions
        this.model.trigger('parent:module:change');
    }
    })
    So what this does is when the parent field in this case the templatemodule dropdown field changes we call the triggerTemplateFieldChange which constructs the dropdown option then we trigger a custom event on parent:module:change which in turn sets the value of the child dropdown to empty then re-render it to apply the new dropdown option 
    Hope this helps


Reply
  • i have this customization before that there are two dropdown fields and when a value from one dropdown field is changes the display on the other is changed as well, the second dropdown field values are dynamic (these are either a list of account, contact or lead fields) so what i did was something like this

    ({
    extendsFrom: 'EnumField',
    initialize: function(opts){
      this._super('initialize',[opts]);
      this._initEvents();
    }
    _initEvents: function(){
        this._moduleDropdownFieldChange();
        this._fieldDropdownFieldChange();
    }
    //this is the control dropdown where values are Accounts,Contacts,Leads
    _moduleDropdownFieldChange: function() {
       if(this.name == 'templatemodule;){
          this.on('render', this.triggerTemplateFieldChange, this);
          this.model.on('change:'+ this.name, this.triggerTemplateFieldChange,this);
       }
    }
    //child dropdown with dynamic values
    _fieldDropdownFieldChange: function(){
       if(this.name  == 'fieldlist'){
             this.model.on('parent:module:change', function(){
               this.items = {};
               this._render();
             }, this);
       }
    }
    triggerTemplateFieldChange: function(){
       var ddOptions = {'':''}
        //do process here to construct the dropdown options
        app.metadata._dev_data.app_list_strings['fieldlist_list'] = ddOptions
        this.model.trigger('parent:module:change');
    }
    })
    So what this does is when the parent field in this case the templatemodule dropdown field changes we call the triggerTemplateFieldChange which constructs the dropdown option then we trigger a custom event on parent:module:change which in turn sets the value of the child dropdown to empty then re-render it to apply the new dropdown option 
    Hope this helps


Children
No Data