client scripting lab
TRANSCRIPT
8/3/2019 Client Scripting Lab
http://slidepdf.com/reader/full/client-scripting-lab 1/16
Lab Sessions
This manual includes the following lab sessions. Each lab includes step-by-step
instructions to complete the exercises. You can use the problem solving lab exercisesin your workbook to challenge your understanding of course material and refer to the
Lab Manual for detailed steps if needed.
Lab 1: Manipulating Entity Forms with JScript
During this lab, you will work with the Xrm.Page namespace using JScript code.
Estimated time to complete this lab: 30 minutes
Lab 2: Debug JScript Code
During this lab, you will identify a problem in JScript code and debug it.
Estimated time to complete this lab: 30 minutes
8/3/2019 Client Scripting Lab
http://slidepdf.com/reader/full/client-scripting-lab 2/16
Lab 1: Manipulating Entity Forms with
JScriptDuring this lab, you will work with the Xrm.Page namespace using JScript code.
Estimated time to complete this lab: 30 minutes
8/3/2019 Client Scripting Lab
http://slidepdf.com/reader/full/client-scripting-lab 3/16
Lab 1, Exercise 1: Using Xrm.Page.context
The goal of this exercise is to learn how to use the Xrm.Page.context namespace.
Challenge Yourself Register a JScript function on the OnChange event of the Account "Account Number"
field that shows an alert with the CRM server URL.
Step by Step
1. Open Visual Studio and create a new JScript file.
a. Click File | New | File.
b. Choose Script | JScript File.
c. Add the following JScript code:
//Displays the CRM Server URLfunction showServerUrl() {
alert("The CRM Server URL is " + Xrm.Page.context.getServerUrl());}
d. Save the file as C:\temp\new_\JScript\XrmPageSamples.js
2. Create a JScript Web Resource with the following values:
Parameter Value
Name new_/JScript/XrmPageSamples.js
Display Name Xrm.Page Samples
Description JScript code samples to demonstrate using the
Xrm.Page namespace.
Type Script (JScript)
Language English
a. Upload the JScript file you created in Visual Studio to this new Web
Resource.
b. Click Save, Publish, Save and Close.
3. Register the "showServerUrl" function from the XrmPageSamples.js Web
Resource to the OnChange event for the Account "Account Number" field.
a. Expand the Account entity, click Forms, and open the Main Account
form.
b. Double-click the Account Number field.
8/3/2019 Client Scripting Lab
http://slidepdf.com/reader/full/client-scripting-lab 4/16
c. Click the Events tab.
d. Expand Form Libraries.
e. Click Add.
f. Click new_/JScript/XrmPageSamples.js.
g. Under Event Handlers, notice that the Control is "Account Number" and
the Event is "OnChange". Click Add.
h. Ensure the Library chosen is new_/JScript/XrmPageSamples.js. This is
the JScript Web Resource that contains the function that will execute for
the OnChange event of the Account Number field.
i. To identify the function, click Cancel. Under Form Libraries, click
new_/JScript/XrmPageSamples.js and click Edit. The function we want
to execute in this JScript library is called "showServerUrl". Copy this
function name. Cancel out of this window.
j. Click Add under the Event Handlers. For Function, paste the name of the
function "showServerUrl". This is the name of the function in the
new_/JScript/XrmPageSamples.js Web Resource that contains the code
to execute for the OnChange event of the Account Number field.
8/3/2019 Client Scripting Lab
http://slidepdf.com/reader/full/client-scripting-lab 5/16
k. Click OK to close the Handler Properties windows. Click OK to close the
Field Properties window.
4. Click Preview | Create Form.
5. Add some text into the Account Number field and push Tab. Notice the
OnChange event fires and shows the CRM server URL.
6. Close the Preview form. On the Entity form, click Save, Publish, Save and Close.
8/3/2019 Client Scripting Lab
http://slidepdf.com/reader/full/client-scripting-lab 6/16
Lab 1, Exercise 2: Using Xrm.Page.ui
The goal of this exercise is to learn how to use the Xrm.Page.ui namespace.
Challenge Yourself Using JScript code, hide the Business Phone field and Details tab on the Contact form.
Step by Step
1. Open Visual Studio and open the JScript file you created earlier
("C:\temp\new_\JScript\XrmPageSamples.js").
a. Add the following JScript code after the "showServerUrl" function:
//Hides the Business Phone field and Details tabfunction hideFieldAndTab() {
//Hide the Business Phone fieldvar field = Xrm.Page.getControl("telephone1");field.setVisible(false);
//Hide the Details tabvar tab = Xrm.Page.ui.tabs.get("details");tab.setVisible(false);
}
b. Save the file.
2. Click Browse and upload the XrmPageSamples.js file. This will overwrite the
current file in the JScript Web Resource.
3. Click Save, Publish, Save and Close.
4. Register the "hideFieldAndTab" function from the XrmPageSamples.js Web
Resource to the OnLoad event for the Contact entity.
a. Expand the Contact entity, click Forms, and open the Main Contact
form.
b. On the Ribbon, click Form Properties.
c. Click the Events tab.
d. Expand Form Libraries.
e. Click Add.
f. Click new_/JScript/XrmPageSamples.js.
g. Under Event Handlers, choose Form for Control and OnLoad for Event.
Click Add.
8/3/2019 Client Scripting Lab
http://slidepdf.com/reader/full/client-scripting-lab 7/16
h. Ensure the Library chosen is new_/JScript/XrmPageSamples.js. This is
the JScript Web Resource that contains the function that will execute for
the OnLoad event of the Contact entity.
i. For Function, type "hideFieldAndTab".
j. Click OK to close the Handler Properties windows. Click OK to close theField Properties window.
5. Click Preview | Create Form.
6. Notice the Business Phone (telephone1) field and the Details tab are hidden.
7. Click Save, Publish, Save and Close.
8/3/2019 Client Scripting Lab
http://slidepdf.com/reader/full/client-scripting-lab 8/16
Lab 1, Exercise 3: Using Xrm.Page.data.entity
The goal of this exercise is to become familiar with the Xrm.Page.data.entity
namespace.
Challenge Yourself
Register a JScript function for the OnLoad event of the Account entity that shows the
current record's GUID.
Step by Step
1. Open Visual Studio and open the JScript file you created earlier
("C:\temp\new_\JScript\XrmPageSamples.js").
a. Add the following JScript code after the "hideFieldAndTab" function:
//Retrieve the GUID for the current recordfunction getGuid() {
//Valid form typesvar FORM_TYPE_CREATE = 1;var FORM_TYPE_UPDATE = 2;var FORM_TYPE_READ_ONLY = 3;var FORM_TYPE_DISABLED = 4;var FORM_TYPE_QUICK_CREATE = 5;var FORM_TYPE_BULK_EDIT = 6;
//Retrieve the form typevar formType = Xrm.Page.ui.getFormType();
//Only retrieve the GUID if the form type is either Update or ReadOnly
if (formType == FORM_TYPE_UPDATE || formType == FORM_TYPE_READ_ONLY){
var recordId = Xrm.Page.data.entity.getId();alert("The record GUID is " + recordId);
}}
b. Save the file.
2. Click Browse and upload the XrmPageSamples.js file. This will overwrite the
current file in the JScript Web Resource.
3. Click Save, Publish, Save and Close.
4. Register the "getGuid" function from the XrmPageSamples.js Web Resource to
the OnLoad event for the Contact entity. Multiple event handlers can be
registered for the same event.
8/3/2019 Client Scripting Lab
http://slidepdf.com/reader/full/client-scripting-lab 9/16
a. Expand the Contact entity, click Forms, and open the Main Contact
form.
b. On the Ribbon, click Form Properties.
c. Click the Events tab.
d. Expand Form Libraries and ensure
new_/JScript/XrmPageSamples.js is listed.
e. Under Event Handlers, notice that the "hideFieldAndTab" function from
the new_/JScript/XrmPageSamples.js JScript library is already
registered. You can register up to fifty event handlers for a single event.
Choose Form for Control and OnLoad for Event. Click Add.
f. Ensure the Library chosen is new_/JScript/XrmPageSamples.js. This is
the JScript Web Resource that contains the function that will execute for
the OnLoad event of the Contact entity.
g. For Function, type "getGuid".
h. Click OK to close the Handler Properties windows. Notice the Form
OnLoad event now has two event handlers registered.
i. Click OK to close the Field Properties window.
5. Click Save, Publish, Save and Close.
6. Open a new Contact record. Notice the Business Phone field is hidden when the
form loads. However, the getGuid function does not fire because the form type
is Create. Add some values to the Contact and click Save. Once the form reloads,
the getGuid function fires and displays the GUID of the newly created record.
This also demonstrates that the OnLoad event fires after the entity is saved.
8/3/2019 Client Scripting Lab
http://slidepdf.com/reader/full/client-scripting-lab 10/16
Lab 2: Debug JScript CodeDuring this lab, you will identify a problem in JScript code and debug it.
Estimated time to complete this lab: 30 minutes
8/3/2019 Client Scripting Lab
http://slidepdf.com/reader/full/client-scripting-lab 11/16
Lab 2, Exercise 1: Debug Scripting Error
The goal of this exercise is to become familiar with debugging JScript code using the
Internet Explorer 8 Developer Tools debugger.
Scenario
The customer is stating that every time the Contact form loads a scripting error
occurs and the Business Phone field is not hidden. They identify this because "Error
on page" is displayed in the lower left-hand corner of the Contact form. You suspect
there is an error in the JScript code executing for the OnLoad event of the Contact
entity form.
Challenge Yourself
Debug the JScript code to identify why the scripting error occurs. If you need
additional help, follow the steps below.
Step by Step
1. Open the new_/JScript/XrmPageSamples.js Web Resource in Microsoft
Dynamics CRM 2011.
2. Upload the file XrmPageSamples_Lab3Ex1.js to the Web Resource from the lab
folder for this course.
3. Click Save, Publish, Save and Close.
4. Open an existing Contact record. Notice a scripting error occurs.
5. Close the Contact form. A window stating "Microsoft Dynamics CRM has
encountered an error" is shown.
8/3/2019 Client Scripting Lab
http://slidepdf.com/reader/full/client-scripting-lab 12/16
6.
Click "View the data that will be sent to Microsoft" to get additional informationon the error. You identify the message associated with the error.
<Message>'null' is null or not an object</Message>
After reviewing the error and additional details, close the window and click
"Don't Send".
7. Re-open the Contact record and launch the debugger included in the Internet
Explorer 8 Developer Tools.
8. Click the Script tab.
9. Ensure that "Break on Error" is turned on (Ctrl + Shift + E).
10. Click Start Debugging and click OK to refresh the page. If you are not prompted
to refresh the page, fore-refresh the page (Ctrl+F5). The page needs to refresh
in order to execute the OnLoad event.
11. When the Contact form reloads, the debugger will stop execution and highlight
the point of failure.
Also, notice the error shown in the top-right corner.
8/3/2019 Client Scripting Lab
http://slidepdf.com/reader/full/client-scripting-lab 13/16
"'null' is null or not an object"
12. Set a breakpoint on the line immediately prior to the line at which the debuggerhas stopped.
a. Click line 9 and push F9. The line turns red and shows a breakpoint has
been set.
13. Push F5 to allow the code execution to finish.
14. Again, force-refresh the Contact form (Ctrl+F5) to allow the debugger to break
into the JScript code. This time, the debugger breaks on the line at which you
set the breakpoint.
15. Begin to step through and examine the code. Click the Locals button to view the
local variables.
16. Push F10 to execute and step over the first line of code. Notice that the "field"
variable has been set to null. Due to the error you are receiving regarding a null
value, you identify that the variable is being set to the control associated with
the attribute "new_telephone1". However, you realize that this attribute does
not exist for the Contact entity. The attribute should be "telephone1". Because
the "new_telephone1" attribute does not exist, the "field" variable is being set to
null. The next line of code then attempts to hide this field by executing the
setVisible method on the "field" variable. As a result, the code fails because the
"field" variable is null. The code should be corrected as follows.
var field = Xrm.Page.getControl("telephone1");
17. Now that the problem has been identified, click Stop Debugging and close the
debugger. Close the Contact form.
18. Open the new_/JScript/XrmPageSamples.jsWeb Resource, click Text Editor,
and edit the code so it is correct. Click Save, Publish, Save and Close.
8/3/2019 Client Scripting Lab
http://slidepdf.com/reader/full/client-scripting-lab 14/16
19. Open an existing Contact record. The JScript code executes correctly and hides
the Business Phone field.
8/3/2019 Client Scripting Lab
http://slidepdf.com/reader/full/client-scripting-lab 15/16
Lab 2, Exercise 2: Debug Unidentified JScript
Problem
The goal of this exercise is to become familiar with debugging JScript code using theInternet Explorer 8 Developer Tools debugger.
Scenario
The customer is stating that the Details tab is no longer being hidden when the form
loads and no scripting errors are shown. You have decided to debug the code during
the OnLoad event to determine why the tab is not being hidden.
Challenge Yourself
Debug the JScript code to identify why the Details tab is not being hidden. If you need
additional help, follow the steps below.
Step by Step
1. Open the new_/JScript/XrmPageSamples.js Web Resource in Microsoft
Dynamics CRM 2011.
2. Upload the file XrmPageSamples_Lab3Ex2.js to the Web Resource from the lab
folder for this course.
3. Click Save, Publish, Save and Close.
4. Open an existing Contact record. Notice the Details tab is visible.
5. Launch the debugger included in the Internet Explorer 8 Developer Tools.
a. Click the Contact form and push F12 to launch the debugger.
6. Click the Script tab.
7. In the drop-down next to "Start Debugging", click "XrmPageSamples.js".
8.
Set a breakpoint in the hideFieldAndTab function on the first line involved withhiding the tab.
a. Click Line 13 and push F9.
8/3/2019 Client Scripting Lab
http://slidepdf.com/reader/full/client-scripting-lab 16/16
9. Click Start Debugging.
10. Click the Contact form and push Ctrl+F5 to force the page to reload. This needs
to be done because the code executes during the OnLoad event. Once the page
refreshes, the breakpoint is hit.
11. Begin to step through and examine the code. Click the Locals button to view the
local variables.
12. Push F10 to execute and step over the first line of code. Push F10 again to
execute and step over the line where tab.setVisible is being set to "false".
13. Under the local variables, expand the "tab" object. Expand its methods. Notice
the method setVisible() accepts an argument "isVisible", which should be either
"true" or "false". However, in the code setVisible is being set to false. A property
called "setVisible" is actually being created and set to false in one line, which is
valid JScript code. This is why there is no scripting error thrown. However, for
the purposes here this code is incorrect and should read as follows.
tab.setVisible(false);
14. Now that the problem has been identified, click Stop Debugging and close the
debugger. Close the Contact form.
15. Open the new_/JScript/XrmPageSamples.jsWeb Resource, click Text Editor,
and edit the code so it is correct. Click Save, Publish, Save and Close.
16. Open an existing Contact record. Notice the Details tab is now hidden.