Automating Google Workspace (GWS) & more with Apps Script
JavaScript 101 for Microsoft CRM 2011
1. JavaScript 101 –
Creating your first JavaScript in
Microsoft Dynamics CRM 2011
Will Slade
Senior CRM Consultant
linkedin.com/in/WillSlade
2. 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
3. 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
7. In some documentation, there
is reference to “Form Scripting”
and “Jscript”,…
Are these the same thing as
JavaScript?
JavaScript and Form Scripting
8. 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”,….
10. 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
12. 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
14. 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
16. 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
18. JavaScript code sample
function alertVIP()
{
document.getElementById("new_vip_c").innerHTML = "<font color=#ff0000>VIP</font>";
}
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
19. JavaScript code elements
function alertVIP()
{
document.getElementById("new_vip_c").innerHTML = "<font color=#ff0000>VIP</font>";
}
function name
20. JavaScript code elements
function alertVIP()
{
document.getElementById("new_vip_c").innerHTML = "<font color=#ff0000>VIP</font>";
}
Beginning bracket
Ending bracket
21. JavaScript code elements
function alertVIP()
{
document.getElementById("new_vip_c").innerHTML = "<font color=#ff0000>VIP</font>";
}
Semicolon
that ends a
line
22. JavaScript code elements
function alertVIP()
{
document.getElementById("new_vip_c").innerHTML = "<font color=#ff0000>VIP</font>";
}
Exact field name in CRM
23. JavaScript code elements
function alertVIP()
{
document.getElementById("new_vip_c").innerHTML = "<font color=#ff0000>VIP</font>";
}
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
24. JavaScript code elements
function alertVIP()
{
document.getElementById("new_vip_c").innerHTML = "<font color=#ff0000>VIP</font>";
}
Replacement HTML code for this field’s label
#ff000 is the color red
25. JavaScript code elements
function alertVIP()
{
document.getElementById("new_vip_c").innerHTML = "<b>VIP</b>";
}
… and this is a different example that
makes the field label Bold
28. JavaScript code elements
function alertVIP()
{
var VIP = Xrm.Page.getAttribute("new_vip").getValue();
if(VIP == true)
{
document.getElementById("new_vip_c").innerHTML = "<font color=#ff0000>VIP</font>";
}
else
{
document.getElementById("new_vip_c").innerHTML = "<font color=#000000>VIP</font>";
}
}
var = Variable
29. JavaScript code elements
function alertVIP()
{
var VIP = Xrm.Page.getAttribute("new_vip").getValue();
if(VIP == true)
{
document.getElementById("new_vip_c").innerHTML = "<font color=#ff0000>VIP</font>";
}
else
{
document.getElementById("new_vip_c").innerHTML = "<font color=#000000>VIP</font>";
}
}
VIP is the unique name for this variable
that is used in this code
30. JavaScript code elements
function alertVIP()
{
var VIP = Xrm.Page.getAttribute("new_vip").getValue();
if(VIP == true)
{
document.getElementById("new_vip_c").innerHTML = "<font color=#ff0000>VIP</font>";
}
else
{
document.getElementById("new_vip_c").innerHTML = "<font color=#000000>VIP</font>";
}
}
Field name in CRM
31. JavaScript code elements
function alertVIP()
{
var VIP = Xrm.Page.getAttribute("new_vip").getValue();
if(VIP == true)
{
document.getElementById("new_vip_c").innerHTML = "<font color=#ff0000>VIP</font>";
}
else
{
document.getElementById("new_vip_c").innerHTML = "<font color=#000000>VIP</font>";
}
}
Method for getting the field value
33. JavaScript code elements
function alertVIP()
{
var VIP = Xrm.Page.getAttribute("new_vip").getValue();
if(VIP == true)
{
document.getElementById("new_vip_c").innerHTML = "<font color=#ff0000>VIP</font>";
}
else
{
document.getElementById("new_vip_c").innerHTML = "<font color=#000000>VIP</font>";
}
}
If asks the question:
If the value for VIP equals (==) true
note: the field “new_vip” is a bit value
34. JavaScript code elements
function alertVIP()
{
var VIP = Xrm.Page.getAttribute("new_vip").getValue();
if(VIP == true)
{
document.getElementById("new_vip_c").innerHTML = "<font color=#ff0000>VIP</font>";
}
else
{
document.getElementById("new_vip_c").innerHTML = "<font color=#000000>VIP</font>";
}
}
If true then do this part of the code which
turns the label red
35. JavaScript code elements
function alertVIP()
{
var VIP = Xrm.Page.getAttribute("new_vip").getValue();
if(VIP == true)
{
document.getElementById("new_vip_c").innerHTML = "<font color=#ff0000>VIP</font>";
}
else
{
document.getElementById("new_vip_c").innerHTML = "<font color=#000000>VIP</font>";
}
}
If NOT true then do this part of the code which
turns the label black
37. 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
38. 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
39. Adding JavaScript to a Contact Form
Classic Form – not the Process Form in Microsoft Dynamics CRM 2011
40. Open the Contact Form
Settings > Customization > Solutions > Your Custom Solution
Components > Entities > Contact > Forms
45. 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
46. 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
47. OnLoad Added
Our new OnLoad event
should now show in the
Event Handlers list
48. Add OnChange to VIP field
On the Field Properties for
the VIP field, click on the
Event tab
49. 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
55. 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