This article follows on from Getting optionset lists to use in a webresource HTML form and Creating an action to call from Javascript in a HTML form and will show how to actually call the action from javascript.
In the previous articles we created a simple plugin, and then connected that to an action in Dynamics 365 so our plugin would be called each time the action was executed.
The action was called new_GetOptionSetData and the first thing we need to do is define this in the javascript code. This is going to be simple as in this instance we aren’t passing any values into the action, I will expand on how to do this in a later article.
function new_GetOptionSetData() {
this.getMetadata = function () { return { boundParamter: null, operationType: 0, operationName: "new_GetOptionSetData"};};
}
I have created a request object with the same name as the action in CRM, and set the operationName value.
function ExecuteAction(requestObject) {
Xrm.WebApi.execute(requestObject).then(function (result) {
var response = result["responseText"];
var data = JSON.parse(response);
addToList(data.Values);
},
function (error) {
console.log(error.message);
});
}
The V9 javascript API makes it really simple to execute the action, no more messing around with MSXMLHTTP or other ‘native’ methods, a single line of code can now be used. Here we pass in the previously defined requestobject, and handle the success branch and the error branch. You may want to improve the error handling but for this example I will just add a message to the console (accessible in the web page by pressing F12). For a successful call the results are returned in the result[“responseText”] variable and this needs to be parsed.
One or more JSON arrays will be returned as these are accessed using the same identifier that you defined earlier inside this action. In our case the output variable was defined and called Values.
The action is executed Asynchronously so the population of the list is handled in the success branch.
This is a simple function in this case to populate a drop down list with the optionset list from the Industry Type field on Account.
function addToList(jsonData) {
var ctrl = document.getElementById("ctrl_codes");
ctrl.options.length = 0;
var data = JSON.parse(jsonData);
var docfrag = document.createDocumentFragment();
for (var i = 0; i < data.options.length; i++) {
var item = data.options[i];
docfrag.appendChild(new Option(item.text, item.value));
}
ctrl.appendChild(docfrag);
}
There are many ways to handle the data, but this is just for example.
It is important that you have the correct XRM context otherwise the API calls will not work. As this will be an embedded webresource on a CRM form, it is a simple matter to get the XRM value from the parent. In this case I do it in an initialisation function.
var Xrm = null;
function go() {
Xrm = parent.Xrm;
if (Xrm == null) throw ("No parent Xrm found");
ExecuteAction(new new_GetOptionSetData());
}
The first step in the function is to read the Xrm object from the parent page and set it to a global variable to be used in the page.
This is quite a straightforward way to get the optionset values and more than one set can be returned inside the action.
The complete code for the example page is below.
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title></title>
</head>
<body onload="go()">
<strong>Industry Code</strong>
<select id="ctrl_codes">
<option value="Select a value....">Select a value</option>
</select>
</body>
<script type="text/javascript">
var Xrm = null;
function go() {
Xrm = parent.Xrm;
if (Xrm == null) throw ("No parent Xrm found");
ExecuteAction(new new_GetOptionSetData());
}
function addToList(jsonData) {
var ctrl = document.getElementById("ctrl_codes");
ctrl.options.length = 0;
var data = JSON.parse(jsonData);
var docfrag = document.createDocumentFragment();
for (var i = 0; i < data.options.length; i++) {
var item = data.options[i];
docfrag.appendChild(new Option(item.text, item.value));
}
ctrl.appendChild(docfrag);
}
function new_GetOptionSetData() {
this.getMetadata = function () { return { boundParamter: null, operationType: 0, operationName: "new_GetOptionSetData"};};
}
function ExecuteAction(requestObject) {
Xrm.WebApi.execute(requestObject).then(function (result) {
var response = result["responseText"];
var data = JSON.parse(response);
addToList(data.Values);
},
function (error) {
console.log(error.message);
});
}
</script>
</html >