locked
CRM 2011 - JavaScript Project Structures - Best Practices RRS feed

  • Question

  • What are the best practices for Javascript structure (not the actual JS code itself), but the structure. 

    What I have done is - 

    new_Program.js is one big JS file which has all the JS functions related to Program entity. And, if I wanted multiple functions to be fired when onformload or onformsave, I have written one function (for each, Load and Save) and within that, I call the other functions. 

    For instance, my new_Program.js will look something like this


    if (typeof (CRM2011) == "undefined")
    { CRM2011 = {}; }
     
    CRM2011.Program = {
        SaveFormData: function () {
        },
     
        LoadFormData: function () {
            CRM2011.Program.SharedFunction1();
            CRM2011.Program.SharedFunction2();
        },
     
        Field1OnChange: function () {
            CRM2011.Program.SharedFunction1();
        },
     
        Field2OnChange: function () {
            CRM2011.Program.SharedFunction2();
        },
     
        SharedFunction1: function () {
            // code for an event handler
            // for example, if a field has a certain value, make another field required
        },
     
        SharedFunction2: function () {
            //code for an event handler
            // for example, if a field has a certain value, make another field required
        }
    };

    Is the approach I have taken a good one? Alternatively, I will have to create a multiple JS for the same entity (say, one for each SharedFunction - ignore the current example of event handlers as even if I were to do that I will put the event handlers all together, but you get the idea) and as part of the OnLoad, I will have to add each of the functions - SharedFunction1 and SharedFunction2 in the the OnLoad event and manage the order there. 

    Wednesday, March 27, 2013 5:12 PM

Answers

  • Hi,

    It really depends! If you have distinct de-coupled components that do not interact with each other and maybe used independently to one another in different places, then the separate OnLoad events maybe the better option. The other reason you might do this is if you need to the ability to easily turn on/off that feature by enabling/disabling the event.

    Any business logic that is specific to a particular solution, I always have in a single OnLoad event. Personally I like the simplicity that having a single OnLoad function (as you have shown above) gives - it means you only need to edit the function when updating - rather than changing the form events as well.

    Does that help?



    Scott Durow
    Read my blog: www.develop1.net/public     Follow Me on Twitter
    If this post answers your question, please click "Mark As Answer" on the post and "Mark as Helpful"

    Thursday, March 28, 2013 10:12 AM
    Answerer

All replies

  • Hi,

    Your example above is fine - but you'll start to find a lot of duplication of the shared functions unless you have a single webresource that includes all your code for all entities.

    There are advantages to splitting your javascript into multiple webresources:

    1. Shared functions in a separate webresource are easier to maintain and keep in sync across multiple projects/solutions

    2. The download payload on first load of CRM is less if each entity has it's own javascript webresource - and referencing a shared library.

    3. Having a webresource per entity that references a a common library is easier to manage. 

    4. You can use the shared functions in HTML webresources as well without loading unneeded scripts.

    One thing to be aware of is that UR12 now loads multiple scripts asynchronously, so you need to make sure that any code executing that requires all scripts to be full loaded is done from the onload event. 

    hth


    Scott Durow
    Read my blog: www.develop1.net/public     Follow Me on Twitter
    If this post answers your question, please click "Mark As Answer" on the post and "Mark as Helpful"

    Wednesday, March 27, 2013 6:11 PM
    Answerer

  • I agree with the advantages of multiple web resources, but the more important question here is - Is it better to manage the calling of functions within the OnFormLoad function or call them individually by adding them to the event OnLoad and managing the order there. 

    Thursday, March 28, 2013 10:07 AM
  • Hi,

    It really depends! If you have distinct de-coupled components that do not interact with each other and maybe used independently to one another in different places, then the separate OnLoad events maybe the better option. The other reason you might do this is if you need to the ability to easily turn on/off that feature by enabling/disabling the event.

    Any business logic that is specific to a particular solution, I always have in a single OnLoad event. Personally I like the simplicity that having a single OnLoad function (as you have shown above) gives - it means you only need to edit the function when updating - rather than changing the form events as well.

    Does that help?



    Scott Durow
    Read my blog: www.develop1.net/public     Follow Me on Twitter
    If this post answers your question, please click "Mark As Answer" on the post and "Mark as Helpful"

    Thursday, March 28, 2013 10:12 AM
    Answerer
  • Brilliant, thanks for the detailed explanation. Just one final query, I did not understand what you meant by "so you need to make sure that any code executing that requires all scripts to be full loaded is done from the onload event."

    Can you please elaborate, preferably with an example or point me to a location?

    Thursday, March 28, 2013 1:05 PM
  • Hi,

    I've done a blog post on the UR12/Polaris async loading I'm referring to - http://www.develop1.net/public/post/Asynchronous-loading-of-JavaScript-Web-Resources-after-U12POLARIS.aspx

    hth


    Scott Durow
    Read my blog: www.develop1.net/public     Follow Me on Twitter
    If this post answers your question, please click "Mark As Answer" on the post and "Mark as Helpful"

    Friday, March 29, 2013 9:11 PM
    Answerer