JavaScript 101 –
Creating your first JavaScript in
Microsoft Dynamics CRM 2011
Will Slade
Senior CRM Consultant
linkedin.c...
Objective
 Review basic steps for
creating your first JavaScript
 Change how JavaScript is
perceived in the user
communi...
Agenda
1. What is JavaScript (aka: form scripting)?
2. Examples of JavaScript
3. The Basic Elements of JavaScript
4. JavaS...
What is JavaScript?
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?
Java...
Form Scripting - Jscript - JavaScript
Microsoft refers to using JavaScript in CRM as Form Scripting. For the purposes of t...
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 w...
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
 OnSa...
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 bas...
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 Code Elements
JavaScript code sample
function alertVIP()
{
document.getElementById("new_vip_c").innerHTML = "<font color=#ff0000>VIP</fo...
JavaScript code elements
function alertVIP()
{
document.getElementById("new_vip_c").innerHTML = "<font color=#ff0000>VIP</...
JavaScript code elements
function alertVIP()
{
document.getElementById("new_vip_c").innerHTML = "<font color=#ff0000>VIP</...
JavaScript code elements
function alertVIP()
{
document.getElementById("new_vip_c").innerHTML = "<font color=#ff0000>VIP</...
JavaScript code elements
function alertVIP()
{
document.getElementById("new_vip_c").innerHTML = "<font color=#ff0000>VIP</...
JavaScript code elements
function alertVIP()
{
document.getElementById("new_vip_c").innerHTML = "<font color=#ff0000>VIP</...
JavaScript code elements
function alertVIP()
{
document.getElementById("new_vip_c").innerHTML = "<font color=#ff0000>VIP</...
JavaScript code elements
function alertVIP()
{
document.getElementById("new_vip_c").innerHTML = "<b>VIP</b>";
}
… and this...
Adding Logic
JavaScript code sample – adding logic
function alertVIP()
{
var VIP = Xrm.Page.getAttribute("new_vip").getValue();
if(VIP ...
JavaScript code elements
function alertVIP()
{
var VIP = Xrm.Page.getAttribute("new_vip").getValue();
if(VIP == true)
{
do...
JavaScript code elements
function alertVIP()
{
var VIP = Xrm.Page.getAttribute("new_vip").getValue();
if(VIP == true)
{
do...
JavaScript code elements
function alertVIP()
{
var VIP = Xrm.Page.getAttribute("new_vip").getValue();
if(VIP == true)
{
do...
JavaScript code elements
function alertVIP()
{
var VIP = Xrm.Page.getAttribute("new_vip").getValue();
if(VIP == true)
{
do...
JavaScript code elements
function alertVIP()
{
var VIP = Xrm.Page.getAttribute("new_vip").getValue();
if(VIP == true)
{
do...
JavaScript code elements
function alertVIP()
{
var VIP = Xrm.Page.getAttribute("new_vip").getValue();
if(VIP == true)
{
do...
JavaScript code elements
function alertVIP()
{
var VIP = Xrm.Page.getAttribute("new_vip").getValue();
if(VIP == true)
{
do...
JavaScript code elements
function alertVIP()
{
var VIP = Xrm.Page.getAttribute("new_vip").getValue();
if(VIP == true)
{
do...
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 Val...
Quick Online Reference from Microsoft
 Direct Link: http://msdn.microsoft.com/en-us/library/jj602964#BKMK_AccessingAttrib...
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 > Fo...
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, ...
Enable Function
 Select your new JavaScript from
the Library dropdown
 Put in the function name to the
script. In our ex...
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 tim...
Contact with OnLoad and OnChange JavaScript
Contact with OnLoad and OnChange JavaScript
Additional Examples
Calculating a Field
Adding an Image
Summary
 JavaScript is code added to a webpage to modify
the display
 JavaScript does not have to be that intimidating
...
Thank You
Will Slade
Senior CRM Consultant
linkedin.com/in/WillSlade
Upcoming SlideShare
Loading in...5
×

JavaScript 101 for Microsoft CRM 2011

8,536

Published on

Step by step guide to creating your first JavaScript in Microsoft Dynamics CRM 2011

Published in: Technology
5 Comments
10 Likes
Statistics
Notes
  • New JavaScript methods in CRM 2013. Blog post from Ashish Khanna
    http://mscrmsupport.com/2014/01/07/new-javascript-methods-in-crm-2013/
       Reply 
    Are you sure you want to  Yes  No
    Your message goes here
  • Note about this presentation: This presentation is a few years old now and was originally geared toward CRM 2011 classic forms. It has helped countless clients better understand JavaScript in Microsoft CRM 2011. It still does. Some of the example code provided may not work in future CRM versions. With CRM 2013, please refer to the following page from Microsoft:
    http://blogs.msdn.com/b/crm/archive/2013/08/23/check-your-javascript-code-to-prepare-for-your-upgrade.aspx
    I have been asked to leave this presentation online for a while longer for those still wanting to view it.
       Reply 
    Are you sure you want to  Yes  No
    Your message goes here
  • @WillSlade Thanks for responding. The example code will work but as you're probably aware it's unsupported by Microsoft and may cause clients issues in future if they call MS for support as it directly manipulates the DOM. More importantly any future roll up could break your code. I appreciate that many of us make these changes at the clients request, we've all heard - 'I want that bit Blue, make it happen!' :-) But I think a presentation for first time users of JavaScript should at least give an awareness of the line between supported and unsupported highlighting that unless absolutely necessary they should only use the Xrm object model. If not you may end up with a slightly over enthusiastic business user making major modifications to the DOM. I've seen a few too many cases of 100+ line web resources full of illegible unsupported JavaScript that could be done in 3 or 4 lines, but the business user who wrote it didn't understand basic programming constructs or what they should or 'shouldn't' do.
       Reply 
    Are you sure you want to  Yes  No
    Your message goes here
  • Darren – Thank you for the feedback. The logo used in the presentation seems to be commonly used for JavaScript. If you type JavaScript into Bing, you get the definition and that logo. I removed the logo to avoid confusion. The example code provided has been tested and used in countless CRM implementations across IE, Firefox, and Chrome. This presentation is geared toward first time users to form scripting in Microsoft CRM. Therefore, I tried to include code examples that were commonly requested and basic.
       Reply 
    Are you sure you want to  Yes  No
    Your message goes here
  • Your demo code teaches people how to do unsupported modifications to the DOM! Why have you merged the Java logo with JavaScript? Java is to JavaScript what Car is to Carpet, they are COMPLETELY unrelated technologies.
       Reply 
    Are you sure you want to  Yes  No
    Your message goes here
No Downloads
Views
Total Views
8,536
On Slideshare
0
From Embeds
0
Number of Embeds
7
Actions
Shares
0
Downloads
0
Comments
5
Likes
10
Embeds 0
No embeds

No notes for slide

JavaScript 101 for Microsoft CRM 2011

  1. 1. JavaScript 101 – Creating your first JavaScript in Microsoft Dynamics CRM 2011 Will Slade Senior CRM Consultant linkedin.com/in/WillSlade
  2. 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. 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
  4. 4. What is JavaScript?
  5. 5. What is JavaScript?  It is code  Made for web browsers  Alters the content that is displayed
  6. 6. JavaScript aka: Jscript aka: Form Scripting
  7. 7. In some documentation, there is reference to “Form Scripting” and “Jscript”,… Are these the same thing as JavaScript? JavaScript and Form Scripting
  8. 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”,….
  9. 9. JavaScript as a “Web Resource” in Microsoft CRM
  10. 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
  11. 11. When does a JavaScript do its thing?
  12. 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
  13. 13. Why use JavaScript? (here are some quick examples)
  14. 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
  15. 15. Writing Code Sounds Intimidating
  16. 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
  17. 17. JavaScript Code Elements
  18. 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. 19. JavaScript code elements function alertVIP() { document.getElementById("new_vip_c").innerHTML = "<font color=#ff0000>VIP</font>"; } function name
  20. 20. JavaScript code elements function alertVIP() { document.getElementById("new_vip_c").innerHTML = "<font color=#ff0000>VIP</font>"; } Beginning bracket Ending bracket
  21. 21. JavaScript code elements function alertVIP() { document.getElementById("new_vip_c").innerHTML = "<font color=#ff0000>VIP</font>"; } Semicolon that ends a line
  22. 22. JavaScript code elements function alertVIP() { document.getElementById("new_vip_c").innerHTML = "<font color=#ff0000>VIP</font>"; } Exact field name in CRM
  23. 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. 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. 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
  26. 26. Adding Logic
  27. 27. JavaScript code sample – adding logic 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>"; } }
  28. 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. 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. 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. 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
  32. 32. 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>"; } } Entire Logic statement
  33. 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. 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. 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
  36. 36. Examples of frequently used code (the Microsoft CRM parts)
  37. 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. 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. 39. Adding JavaScript to a Contact Form Classic Form – not the Process Form in Microsoft Dynamics CRM 2011
  40. 40. Open the Contact Form  Settings > Customization > Solutions > Your Custom Solution  Components > Entities > Contact > Forms
  41. 41. Go to Form Properties1 then click Add2 1 2
  42. 42. Click New to add new Web Resource
  43. 43. Type = Script (Jscript) then click Text Editor
  44. 44. Paste your code into the Text Editor and Save
  45. 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. 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. 47. OnLoad Added  Our new OnLoad event should now show in the Event Handlers list
  48. 48. Add OnChange to VIP field  On the Field Properties for the VIP field, click on the Event tab
  49. 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
  50. 50. Contact with OnLoad and OnChange JavaScript
  51. 51. Contact with OnLoad and OnChange JavaScript
  52. 52. Additional Examples
  53. 53. Calculating a Field
  54. 54. Adding an Image
  55. 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
  56. 56. Thank You Will Slade Senior CRM Consultant linkedin.com/in/WillSlade

×