crminthefield: Using JQuery in Web Resources

[Blog bot]

Источник: http://blogs.msdn.com/b/crminthefiel...resources.aspx
==============



Currently the only JQuery function that Microsoft CRM supports is the AJAX function, Using jQuery. The SDK states that you can use the JQuery library in your web resources. So this provides use with ways to use the JQuery functions to access fields on the CRM form. and perform some action and update the CRM form, there are

Since HTML web resources are rendered in Iframes on the CRM form, I configure my Visual Studio project to best replicate what CRM performs. I create an ASP.Net Wen Application project in Visual Studio. I create a folder called pages and create the HTML page named testpage.html in that folder. The pages folder matches the virtual folder that is going to store the HTML web resource. I then create a sub folder in the Scripts folder and call it scripts and copy the JQuery library and the JQuery VS doc library into the new folder. Since CRM cannot have dashes in the name of web resources, I rename the 2 libraries so that they do not have dashes. The VSDoc was renamed so that Intellisense for JQuery still works.

In the root of the ASP.Net project, I create a parent HTML page that is going to host the HTML web resource. I use this web page to host the web resource page, so I test some of the functionality in Visual Studio. I populate the parent page with elements with the same id’s as the CRM fields I am going to work with. I place an Iframe on the parent HTML form and set its source to the web resource HTML page.

The HTML web resource is a simple page that has a reference to the renamed JQuery library. I added a Div with an id of “crmInfo”, 2 buttons, the first has an id of “XrmUpdate” and the second’s id is “JQueryUpdate”.

Looking at the code, we use a JQuery ID selector to get the data in the pfe_name field. Since the HTML web resource is loaded in an Iframe of the CRM form, we have to pass the parent.document as the second parameter of the selector to tell JQuery where to get the data. Then we make another JQuery selector call to update the div tag on the HTML web resource with the data we just retrieved.

var crmData = $('#pfe_name', parent.document).val();$('#crmInfo').html("This is the name of the record " + crmData);For the buttons we use JQuery to add click events. The XrmUpdate button uses parent.Xrm.Page.data.entity.attributes.get("pfe_xrmpageupdatefield").setValue(crmUpdateData) to update the CRM form. We have to add parent to the beginning of call since those functions are not passed to the web resource. For the JQuery button the we set the value of the CRM field using a JQuery ID selector. Again we have to pass the parent.document as the second parameter.

$('#XrmUpdate').click(function () { var crmUpdateData = "Updated by Xrm.Page"; parent.Xrm.Page.data.entity.attributes.get("pfe_xrmpageupdatefield").setValue(crmUpdateData);});$('#JQueryUpdate').click(function () { $('#pfe_jqueryupdatefield', parent.document).val("Update from JQuery");});The testpage.html and JQuery library are added to CRM as web resources. The HTML web resource is added to the test entity’s form.

We create a new test entity record and save it. When the form is refreshed the information in the name field is displayed in the HTML web resource.



Next we click XRM update button. The XRM Page Update field has data entered into it. When we attempt to refresh the page we get a warning that changes have not been saved. I click Leave this page so the form is refreshed and the data in the XRM Page Update field is removed.



I then click the Update with JQuery button and the string is entered into the JQuery field. When I attempt to refresh the form, I do not receive warning that my changes have not been saved and the data is lost from the JQuery form.

JQuery can be handy when you need to retrieve information from a CRM form, but when it is used to update the CRM form you lose out of the box functionality that you get with when using the XRM name space. To ensure that no data is lost you should stick with the Xrm.Page functions to update the fields on the form. They provide a mechanism to mark the form is dirty and alert users that there were changes made and alert the user that information will be lost if they navigate away from the form.

It should be noted that anything that uses URL addressable forms and the Outlook client should be tested, since there might not be a parent form to reference, http://msdn.microsoft.com/en-us/libr...8-e563424b7558.





Источник: http://blogs.msdn.com/b/crminthefiel...resources.aspx