JavaScript 101 for Microsoft CRM 2011

JavaScript 101 –
Creating your first JavaScript in
Microsoft Dynamics CRM 2011
Will Slade
Senior CRM Consultant
linkedin.com/in/WillSlade

Objective
 Review basic steps for
creating your first JavaScript
 Change how JavaScript is
perceived in the user
community
 Show how non-developers
can use basic JavaScript in
Microsoft Dynamics CRM

Agenda
1. What is JavaScript (aka: form scripting)?
2. Examples of JavaScript
3. The Basic Elements of JavaScript
4. JavaScript on Classic Forms in Microsoft Dynamics CRM 2011

What is JavaScript?
 It is code
 Made for web browsers
 Alters the content that is displayed

JavaScript
aka: Jscript
aka: Form Scripting

In some documentation, there
is reference to “Form Scripting”
and “Jscript”,…
Are these the same thing as
JavaScript?
JavaScript and Form Scripting

Form Scripting - Jscript - JavaScript
Microsoft refers to using JavaScript in CRM as Form Scripting. For the purposes of this presentation,
scripting will simply be referred to as JavaScript. Here are some other helpful definitions:
JavaScript from Wikipedia:
JavaScript (JS) is an interpreted computer programming language. It was originally implemented as part of web
browsers so that client-side scripts could interact with the user, control the browser, communicate asynchronously,
and alter the document content that was displayed. More recently, however, it has become common in server-side
programming, game development and the creation of desktop applications.
jQuery from Wikipedia
jQuery is a multi-browser JavaScript library designed to simplify the client-side scripting of JavaScript and HTML.
Jscript vs. JavaScript from Wikipedia
…..” A lot of people think that JScript and JavaScript are different but similar languages. That's not the case. They
are just different names for the same language, and the reason the names are different was to get around
trademark issues”,….

JavaScript as a “Web Resource” in Microsoft CRM

JavaScript in Microsoft Dynamics CRM 2011
 Microsoft Dynamics CRM is
a browser based application
 Basically a bunch of webpages
 JavaScript is included in a
CRM webpage as a ‘Web
Resource’ Types of Web
Resources

When does a JavaScript do its thing?

When does JavaScript do its thing?
 OnLoad
 When the page opens
 OnChange
 When a field value changes on a form
 OnSave
 When a record is saved

Why use JavaScript?
(here are some quick examples)

Basic examples of how JavaScript can be used
 Change the color of a label on a field based on the value
 Hide fields based on another value on the form
 Display a map to a contact form that shows the contact address

Writing Code Sounds Intimidating

Maybe not so intimidating after all,…
 Before we show actual
code, keep in mind that it
might not be that
intimidating
 JavaScript is code but if
you break it down into its
basic elements, it is often
easier to understand

JavaScript code sample
function alertVIP()
{
document.getElementById("new_vip_c").innerHTML = "VIP";
}
This JavaScript
changes the label
color to red for
the field ‘VIP’
Note: This is JavaScript for CRM 2011 which is different than CRM version 4.0. Some examples provided may not be supported in future versions

JavaScript code elements
function alertVIP()
{
}
function name

function alertVIP()
{
}
Beginning bracket
Ending bracket

function alertVIP()
{
}
Semicolon
that ends a
line

function alertVIP()
{
}
Exact field name in CRM

function alertVIP()
{
}
CRM code and method for getting the field HTML
Copy this exactly how it is here including parentheses and quotes
JavaScript code is case-sensitive

function alertVIP()
{
}
Replacement HTML code for this field’s label
#ff000 is the color red

function alertVIP()
{
document.getElementById("new_vip_c").innerHTML = "VIP";
}
… and this is a different example that
makes the field label Bold

JavaScript code sample – adding logic
function alertVIP()
{
var VIP = Xrm.Page.getAttribute("new_vip").getValue();
if(VIP == true)
{
}
else
{
document.getElementById("new_vip_c").innerHTML = "VIP";
}
}

function alertVIP()
{
if(VIP == true)
{
}
else
{
}
}
var = Variable

function alertVIP()
{
if(VIP == true)
{
}
else
{
}
}
VIP is the unique name for this variable
that is used in this code

function alertVIP()
{
if(VIP == true)
{
}
else
{
}
}
Field name in CRM

function alertVIP()
{
if(VIP == true)
{
}
else
{
}
}
Method for getting the field value

function alertVIP()
{
if(VIP == true)
{
}
else
{
}
}
Entire Logic statement

function alertVIP()
{
if(VIP == true)
{
}
else
{
}
}
If asks the question:
If the value for VIP equals (==) true
note: the field “new_vip” is a bit value

function alertVIP()
{
if(VIP == true)
{
}
else
{
}
}
If true then do this part of the code which
turns the label red

function alertVIP()
{
if(VIP == true)
{
}
else
{
}
}
If NOT true then do this part of the code which
turns the label black

Examples of frequently used code
(the Microsoft CRM parts)

Frequently used Microsoft CRM parts of the code
 Hide a Field: Xrm.Page.getControl("name").setVisible(false);
 Get a Value: Xrm.Page.getAttribute("name").getValue();
 Set a Value: Xrm.Page.getAttribute("name").setValue(“Information");
 Set as Read-Only: Xrm.Page.ui.controls.get("accountnumber").setDisabled (true)
Online Guide from Microsoft

Quick Online Reference from Microsoft
 Direct Link: http://msdn.microsoft.com/en-us/library/jj602964#BKMK_AccessingAttributes
 Microsoft Developer Network: http://msdn.microsoft.com/library

Adding JavaScript to a Contact Form
Classic Form – not the Process Form in Microsoft Dynamics CRM 2011

Open the Contact Form
 Settings > Customization > Solutions > Your Custom Solution
 Components > Entities > Contact > Forms

Go to Form Properties1 then click Add2
1
2

Click New to add new Web Resource

Type = Script (Jscript) then click Text Editor

Paste your code into the Text Editor and Save

Add OnLoad
 Your new JavaScript has now
been added to the Form
Libraries list
 In Form Properties under
Event Handlers, click Add to
add a new OnLoad event for
the form

Enable Function
 Select your new JavaScript from
the Library dropdown
 Put in the function name to the
script. In our example, it was
alertVIP
 Make sure the Enabled
checkbox is checked for the
JavaScript to run when the page
loads
 Note: The field new_vip must
be on the form or the page will
show an error

OnLoad Added
 Our new OnLoad event
should now show in the
Event Handlers list

Add OnChange to VIP field
 On the Field Properties for
the VIP field, click on the
Event tab

Enable Function
 Adding an OnChange is very
similar to adding the OnLoad
 Save and now the JavaScript
will run every time you
change the field value for
VIP

Contact with OnLoad and OnChange JavaScript

Summary
 JavaScript is code added to a webpage to modify
the display
 JavaScript does not have to be that intimidating
 Each element of a JavaScript serves a purpose
and must be entered exactly - it is case-sensitive
 JavaScript can help enhance design and usability

Thank You
Will Slade
Senior CRM Consultant
linkedin.com/in/WillSlade

JavaScript 101 for Microsoft CRM 2011

More Related Content

What's hot

Viewers also liked

Similar to JavaScript 101 for Microsoft CRM 2011

Recently uploaded

JavaScript 101 for Microsoft CRM 2011