L’histoire se répète is a french expression which expresses that bad things happen again and again.
Right now I’m working on a small demo in which I intend to demonstrate how you can use javascript and knockout.js to embed Dynamics CRM functionality in an external website.
It started out pretty well. I started with a simple viewmodel in which I want to load CRM contacts. For the demo I’m only interested in the first name, last name and email address of the contact. For that purpose I created a small class in which I can store the data.
var contact = function () {
this.id = ko.observable();
this.firstName = ko.observable(); //contact.FirstName
this.lastName = ko.observable(); //contact.LastName
this.emailAddress = ko.observable(); // contact.EmailAddress1
this.fullName = ko.pureComputed(function () {
return this.firstName() + ” “ + this.lastName();
}, this);
}
With regard to the functionality, I want to provide the following functionality:
- select
select a single contact by using the id of the contact. - selectList
select a list of contacts - Insert
Add a new contact to CRM - Update
Update an existing contact in CRM - Delete
Delete an existing contact from CRM
To keep things simple and to test the viewmodel, I start with the ‘select’ function. I created a contact in my CRM environment and retrieved the ID using the XrmToolbox’s FetchXml tester.
function CRMViewModel() {
var self = this;
this.contacts = ko.observableArray();
this.select =function (contactId) {
var c = new contact();
c.id(contactId);
var query = this.getCRMServer()
+ “/XRMServices/2011/OrganizationData.svc/”
+ “ContactSet(guid'” + contactId + “‘)”
+ “?$select=”
+ “FirstName, LastName, EmailAddress1”;
var req = new XMLHttpRequest();
req.open(“GET”, encodeURI(query), true);
req.setRequestHeader(“Accept”, “application/json”);
req.setRequestHeader(“Content-Type”, “application/json; charset=utf-8”);
req.onreadystatechange = function () {
if (this.readyState == 4 /* complete */) {
req.onreadystatechange = null; //avoids memory leaks
if (this.status == 200) {
//parse the response string as a JSON object
var data = JSON.parse(this.responseText).d;
if (data != null) {
c.firstName(data.FirstName);
c.lastName(data.LastName);
c.emailAddress(data.EmailAddress1);
}
}
}
};
req.send();
};
this.getCRMServer = function () {
return http://development:8000/CRMContentDevelopment;
}
};
var crmViewModel = new CRMViewModel();
On the webpage I call embed and activate this viewmodel
<!DOCTYPE html>
<html xmlns=”http://www.w3.org/1999/xhtml”>
<head>
<title>KockOut CRM</title>
<script language=”JavaScript” src=”scripts/jquery-2.1.3.min.js”></script>
<script language=”JavaScript” src=”scripts/Knockout-3.3.0.js”></script>
<script language=”JavaScript” src=”scripts/Demo.js”></script>
</head>
<body>
<h1>KnockOut CRM</h1>
<a href=”javascript:;” onclick=”crmViewModel.load(‘CB7FE5C2-2457-E511-80C3-000C298B751B’);” class=”btn”>Select</a> <br />
<script language=”JavaScript”>
ko.applyBindings(crmViewModel);
</script>
</body>
</html>
What the page does is the following. The html page loads and when done loading it activates the knockout viewmodel by binding it to the page. When I click on the ‘Select’ link, the load() function in the viewmodel is called with an existing Contact Id passed in.
When I run the page and click the ‘Select’ link, the load function is executed. The load function builds a rest query and fires it to Dynamics CRM. Then I see a result coming back activating my callback handler (req.onreadystatechange). However the query does not return data…. *sigh*
To check if my query is correct, I run the query with PostMan (www.getpostman.com). My weapon of choice for testing testing REST queries. Then the error pops up: HTTP Error 401.5 – Unauthorized….
Why?? I expected that since I’m running Dynamics CRM on the same webserver as my test website and running from a single browser in which I logged in to Dynamics CRM, I would be authorized to get the data. Turns out I’m not….
Time to skip stage two for now and proceed to stage three – Authentication(see this article for the stages).
In my research article I mentioned an article about authenticating from a node.js client. The code posted in that article https://github.com/lucasalexander/Crm-Sample-Code/blob/master/NodeClientDemo/app.js will lead me eventually to the solution, but it will cost me some time.
I started my article with the dramatic french expression “’L’histoire se répète”. In fact history is repeating itself one more time. This time it is not SharePoint (A better SharePoint Connector – part 4: why is she so hard to get?) that is causing me a headache, but CRM.
Please bear with me…..