• Share
  • Email
  • Embed
  • Like
  • Save
  • Private Content
JavaScript 101 for Microsoft CRM 2011
 

JavaScript 101 for Microsoft CRM 2011

on

  • 6,117 views

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

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

Statistics

Views

Total Views
6,117
Views on SlideShare
6,106
Embed Views
11

Actions

Likes
5
Downloads
0
Comments
5

3 Embeds 11

https://twitter.com 5
http://www.linkedin.com 4
http://192.168.6.179 2

Accessibility

Categories

Upload Details

Uploaded via as Microsoft PowerPoint

Usage Rights

© All Rights Reserved

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel

15 of 5 previous next Post a comment

  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
    Processing…
  • New JavaScript methods in CRM 2013. Blog post from Ashish Khanna
    http://mscrmsupport.com/2014/01/07/new-javascript-methods-in-crm-2013/
    Are you sure you want to
    Your message goes here
    Processing…
  • 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.
    Are you sure you want to
    Your message goes here
    Processing…
  • @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.
    Are you sure you want to
    Your message goes here
    Processing…
  • 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.
    Are you sure you want to
    Your message goes here
    Processing…
  • 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.
    Are you sure you want to
    Your message goes here
    Processing…
Post Comment
Edit your comment

    JavaScript 101 for Microsoft CRM 2011 JavaScript 101 for Microsoft CRM 2011 Presentation Transcript

    • 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?
    • 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 Elements
    • 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
    • JavaScript code elements function alertVIP() { document.getElementById("new_vip_c").innerHTML = "<font color=#ff0000>VIP</font>"; } function name
    • JavaScript code elements function alertVIP() { document.getElementById("new_vip_c").innerHTML = "<font color=#ff0000>VIP</font>"; } Beginning bracket Ending bracket
    • JavaScript code elements function alertVIP() { document.getElementById("new_vip_c").innerHTML = "<font color=#ff0000>VIP</font>"; } Semicolon that ends a line
    • JavaScript code elements function alertVIP() { document.getElementById("new_vip_c").innerHTML = "<font color=#ff0000>VIP</font>"; } Exact field name in CRM
    • 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
    • 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
    • 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
    • Adding Logic
    • 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>"; } }
    • 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
    • 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
    • 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
    • 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
    • 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
    • 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
    • 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
    • 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
    • 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
    • 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  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