Javascript in CRM 2011

JavaScript events are related to forms and the controls inside the forms only. Each form has two events OnLoad and OnSave events, which can accept JavaScript (shown in Figure). Each field also has the OnChange event, which can accept JavaScript.

Form Event(Entity Event)

Field Event in Form

                                        
Now lets see details about these three Events

OnLoad
The OnLoad event occurs every time the window of an entity(Form) is open, either when you edit an existing record or when you create a new one.

OnSave
The OnSave event occurs every time the Save icon or the Save and Close button is pressed.

OnChange
The OnChange event is fired every time the value of the field is changed and after it loses the focus.


Now Lets see the the Javascript Example in CRM

In CRM you can add the event like onkeypress, onkeyup, or onkeydown events

Suppose that you have a custom entity called House to which you have added the following custom fields: width, height, and area. You want to have the area automatically calculated from the width and height without forcing the user to move the focus from one control to the other to see the changes. You could add the following piece of code in the OnLoad event to attach a field control to the standard onkeyup event:

To see this sample working, follow these steps:

 1.  Go to Settings, Customizations, Customize Entities.

 2.  Click New to create a new entity.

 3.  Enter House in the Display Name field and Houses in the Plural Name field.

 4.  Click Save  and Close

 5.Now click on House Entity and click on Main Form.

 6.Add Three Field and Height,width and Area and  put into the Form with Floating Point Number as a Type.
7.Create a .Js File and add the Following code.
  
  function doCalc ()
  {
crmForm.all.new_area.value = crmForm.all.new_height.value *
crmForm.all.new_width.value;
   }

8.Now go to settings->customization->Customize the System -> from left menu select the Web Resources->New->write Name(calcarea)->under Type select Script(Jscript) and Upload a File and Save it.

9.Now go to House Entity and open Main Form and select the Form Properties and Add Form Libraries First.and you will find new_calcarea Library and add it.
  
8.Then below it Select Form Control and select OnLoad Event.Now Add it.specify Name doCalc.
9.Then Select Height Control and Select OnChange Event and Add the Javascript name(doCalc) for it.
10.do the same Step for Width Control
11.Click Ok and publish entity and open the House Entity.First it will show 0 in Area Field and Type width and Height it will calculate the area.

Now open the Entity and just type width and Height.It will automatically calculate the Area.

Final Output