Field Level Notification in CRM 2013 using javascript OR Control Level Notification in CRM 2013 using javascript

Version used for this post: CRM 2013 Online Trial

In CRM 2013, we could provide custom field level notifications. Lets see how could we do this. Please note that field level notification could be achieved using business rules as well. 
Please refer the post :http://crmorion.blogspot.com/2013/10/business-rules-in-crm-2013-or-how-to.html

Scenario: We have Credit limit and Annual revenue fields on the Account form. If the user enters a credit limit value greater than annual income, we need to notify the user with a message that the credit limit shouldn't cross the Annual revenue value. 

So we are going to do this using javascript.

Well, lets listen to CRM 2013 SDK for a moment.

"setNotification

Display a message near the control to indicate that data is not valid. When this method is used on Microsoft Dynamics CRM for tablets a red "X" icon appears next to the control. Tapping on the icon will display the message." ( Ref: CRM 2013 SDK ) 

Nota Bene: Setting a notification on a control will block the form from saving. 

This means that if there is a notification, the user needs to resolve it first and then he / she would be able to save the form.

1. Firstly we need to define a javascript function in web resource. Either we could go to Solution ( Default solution ) --> Webresource --> Add web resource OR Update in an existing web resource  OR Navigate to Account Form and then choose the field Credit Limit-->Field Properties--> Events -- > Add OR Modify Form Library

Account Form

Credit Limit Field

2. Here is the Javascript code. And its not a hard nut to crack

For our convenience, let's copy the code here

function SetCreditLimit()
{
var annualRevenue=Xrm.Page.getAttribute("revenue").getValue();
var creditLimit= Xrm.Page.getAttribute("creditlimit").getValue();

if(creditLimit > annualRevenue)
{
Xrm.Page.getControl("creditlimit").setNotification("Sorry, Credit Limit should be less than the Annual Income");
}
else
{
Xrm.Page.getControl("creditlimit").clearNotification();
}

}


Please note the key functions used in this javascript code.

setNotification - To display a notification about a control

clearNotification - To remove the notification about a control

In this scenario, we would like to have notification if the credit limit is more than the annual revenue otherwise we do not want to display any notification.

creditlimit and revenue are the field names.

After adding the js code, Save the webresource content.

3. The next step is to call this function on the onchange event of Credit limit field.

4. Next is our no-brainer, Press OK, Save the form and publish the form.

5. Now lets pick up a sample account to test. Please note the annual income value on it.

6. Lets key in some value in the Credit limit field and test the result. In this case, we could see a red X and if we move the cursor on it then we could see the message as shown below.

7. Also lets try to key in a value which is less than the annual income.

8. As we could see, there is no notification in this case and the user could save the record.