Sage CRM allows administrators to implement business rules using JavaScript.  Sage CRM 7.2 introduced a client side API that simplified the work of controlling screen elements and common tasks within the context of Sage CRM screens.  The Sage CRM client side API is actually is built on jQuery.  The business rules that we need to add to Sage CRM screens can use a mix of plain old JavaScript, jQuery and the Sage CRM client side API.

Sage CRM ships with a jQuery library built-in.  We can use this library to assist us in customizing Sage CRM.  This article explains a little about how jQuery can be used.

jQuery is a multi-browser JavaScript library designed to aid client-side scripting of HTML.  It simplifies selecting elements in the DOM by providing css, xpath and custom selectors for identifying elements.  Once elements are selected many operations are possible, such as changing the value, class or behaviour of elements.

jQuery syntax is also a lot more concise than traditional JavaScript DOM scripting. For example a script to highlight and change the value of the comp_name field using traditional JavaScript looks like the following:

[code language="javascript"]

var comp_name = document.getElementById('comp_name');
comp_name.value = 'My new company name';
comp_name.className = 'highlighted';

[/code]

In jQuery the same can be achieved with:

[code language="javascript"]

$('#comp_name').val('My new company name').attr('class', 'highlighted');

[/code]

The $ function is shorthand for jQuery function which is the main entry point for all jQuery library calls.

Web browsers have subtle differences that can cause major headaches and increase the amount of testing required when developing for them.  One major advantage of using jQuery is that it hides these browser differences allowing you to write succinct code that will work on a multitude of browsers. 

One example, that is common to Sage CRM, is waiting for the page to load.  If you are putting a script in custom content to operate on a screen, waiting for the page to load is a requirement because at the point the script is first executed the screen is not fully drawn, so referring to fields will cause errors.  In IE8 the way to do this is:

[code language="javascript"]

window.attachEvent('onload', function () {
    alert('screen is loaded');
});

[/code]

But in other major browsers you have to do this:

[code language="javascript"]

window.addEventListener('load', function () {
    alert('screen is loaded');
};

[/code]

So to make this work in all browsers you end up having to write something like this:

[code language="javascript"]
function doAlert() {
    alert('screen is loaded');
}

if (window.addEventListener) {
    window.addEventListener('load', doAlert);
} else {
    window.attachEvent('onload', doAlert);
}

[/code]

Whereas if you use jQuery you can achieve the same that will work in all browsers with:

[code language="javascript"]

$(document).ready(function() {
    alert('screen is loaded');
});

[/code]

You can use shorthand syntax to further shorten this to:

[code language="javascript"]

$(function () {
     alert('screen is loaded');
});

[/code]

So we can see that jQuery can save a lot of typing, this in itself will reduce bugs and save time, but what else can jQuery do for us?  jQuery provides a nice simple syntax for making an AJAX request:

[code language="javascript"]

var sid = window.location.href.match(/([?&]sid=)([^&]*)/i)[2]; // Get the current session id

$.ajax({
    url: 'path/to/my/asp/page.asp',
    data: {SID: sid},
    success: function (data) {
        alert('My ASP page returned ' + data);
    }
});

[/code]

So where to from here?

You can put jQuery script anywhere you can put client-side JavaScript (Custom Content and onChange scripts).  To learn more about jQuery there are excellent resources on the jQuery site.

The entire API documentation can be found here: http://api.jquery.com/
jQuery tutorials can be found here: http://docs.jquery.com/Tutorials