Hide A Tab based upon Account Type


After seeing some of our top partners such as Invoke and ePartners demo this functionality, I was dying to see how they did it.  Then Simon Hutson posted on his blog a script to hide a tab based upon an account being a partner or a customer.  Well, after seeing both scripts, both where awesome, but both had their drawbacks. Simon used OnLoad and ePartners used OnChange. What are the pros and cons?


Before we start with the pro's and con's, lets go through the three options available to you. The three scripting events you can have events fire on are, OnLoad, OnChange and OnSave.


   Onload:



  • The Onload event occurs after the form has loaded; it cannot prevent the window from loading. The OnLoad event is valuable because it can apply logic about how the form should be displayed and can be used to set certain fields to read-only or business required.

OnChange:



  • The OnChange event is fired when the data in a form field has changed and focus is lost. The Microsoft CRM 3.0 application processes the OnChange event first and the data in the field is validated again following the execution of your OnChange event code.

OnSave:



  • This event does not correspond to the standard OnSave event exposed by DHTML. It is fired when a user presses the Save or Save and Close button on the form. The event is fired whether the data in the form has been modified or not.
  • Validating data is a common reason to use the OnSave event. The OnSave event can cancel the save operation before it is sent back to the server. To cancel the save operation, the script should return false as shown in the following code.

So now onto Pros and Cons... 🙂


With OnLoad, when the form is loaded the conditions are evaluated and the action is carried out. So if a account goes from Prospect to Customer, the tab would not be hidden until the form is reloaded. So that would require the user to save and close the window and then open back up to get the tab to show up as hidden. So if an account never moves, then this method alone would do the job for you.


With OnChange, when you change the value the condition is evaluated and the action is carried out. Once you change somebody to a supplier that tab would only be hidden while that form was open. So if you change the value, it will hide the tab, but if you save and open the form back up, the tab is back.... So OnChange works to give the user immediate feedback.


So with a little bit of time and some help from Paul Reitmeyer from Invoke, we created two scripts that handles both scenarios. How you ask? But using both the OnLoad and OnChange Events, we can play to the strengths in each of them.


So we are going to use a new tool today. Here are the steps required to hide tabs when a account opens and the picklist changes. 🙂
























































































 


  • Run the File


  • Open Internet Explorer and right click just below the address bar and unselect Lock the Toolbars. Select the Option that says “Developer Toolbar”



  • Click the option that says Lock the Toolbars.

 



  • Close Internet Explorer

 


  • Start Microsoft CRM in Internet Explorer.
 


  • Select the Accounts Area


  • Open an Account up


  • Hit the F11 Button to bring Microsoft CRM out of application mode.


  • Click on View DOM



  • Click in the DOM Explorer (At the bottom of the screen) And under the Find Menu, select “Select Element by Click.”)




  • Now click on the Details tab.


  • You will now see this in the center of the DOM Explorer.

    • The id name is the one that you want. It is what we will use to identify the tab to hide.


  • Close the Account Screen
 



  • Now go to Settings / Customizations and select the Account Entity

 


  • Open the Form
 


  • Select Form Properties
 


  • Click on Events
 


  • Click on OnLoad
 


  • Paste the following into the area and make sure the Event Enabled box is checked

           if( window.document.forms( "crmForm" ).elements( "customertypecode" ).SelectedText == "Supplier" || window.document.forms( "crmForm" ).elements( "customertypecode" ).SelectedText == "Customer")


           {          


             crmForm.all.tab1Tab.style.display="none";     


            }



  • Click Ok and Close the Form Properties.
 


  • Click on the Relationship Type Field. Open the properties of the Relationship Type and click on Events.
 


  • Click on OnChange
 


  • Paste the following into the area and make sure the Event Enabled box is checked.

if (crmForm.all.customertypecode.SelectedText == "Customer" || crmForm.all.customertypecode.SelectedText == "Supplier")


{


    crmForm.all.tab1Tab.style.display="none";


}


 



  • Save and close the form.
 


  • Save and Close the Account Entity
 


  • Publish the Account Entity
 


  • The Details Tab will now disappear if the relationship type is either Customer or Supplier...
 

An Account with the Relationship Type of Investor



The Same Account with the Relationship Type of Customer






These scripts could use some further enhancements. (I see one little hole already... Change it from a Customer to a Prospect... The form doesn't refresh... So the script needs a little more work...) What would you like to see in some future script examples?

Comments (19)
  1. David Pitkin says:

    Can I do the following in JScript:

    When a user picks a Responsible ID in a new case have it auto-fill in the Customer name? Or am I limited to presentation JScript type actions in the onChange events?

  2. Ben Vollmer says:

    David,

    It depends on what you are trying to do and how you want to do it. You could probaly do what you want with JScript or Workflow. You may want to talk to one of your partner or talk with our support team.

    Thanks

    Ben

  3. Alessandro Dalle Vedove says:

    Thank you very much form your post.

    I’ve a question for you.

    I want to to hide a Section on specific event using onchange().

    Using DOM and looking for the id of the Section, I’ve this kind of result:

    {54f4ba4b-d01e-4ecc-b1a3-0533034a1d47}

    If I use this code in the onchange:

    crmForm.all.{54f4ba4b-d01e-4ecc-b1a3-0533034a1d47}.style.visibility = ‘hidden’;

    I’ve an error.

    Any idea- suggestion?

    Thank you in advance. Ale

  4. Ben Vollmer says:

    That is something I have not yet tackled… I figured if I could hide the fields, the section became useless… 🙂 I will add that to the look at list… 🙂

  5. jrizo says:

    Thank you this is great information;

    What about if you want to also include Group rights for example:

    Customer field and specific user o group

  6. Ben Vollmer says:

    I am sure you could do it with some scripting client side… I personally have not done that yet… John has done something like that though here… http://blogs.msdn.com/jstraumann/archive/2006/01/09/510971.aspx

    HTH

    Ben

  7. Marty says:

    In my code, I was only trying to hide the tab (crmFform.all.tab5Tab) ALWAYS when onLoad event opened the form.

    It tested great on the ACCOUNT form, but threw an error when I originated from a CONTACT entity, selected the lookup field (parentcustomerid) Parent/Customer field, NEW ACCOUNT.  

    The Quick Create window opens and I got a CrmForm onload Error

    ‘crmForm.all.tab5Tab.style’ is null or not an object.

    There is only a single tab (named Client) on Quick Create’s form.  

    I was able to remove the error by revising my single line of code from

    crmForm.all.tab5Tab.style.display="none";

    to

    oTab5 = crmForm.all.tab5Tab;

    if(typeof(oTab5) != "undefined" && oTab5 != null)

    {

    crmForm.all.tab5Tab.style.display="none";

    }

    It took a while for me to figure out (I’m not great at coding but persistent!) so I thought you might like to pass on for those reading your blog.

    Thank you for making your step by step instructions so clear – using the Internet Explorer Developer Toolbar was great!

    Marty

  8. This took me about 2 seconds to figure out…the real question is, did the developers bake in a seamless way to hide the tabs?

    As an example, you can hide the "Form Assistant" by hacking the customization.xml.

  9. Boris says:

    When you want choose Potential customer in Opportunity and if you press "new" button in lookup view you have an error message "there was an error with this Field’s customized event"

  10. Allen Pemberton says:

    How would you change the code if you want the Tabs to appear or be hidden base on user role, i.e. Administrator vs all other users?

    Al

  11. CJ says:

    To hide a section on a form, I used this:

    // Hide the Hidden Section

    document.getElementById("ownerid_d").parentNode.style.display = "none";

    Use a field that is in that section to find the parentNode (the section itself), then hide it.

    Happy Hiding!

  12. MH says:

    How can I create a group of accounts with different names?

    If I creat a custom entity, will I be able to transfer an Opportunity to to this custom account?

  13. Ok this is frustrating. This is my third attempt to write this post and hopefully IE doesn’t crash on

  14. Kris Rhodes says:

    if (crmForm.all.customertypecode.SelectedText == "Customer" || crmForm.all.customertypecode.SelectedText == "Supplier")

    {

       crmForm.all.tab1Tab.style.display="none";

    }

    else

    {

       crmForm.all.tab1Tab.style.display="";

    }

    That way, when you select something other than supplier or customer, it goes back to being visible.

  15. Mark says:

    Why are you using window.document.forms instead of the standard crmform.all on the onload?

  16. Hong says:

    works like a charm… if only CRM is magic… then we’d all be magicians

  17. Alex Ksendzov says:

    As about hiding sections, section should be referenced as item in the collection by section id.

    Example:

    crmForm.all(‘{54f4ba4b-d01e-4ecc-b1a3-0533034a1d47}’).style.display = ‘none’;

  18. Chris Berry says:

    The post above "To hide a section on a form, I used this" is missing one more parentNode i.e.

    // Hide the Hidden Section

    document.getElementById("ownerid_d").parentNode.parentNode.style.display = "none";

    Just thought I’d help those of you who were wondering why it didn’t work.

  19. Jayakumar Janakiraman says:

    Thanks your post was very helpful

Comments are closed.

Skip to main content