Step-By-Step How to Hide and Toggle Fields in a CRM form using JScript

by Carmel Schvartzman

1. In this walkthrough we will learn How to Hide and Toggle Fields in a CRM form using JavaScript  in Dynamics CRM 2011. We'll be using a radio button to toggle an entire section of a tab, together with all of its controls. 
2. Initially, the section won't be displayed; it will toggle by clicking a radio button control we'll add to the form. The final CRM toggle section will show as follows, with a radio button allowing the user to show or hide the Section:
   
3. In order to attain that, we'll create a Web Resource including three javascript functions which will allow the user to open or close the tab's section fast and comfortably. 
4. The main function will be sufficiently generic to let's us using the Web Resource in different CRM entity forms.
5. We'll be using the Article entity, so open the Customize of that entity, and go to Customize of the Main Form, adding a new field:
   
6. Name the field new_toggle and set the Display Name as "Display Section":
   
7. Select the Type of the field as "Two options" , because we want to YES/NO display the Section:
   
8. Check the new field out at the CRM form:
   
9. Next, double click the Section we want to toggle, and change its name to something more friendly like "tab1": (confirm that  "Visible by default" is checked ):
   
10. Save and Publish the CRM form:
    
11. Now we're ready to code our Web Resource, which will contain the functions to toggle the Section:
    
12. Let's create an Script Web Resource named "new_toggle" and called "_ToggleRadioButton" (the "_" is for our script appearing at the top of the extent name-sorted list of Web Resources):
13. The Main function at the script gets the radio button id and the section id:
    
    
    Next, it calls twice another function that registers the "onclick" event for two HTML Input radio buttons: "rad_XXXXXX1" and  "rad_XXXXXX2", that's because CRM splits our YES/NO field into TWO radio buttons.
14. Now we get the TAB where our section is located, using the CRM notation: Xrm.Page.ui.tabs.get(0) : that fetchs the main tab of the form, also called "general", and the section named "childid". The setVisible will be initially "false": you can adapt it to your necessities:
    
15. The "registerEvent" function just adds an event listener to the two radio buttons, using addEventListener for Chrome , Firefox or IE from version 9 on; or using the obsolete attachEvent for older versions of IE:
    
16. Finally, we have our third function, that first check whether the radio button is null, and if not, checks whether it is the "YES" radio button ("2"):
    
    
17. If the radio button clicked is the YES and is checked, set VISIBLE to our section:
    
    
    
    Remember from above that "general" tab is another way to say :
    
18. If the radio button clicked is the NO , and is checked, set VISIBLE=false to our section:
    
    
    
19. Finally, save and close and Publish the Web Resource. Now we must add the script to our CRM form:
    
    
20. Go to "Form Properties":
    
21. ...and add the script as a JS library:
    
22. Also, add the script as an OnLoad Event Handler:
    
23. Set as parameters of the main function, the name of the radio button field, and the name of the section:
    
24. After publising the form, go to the workplace and create a new Article:
    
25. ...click OK:
    
26. Take a look at the new Article: the section is hidden:
    
27. Now click the "YES" radio button, and the Section will appear:
    
    
    
    This walkthrough is about How to Hide and Toggle Fields in a CRM form using JScript.
    That's all...Enjoy Dynamics CRM
    
    
    
    
    
    
    כתב: כרמל שוורצמן