Client Scripting Lab

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.




Lab 1: Manipulating Entity Forms with

JScriptDuring this lab, you will work with the Xrm.Page namespace using JScript code.




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.



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.



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.



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.


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.



h. Ensure the Library chosen is new_/JScript/XrmPageSamples.js. This is


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.




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.


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.



a. Expand the Contact entity, click Forms, and open the Main Contact

form.

b. On the Ribbon, click Form Properties.


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 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.


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.



Lab 2: Debug JScript CodeDuring this lab, you will identify a problem in JScript code and debug it.




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.


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.



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.



"'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.



19. Open an existing Contact record. The JScript code executes correctly and hides

the Business Phone field.



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.


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.



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.

Documents

Client Scripting Lab