Linked selection fields via client-side scripting

I have a need for my users to choose one field from a dropdown in Opportunity, then have another field limited in choices based on the first selection. I thought I had found the perfect guide from Greytrix here - http://www.greytrix.com/blogs/sagecrm/2014/09/11/linked-selection-fields-through-client-side-scripting/

I followed it while substituting my own values. However, the sub selection is not being updated based on the first selection. My picture should help explain, but basically each of the Main selection (Markets) in have a code of A or B or C etc. Each of the Sub Selections (Product) has a code of A1 or A2 or B1 or B2 etc. I simply substituted my values, saved to the Custom Content in the Opportunity Detail Screen. But it still isn't working. Thoughts on this?

Thanks!

  • 0

    The script above is not a requirement for making this work....does anyone else have any ideas on how I can do a dependent dropdown? Thanks!

  • 0

    Derek

    There should be a few suggestions on dependent selection fields on the community.

    Your options include

    1) A pure client side approach using the onChange event on one field to redraw the options within the select in the other field.

    2) Use restricted Search Select Advanced fields. Where the options 'look up' to values that represent business objects in their own right then you can have the fields look up to tables to draw down the values.

    3) Use server side create scripts. This is appropriate where the values for the first field and the second field are entered on separate screens. The second list of options can either be changed by using the RemoveLookup() method or by swapping the Caption Family that is used.

  • 0

    There are two items associated with a SELECT object; value (the item that is submitted to the database) and text (displayed on screen). I think you are mixing these in your script. Try the following, which uses the value of the 'Markets' SELECT to filter the 'Products' SELECT by value.

    $(document).ready(function(){

    var options = $("#oppo_products").html();

    $("#oppo_markets").change(function(){

    $("#oppo_products").html(options);

    if (this.value.length){

    $('#oppo_products :not([value^="' + this.value + '"])').remove();

    if ($("#oppo_products").val() == $("#_HIDDENoppo_products").val()){

    $("#oppo_products").append("-None-");

    }else{

    $("#oppo_products").append("-None-");

    }

    }

    })

    $("#oppo_markets").trigger("change");

    })

    It is assumed that the 'Products' SELECT OPTION values are prefixed with the 'Markets' SELECT values, eg

    Code, Translation

    Markets:

    'Agri_', 'Agriculture'

    'EandU_', 'Energy and Utilities'

    'AirP_', 'Air Pollution and Control'

    'FandB_', 'Feed and Beverage'

    etc..

    Products:

    'Agri_Fertilizer', 'Fertilizer'

    'EandU_GasOil', 'Gas and Oil'

    'Agri_Herbicide', 'Herbicide'

    'AirP_AirScrubber', 'Air Scrubber'

    etc..

  • 0

    Paul - thanks so much for your response! Unfortunately, it is still not working. I deleted/re-added a few items to test but it is not filtering. It is almost like it is not attempting refresh the filter as normally you would see a split second of refresh on your screen, which I am not. I copied your script into the Custom Content section of the Opportunity Detail Screen.

    Do you have any other ideas on what I may be missing on this? Thanks again!

  • 0

    The script works fine here on my CRM7.3 test system. The only thing I can think of is your field names may be different to mine - I looked at your screen shot of your original script and I think it says 'oppo_product' whereas in my script I used 'oppo_products' (ie plural) - did you change the script to match your field names?

  • 0

    Great! - glad you got it working. Let me know if there is anything I can help with.

  • 0

    Good catch - I totally missed that! I updated your script with the proper field name and it is working great now. Thanks Paul, much appreciated!!

  • 0

    Sorry I'm kind of showing up late. I'm attempting to do the same thing, and I have a couple questions.

    In my case, I'm using State and City, and while we're not operating in all 50 states, each state has a lot of cities. My naming convention is like:

    Iowa, IA_

    Minnesota, MN_

    Illinois, IL_

    and then I have for cities I have

    Des Moines, IA_desmoines

    Ames, IA_ames

    Ackley, IA_ackley

    and then I plugged this code into the Custom Content (after another script runs):

    $(document).ready(function(){

    var options = $("#oppo_pre_city").html();

    $("#oppo_pre_state").change(function(){

    $("#oppo_pre_city").html(options);

    if (this.value.length){

    $('#oppo_pre_city :not([value^="' + this.value + '"])').remove();

    if ($("#oppo_pre_city").val() == $("#_HIDDENoppo_pre_city").val()){

    $("#oppo_pre_city").append("-None-");

    }else{

    $("#oppo_pre_city").append("-None-");

    }

    }

    })

    $("#oppo_pre_state").trigger("change");

    })

    So it's basically your script, just variable renames. It appears to work!

    However when I try to change the state selection, the cities don't update. For example, if I select Iowa, then the cities will update, but if I change the state to Minnesota, then the cities just go to -none-.

    Also, because of the sheer amount of cities, maybe I should be using two search select advanced fields instead of two selection fields?

  • 0

    You're nearly there ... there are two selection lists, sel1 and sel 2. When sel1 value is changed by the user, the options in sel2 must be updated to reflect the new value of sel1.

    In the script, lines 4-13 become the on-change function of sel1 and are executed each time the user changes the value in sel1 (ie chooses a different option from the selection list).

    The third line of the script:

    var options = $("#sel2").html();

    makes a copy of (ie saves) the option list of sel2.

    The fifth line, (which is part of the function that is assigned to the on-change script of sel1):

    $("#sel2").html(options);

    copies back (ie restores) the option list to sel2.

    and

    The seventh line:

    $('#sel2 :not([value^="' + this.value + '"])').remove();

    removes all options from sel2 that are not prefixed with the value of sel1.

    The selectors in lines three, five and seven must therefore be the same, and in your amended version of the script they reference different fields. If oppo_products doesn't exist in the screen, var options will be undefined. This undefined value will then be assigned to the option list of oppo_pre_city, which probably explains why you are seeing only '--none--'.

    Change line three to:

    var options = $("#oppo_pre_city").html();

  • 0

    Here is the suggestion to make a dropdown in sage CRM dvelopment

    //create an array that contains users display team.

    var strListTeams = CurrentUser.user_primarychannelid;

    var recUserDisplayTeams = CRM.FindRecord("channel_link","chli_user_id="+CurrentUser.user_userid);

    while (!recUserDisplayTeams.eof)

    {

    strListTeams += ","+recUserDisplayTeams.chli_channel_id;

    recUserDisplayTeams.NextRecord();

    }

    var arrayListDisplayTeams = strListTeams.split(",");

    //create an array that contains all teams

    var strAllTeams = "";

    var recAllTeams = CRM.FindRecord("channel","");

    while (!recAllTeams.eof)

    {

    strAllTeams += recAllTeams.chan_channelid+",";

    recAllTeams.NextRecord();

    }

    var arrayAllTeams = strAllTeams.split(",");

    //create an array that contains the teams not in the users display list

    var RemoveList = new Array();

    z= 0;

    for (x in arrayAllTeams)

    {

    if (!isThisTeamInDisplayList(arrayAllTeams[x],arrayListDisplayTeams))

    {

    RemoveList[z] = arrayAllTeams[x];

    }

    z++

    }

    function isThisTeamInDisplayList(teamtocheck, arrayofdisplayteams)

    {

    flag = false;

    for (count in arrayofdisplayteams)

    {

    if (teamtocheck == arrayofdisplayteams[count])

    {

    flag = true;

    break;

    }

    }

    return flag;

    }

    //update Team drop down.

    for (x in RemoveList)

    {

    RemoveLookUp(RemoveList[x])

    }

    DefaultValue=CurrentUser.user_primarychannelid;

    AllowBlank=false;

    AllowUnassigned=false;