Quantcast
Channel: Microsoft Dynamics CRM Forum - Recent Threads
Viewing all articles
Browse latest Browse all 82002

Using Javascript to handle hide/show actions on form sections using a Multi Option Select Trigger field

$
0
0

Hey Everyone, 

I am working on a requirement to hide/show specific sections under a tab on the Case form in Customer Service. Client wants a mutli-select option set field so they can pick multiple relevant values. Each value will have a corresponding section which has fields to collect additional information. Client wants to be able to select value(s) from the mutli-select option set field and based on the values they pick, the corresponding sections will display. If they clear one or more values from the mutli select field they want those sections to be hidden and the fields in those sections to be cleared. 

I am not a developer but I am learning JS and I wanted to try to satisfy this requirement using JS code. I have a function written which can display a section when the mutli select value is picked, but I am unable to properly hide that section and clear its fields when the value in the multi select is removed. I have inserted the code below: 

Client.Case.displaySections = function (context) { 

    debugger;

    var formContext = context.getFormContext();
    var items = formContext.getAttribute("my_fielditems").getValue(); //Return array of selected multi select option set values

    
    //Clear sections and fields when the record
    formContext.ui.tabs.get("tab1").sections.get("section1").setVisible(false);
    formContext.ui.tabs.get("tab1").sections.get("section2").setVisible(false);
    formContext.ui.tabs.get("tab1").sections.get("section3").setVisible(false);
    formContext.ui.tabs.get("tab1").sections.get("section4").setVisible(false);
    formContext.ui.tabs.get("tab1").sections.get("section5").setVisible(false);
    formContext.ui.tabs.get("tab1").sections.get("section6").setVisible(false);
    formContext.ui.tabs.get("tab1").sections.get("section7").setVisible(false);
    formContext.ui.tabs.get("tab1").sections.get("section8").setVisible(false);
    formContext.ui.tabs.get("tab1").sections.get("section9").setVisible(false);
    formContext.ui.tabs.get("tab1").sections.get("section10").setVisible(false);
    formContext.ui.tabs.get("tab1").sections.get("section11").setVisible(false);


    if (items != null) {

        var i; //Counter variable

        for (i = 0; i < item.length; i++) { //Loop through each item in the array and hide and show sections based on the selected items
            var currentItem = item[i];

            switch (currentItem) {

                case 953820000: //section1
                    formContext.ui.tabs.get("tab1").sections.get("section1").setVisible(true);
                    break;
                case 953820001: //section2
                    formContext.ui.tabs.get("tab1").sections.get("section2").setVisible(true);
                    break;
                case 953820002: //section3
                    formContext.ui.tabs.get("tab1").sections.get("section3").setVisible(true);
                    break;
                case 953820003: //Section 4
                    formContext.ui.tabs.get("tab1").sections.get("section4").setVisible(true);
                    break;
                case 953820004: //Section 5
                    formContext.ui.tabs.get("tab1").sections.get("section5").setVisible(true);
                    break;
                case 953820005: //Section 6
                    formContext.ui.tabs.get("tab1").sections.get("section6").setVisible(true);
                    break;
                case 953820006: //section 7 
                    formContext.ui.tabs.get("tab1").sections.get("section7").setVisible(true);
                    break;
                case 953820007: //Section 8
                    formContext.ui.tabs.get("tab1").sections.get("section8").setVisible(true);
                    break;
                case 953820008: //Section 9
                    formContext.ui.tabs.get("tab1").sections.get("section9").setVisible(true);
                    break;
                case 953820009: //Section 10
                    formContext.ui.tabs.get("tab1").sections.get("section10").setVisible(true);
                    break;
                case 953820010: //Section 11
                    formContext.ui.tabs.get("tab1").sections.get("section11").setVisible(true);
                    break;
            }

        }

    }

}

I need some assistance with adding logic to hide sections and clear fields if the corresponding field value is removed from the mutli select field. The tricky part is if the mutli select field has 3 values in it, and one of them is removed the system will need to leave the section and the fields untouched for the first two and then hide/clear for the removed value only. Currently if I try it, the code will loop through the array and evaluate each value without considering the others. So if its looking at value1 it will see its in the array and not touch the section for it, but when it looks at value2 it will clear out the section/fields for value1 since value2 is not value1. If that makes sense. 

Any help would be greatly appreciated, I am lost as to how to approach this and I'd like to learn from this too. Thank you!


Viewing all articles
Browse latest Browse all 82002

Latest Images

Trending Articles



Latest Images