How to get an entity by its id using javascript
Short answer
Click here for a short answer.Long answer
Step 1
The first step is to get an id of an entity whose information you'd like to return. In most of a cases you have a lookup field where you have some entity selected and you most likely want to return information from that particular entity. Notice that you can't really use only Xrm.Page.getAttribute('lookupfield').getValue() for the lookup field because instead of returning the entity it returns a lookup item which is only a link to the actual entity. However we are using it for getting the id. Why we can use it is because the lookup field's value contains actual entity's name, logical name and more importantly the id. The id in turn can be used on a step 2 when reaching out the entity itself and rest of its data.To get entity's id from a lookup field use
Xrm.Page.getAttribute('lookupfield').getValue()[0].id;
It returns the id in a following form {FD140AAF-4DF4-11DD-BD17-0019B9312238}. We have to get rid of the braces though in order to use it in a further stage. You can use for example javascript function replace() and replace any braces with nothing. See JavaScript replace Method.
Xrm.Page.getAttribute('lookupfield').getValue()[0].id.replace('{','').replace('}','');
Depending on your needs you can save the id straight into a variable or make a function that returns the id when called. I use the function
function getId(){
return Xrm.Page.getAttribute('lookupfield').getValue()[0].id.replace('{','').replace('}','');
}
Step 2
Now when you know how to get the id from the lookup field let's get the fun started. The key element of the whole process is the XMLHttpRequest object. If you don't know what that is or how to use it please refer The XMLHttpRequest Object. Let's start building our function. Give it a meaningfull name.function getData(){}
Now we have it. At the end of this tutorial that function will have an access to the entity's data we are looking for. First we have to create a new XMLHttpRequest object.
var request = new XMLHttpRequest();
Next we have to use XMLHttpRequest.open() method to assign some information for a pending request. It takes three different parameters.
- Method to use to open the connection
- Url to the data source
- Whether the request is asynchronous or synchronous.
- Root URI
- Resource path
- Query
var rootURI = Xrm.Page.context.getServerUrl() + '/xrmservices/2011/organizationdata.svc';
Resource path in turn depends on what type of an entity we are looking for. The name is always in a format like <EntityType>Set. For example in case of an incident it looks like
var resourcePath = '/IncidentSet';
Then comes the query which greatly varies depending on your search conditions. In this tutorial we are searching entities by them ids and thus the query is relatively easy. How to construct more complex queries see the OData Protocol URI Conventions once more. The query in this example looks like following
var query = '(guid\'' + getId() + '\')';
What happens here is we are putting the id that our function returns between (guid' and '). Notice that \' stands for an apostrophe that is counted as a string. You could do this apostrophe adding during the step 1 when we were using replace() functions. I personally prefer the current way though because I might need the id somewhere else in a different format for example.
We are now ready to use XMLHttpRequest.open() method since we have all three parameters available. Our getData() function should look like this.
function getData(){
var request = new XMLHttpRequest();
var rootURI = Xrm.Page.context.getServerUrl() + '/xrmservices/2011/organizationdata.svc';
var resourcePath = '/IncidentSet';
var query = '(guid\'' + getPalvelupyyntoId() + '\')';
request.open('GET', rootURI + resourcePath + query, true);
}Let's finish the XMLHttpRequest by adding two custom HTTP headers, telling what to do when the request is sent and finally sending it. Add these two custom headers that indicates the content type.
request.setRequestHeader('Accept', 'application/json');
request.setRequestHeader('Content-Type', 'application/json; charset=utf-8');
Yes we are using JSON (JavaScript Object Notation) for returning the data and for that you will need the JSON in JavaScript library. I also recommend to visit JSON website which nicely introduce you to JSON in a case you don't know what it is.
Now let's tell our request object how to act when it is sent. In other words when ever the ready state is changed. For that of course we will use good old onreadystatechange event. You can do this many ways but in this case I prefer using so called anonymous function which has no identifier. I leave the function body empty now for the sake of simplicity. We add the body later on.
request.onreadystatechange = function(){};
Then the final step is to send the request by using send() method.
request.send();
Our getData() function should look like this right now.
function getData(){
var request = new XMLHttpRequest();
var rootURI = Xrm.Page.context.getServerUrl() + '/xrmservices/2011/organizationdata.svc';
var resourcePath = '/IncidentSet';
var query = '(guid\'' + getId() + '\')';
request.open('GET', rootURI + resourcePath + query, true);
}
request.setRequestHeader('Accept', 'application/json');
request.setRequestHeader('Content-Type', 'application/json; charset=utf-8');
request.onreadystatechange = function(){};
request.send();
Basically if you would run the code above it would send the request and even run the anonymous function we attached to the event, but of course nothing significant wouldn't happen because the function body is empty. For that we as a final step we are going to add the function body in which you have the access to entity data.
Remember that the function is called every time when the ready state is changed. For that reason we have to make an if statement to check out what is the current state. We don't want to perform any functionalities if any data is not available. See readyState property documentation for more information.
if(this.readyState == 4){}
When all the data has been received (or when the ready state equals four) we have to check the status as well. See status property documentation for more information.
if(this.readyState == 4){
if(this.status == 200){
}
}
Now finally inside the second if statement you can start write your code you want to perform. In example below I'm demonstrating how to parse the data into a variable and then referring an individual datum.
if(this.readyState == 4){
if(this.status == 200){
var result = JSON.parse(request.responseText).d;
console.log(result.CustomerId.Name); // Printing a value to console
}
}
Now when you put all together it should look like this.
Final result
function getId(){return Xrm.Page.getAttribute('lookupfield').getValue()[0].id.replace('{','').replace('}','');
}
function getData(){
var request = new XMLHttpRequest();
var rootURI = Xrm.Page.context.getServerUrl() + '/xrmservices/2011/organizationdata.svc';
var resourcePath = '/IncidentSet';
var query = '(guid\'' + getId() + '\')';
request.open('GET', rootURI + resourcePath + query, true);
request.setRequestHeader('Accept', 'application/json');
request.setRequestHeader('Content-Type', 'application/json; charset=utf-8');
request.onreadystatechange = function(){
if(this.readyState == 4){
if(this.status == 200){
var result = JSON.parse(request.responseText).d;
console.log(result.CustomerId.Name); // Printing a value to console
}
}
};
request.send();
}
if(this.readyState == 4){
if(this.status == 200){
var result = JSON.parse(request.responseText).d;
console.log(result.CustomerId.Name); // Printing a value to console
}
}
};
request.send();
}
You can do very powerfull functionalities when chaining requests together. It's extremely handy approach for example when creating auto fills for forms. Don't forget to include JSON though. When you parse the result you can use for each loop to loop through all properties of it.
If you have any questions or so leave a comment below. Thank you.
