Details about this thread
  • State Verified Answer
  • Replies 12 replies
  • Subscribers 295 subscribers
  • Views 2977 views
  • Users 0 members are here
Related content from around SugarClub

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

Francesca Shiekh
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
  • 0
    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
  • 0 in reply to EvilPeri EvilPeri
    Solved in 7.6

           

    // When the product changes, change the options available in the multienum for case descriptors

    // Note that we have one dropdown per product defied in the language file

    // the format of the dropdown name is case_<product>_descriptor_dd


    ({

      extendsFrom: 'EnumField',

      initialize: function(opts){

        this._super('initialize',[opts]);

        if (this.view.action !== 'filter-rows'){

          this._initEvents();

        }

      },

      _initEvents: function(){

          this._productDropdownFieldChange();

          this._descriptorDropdownFieldChange();

      },

      //define the on.change and render events for the case product

      _productDropdownFieldChange: function() {

         if(this.name == 'case_product_c'){

            //trigger changing descriptor dropdown when product is loaded

            this.on('render', this.triggerDescriptorFieldChange, this);

            //trigger changing descriptor dropdown when product changes 

            this.model.on('change:'+ this.name, this.triggerDescriptorFieldChange,this);

         }

      },

      //define the on.change event for the case descriptor so we hsve a way to call it

      _descriptorDropdownFieldChange: function(){

         if(this.name  == 'case_descriptor_c'){

           this.model.on('parent:module:change', function(product_descriptor_dd){

             //check if the descriptor exists/has values

             //if so, load the values and re-render

             ddOptions = app.lang.getAppListStrings(product_descriptor_dd);

             if(!(_.isUndefined(ddOptions)) && !(_.isEmpty(ddOptions))){

                $('span[data-fieldname="case_descriptor_c"]').show();

                $('.record-label[data-name="case_descriptor_c"]').show();

               this.def.options =ddOptions;

               this.items={};

               this._render();

             //if there are no valid items in the list or the list is empty then

             //hide the field

             }else{

               $('span[data-fieldname="case_descriptor_c"]').hide();

               $('.record-label[data-name="case_descriptor_c"]').hide();

             }

           }, this);

         }

      },

      triggerDescriptorFieldChange: function(){

        //check if the descriptor is on the form.

        if(typeof(this.model.get('case_descriptor_c') !== 'undefined')){

          var product_descriptor_dd = '';

          if(typeof(this.model.get('case_product_c')!== 'undefined') && this.model.get('case_product_c') !== null){

            //the name of the DD is case_<productName>_descriptor_dd

            var product = this.model.get('case_product_c').replace(/\s+/g, "_");

            product_descriptor_dd = 'case_'+product+'_descriptor_dd';

          }

          //set options to the product specific dropdown

          this.model.trigger('parent:module:change',[product_descriptor_dd]);

        }

      },

    })


    Set the options and clear the items, this forces a reload from the new options list.

    hth 

    FrancescaS

Reply
  • 0 in reply to EvilPeri EvilPeri
    Solved in 7.6

           

    // When the product changes, change the options available in the multienum for case descriptors

    // Note that we have one dropdown per product defied in the language file

    // the format of the dropdown name is case_<product>_descriptor_dd


    ({

      extendsFrom: 'EnumField',

      initialize: function(opts){

        this._super('initialize',[opts]);

        if (this.view.action !== 'filter-rows'){

          this._initEvents();

        }

      },

      _initEvents: function(){

          this._productDropdownFieldChange();

          this._descriptorDropdownFieldChange();

      },

      //define the on.change and render events for the case product

      _productDropdownFieldChange: function() {

         if(this.name == 'case_product_c'){

            //trigger changing descriptor dropdown when product is loaded

            this.on('render', this.triggerDescriptorFieldChange, this);

            //trigger changing descriptor dropdown when product changes 

            this.model.on('change:'+ this.name, this.triggerDescriptorFieldChange,this);

         }

      },

      //define the on.change event for the case descriptor so we hsve a way to call it

      _descriptorDropdownFieldChange: function(){

         if(this.name  == 'case_descriptor_c'){

           this.model.on('parent:module:change', function(product_descriptor_dd){

             //check if the descriptor exists/has values

             //if so, load the values and re-render

             ddOptions = app.lang.getAppListStrings(product_descriptor_dd);

             if(!(_.isUndefined(ddOptions)) && !(_.isEmpty(ddOptions))){

                $('span[data-fieldname="case_descriptor_c"]').show();

                $('.record-label[data-name="case_descriptor_c"]').show();

               this.def.options =ddOptions;

               this.items={};

               this._render();

             //if there are no valid items in the list or the list is empty then

             //hide the field

             }else{

               $('span[data-fieldname="case_descriptor_c"]').hide();

               $('.record-label[data-name="case_descriptor_c"]').hide();

             }

           }, this);

         }

      },

      triggerDescriptorFieldChange: function(){

        //check if the descriptor is on the form.

        if(typeof(this.model.get('case_descriptor_c') !== 'undefined')){

          var product_descriptor_dd = '';

          if(typeof(this.model.get('case_product_c')!== 'undefined') && this.model.get('case_product_c') !== null){

            //the name of the DD is case_<productName>_descriptor_dd

            var product = this.model.get('case_product_c').replace(/\s+/g, "_");

            product_descriptor_dd = 'case_'+product+'_descriptor_dd';

          }

          //set options to the product specific dropdown

          this.model.trigger('parent:module:change',[product_descriptor_dd]);

        }

      },

    })


    Set the options and clear the items, this forces a reload from the new options list.

    hth 

    FrancescaS

Children
No Data