Editor Select Field

andrew beever

I have a form with a select field.
The users accessing this form need to be presented with a subset of the possible options for this field dependent on their permissions.
I wondered if there was a smart way with Editor to create only a subset of options, or is the best way to remove the unwanted options after Editor has created the full list?

Thank you

rf1234

Either way works!

You can define options with subsets and assign them to the field or dynamically delete some. I guess the latter is a bit more work. I do it in a case when the options are fully dynamic. In your case that would mean the user rights change within one session which probably isn't your use case.

Here is an example where I assign different predefined options (global variables) depending on the respective financial instrument:

var element = this.field('fixed.element');
if (instrument === 'W') {  //deposit
    element.update(elementOptionsNoDerivativesDeposit, false);
} else if (instrument === 'Z') { //naked derivatives
    element.update([], false);
} else if (instrument === 'X') {  //guarantee
    element.update(elementOptionsNoDerivativesGuaranteesCreditors, false);
} else if (instrument === 'Y') {  //current account
    element.update(elementOptionsNoDerivativesLoan, false);
    element.update(elementOptionsNoDerivativesDeposit, true);
} else {
    element.update(elementOptionsNoDerivativesLoan, false);
}

andrew beever

Thank you so much for your response. Your assumption is correct the regarding the user rights not changing within the session. Your suggestion is a very elegant solution!

rf1234

Glad I could help! For the sake of completeness here is an example for the more complicated version of dynamic options:

In case you have interdependencies between fields and the options of field b and c need to be adjusted based on selections in field a (or field b with respect to field c) this is an example on how to handle that by changing the options fully dynamically. This solution may look a bit awkward: It avoids updating editor fields if the value hasn't changed because this may cause performance issues under certain circumstances. Hence I use global variables to save the options before they change to be able to compare them.

Since options are arrays of simple objects you need to make shallow copies using slice() for example.

var ploSavedLevel_1 = planningLevelOptions.slice(); //shallow copy of array of objects
var ploSavedLevel_2 = planningLevelOptions.slice();

editor
    .dependent(['planning_level_1', 'planning_level_2'], function (val, data, callback) {    
        //make sure we do as few field settings as possible due to Editor issue
        //when too many field updates!
        var eraseHidePl_2 = true;
        var eraseHidePl_3 = true;
        var classPlFields = false;
        
        if ( this.val('planning_level_1') > 0 ) {
            eraseHidePl_2 = false;
            classPlFields = true;
            var plo = planningLevelOptions.slice(); //shallow copy of array of objects
            var i;
            for (i=0; i < plo.length; i++) {
                if ( plo[i].value === this.val('planning_level_1') ) {
                    plo.splice(i, 1);
                    break;
                }
            }
            if ( plo != ploSavedLevel_1 ) {
                this.field('planning_level_2').update(plo);
                ploSavedLevel_1 = plo.slice();
            }
            this.show(['planning_level_2']);
            if ( this.val('planning_level_2') > 0 ) {
                eraseHidePl_3 = false;
                for (i=0; i < plo.length; i++) {
                    if ( plo[i].value === this.val('planning_level_2') ) {
                        plo.splice(i, 1);
                        break;
                    }
                }
                if ( plo != ploSavedLevel_2 ) {
                    this.field('planning_level_3').update(plo);
                    ploSavedLevel_2 = plo.slice();
                }
                this.show(['planning_level_3']);  
            }
        }
        if ( classPlFields ) {
            $('.pl-fields').addClass("bg-info");
        } else {
            $('.pl-fields').removeClass("bg-info");
        }        
        //avoid too many field updates due to Editor bug
        if ( eraseHidePl_2 ) {
            if (this.val('planning_level_2') != 0) {
                this.set({'planning_level_2': 0});
            }
            this.hide(['planning_level_2']);   
        }
        if ( eraseHidePl_3 ) {
            if (this.val('planning_level_3') != 0) {
                this.set({'planning_level_3': 0});
            }
            this.hide(['planning_level_3']);   
        }
    });

andrew beever

Wow, thank you once again!