Call Dynamics 365 Web API Using JavaScript - Using XMLHttpRequest

Requirement is to create record for custom entity using dynamics 365 CRM Web API.


1. I have created one custom entity i.e. Person Entity.
    Display Name is "Person"
    Logical Name is "new_person"
    Entity Name is "new_persons" in "ODataV4Metadata.xml"

2. Once you have created any custom entity, You have to download ODataV4Metadata.xml file from Developer resources. Open ODataV4Metadata.xml and search for your entity name.

3. Custom entity is as below. Entity has some custom attributes such as
new_firstname
new_lastname
new_dob
new_age
new_gender
new_indian
new_salary
new_technology



4. I have included two web resource files in solution.
CreatePersonXhtml.html => This file renders html markup in dynamics 365 form.
CreatePersonXhtml.js => To call the Web API.

5. You can include above web resource in any custom or system form as per your requirement.

6. CreatePersonXhtml.html as below

<html lang="en" xmlns="http://www.w3.org/1999/xhtml">
<head>
    <meta charset="utf-8" />
    <title>Create Person</title>
    <script src="ClientGlobalContext.js.aspx" type="text/javascript"></script>
    <script type="text/javascript" src="https://4jio.crm.dynamics.com//WebResources/new_CreatePersonXhtml.js"></script>
</head>
<body>
    <table>
        <tr>
            <td>First Name</td>
            <td><input type="text" name="firstName" id="firstName" /></td>
        </tr>
        <tr>
            <td>Last Name</td>
            <td><input type="text" name="lasttName" id="lasttName" /></td>
        </tr>
        <tr>
            <td>DOB</td>
            <td><input type="text" name="DOB" id="DOB" /></td>
        </tr>
        <tr>
            <td>Age</td>
            <td><input type="text" name="Age" id="Age" /></td>
        </tr>
        <tr>
            <td>Gender</td>
            <td>
                <input type="radio" name="Gender" onclick="displayRadioValue('Gender')" value="100000000" />
                <label>Male</label><br />
                <input type="radio" name="Gender" onclick="displayRadioValue('Gender')" value="100000001" />
                <label>Female</label>
            </td>
        </tr>
        <tr>
            <td>Technologies</td>
            <td>
                <input type="checkbox" name="Technologies" id="C#" onclick="displayRadioValue('Technologies')" value="100000000" />
                <label>C#</label>
                <br />
                <input type="checkbox" name="Technologies" id="Asp.Net" onclick="displayRadioValue('Technologies')" value="100000001" />
                <label>Asp.Net</label>
            </td>
        </tr>
        <tr>
            <td>Indian</td>
            <td>
                <input type="radio" name="Indian" onclick="displayRadioValue('Indian')" value="true" />
                <label>Yes</label>
                <br />
                <input type="radio" name="Indian" onclick="displayRadioValue('Indian')" value="false" />
                <label>No</label>
            </td>
        </tr>
        <tr>
            <td>Salary</td>
            <td><input type="text" name="Salary" id="Salary" /></td>
        </tr>
        <tr>
            <td colspan="2"><button id="buttons" onclick="CreatePerson()">Save</button></td>
        </tr>
    </table>
</body>
</html>

CreatePersonXhtml.js

var Gender;
var Indian;
var Technologies = "";

function CreatePerson() {
    var data =
    {
        "new_firstname": document.getElementById("firstName").value,
        "new_lastname": document.getElementById("lasttName").value,
        "new_dob": document.getElementById("DOB").value,
        "new_age": document.getElementById("Age").value,
        "new_gender": Gender,
        "new_indian": Indian,
        "new_salary": parseInt(document.getElementById("Salary").value),
        "new_technology": Technologies
    }

    debugger;

    var req = new XMLHttpRequest();
    req.open("POST", Xrm.Page.context.getClientUrl() + "/api/data/v9.1/new_persons", false);
    req.setRequestHeader("OData-MaxVersion", "4.0");
    req.setRequestHeader("OData-Version", "4.0");
    req.setRequestHeader("Accept", "application/json");
    req.setRequestHeader("Content-Type", "application/json; charset=utf-8");
    req.setRequestHeader("Prefer", "odata.include-annotations=\"*\"");
    req.onreadystatechange = function () {
        if (this.readyState === 4) {
            req.onreadystatechange = null;
            if (this.status === 204) {
                var uri = this.getResponseHeader("OData-EntityId");
                var regExp = /\(([^)]+)\)/;
                var matches = regExp.exec(uri);
                var newEntityId = matches[1];
            } else {
                Xrm.Utility.alertDialog(this.statusText);
            }
        }
    };
    req.send(JSON.stringify(data));
}

function displayRadioValue(ElementName) {
    var ele = document.getElementsByName(ElementName);
    debugger;
    for (i = 0; i < ele.length; i++) {
        if (ele[i].checked) {
            if (ElementName == 'Gender') {
                Gender = ele[i].value;
            }
            else if (ElementName == 'Indian') {
                Indian = ele[i].value;
            }
            else if (ElementName == 'Technologies') {
                if (Technologies === "") {
                    Technologies = ele[i].value;

                } else {
                    if (!Technologies.includes(ele[i].value)) {
                        Technologies += "," + ele[i].value;
                    }
                }
            }
        }
    }

}

7. Open the form where you have added above html web resource and click on Save button to call the Web API.

8. You can debug the code to understand it well.


Comments

Post a Comment

Popular posts from this blog

Dynamics 365: Call global action with input and output parameters through JavaScript using XMLHttpRequest

Image
1. I have created below action in dynamics 365. 2. new_CreatePerson action will create a new record for custom entity. 3. 4. Below is the JavaScript code to call the action. var   firstName ; var   lastName ; function   CreatePerson () {      debugger ;      firstName  =  document . getElementById ( "firstName" ). value ;      lastName  =  document . getElementById ( "lasttName" ). value ;      var   data  =     {          "new_name" :   firstName  +  " "  +  lastName ,          "new_firstname" :   document . getElementById ( "firstName" ). value ,          "new_lastname" :   document . getElementById ( "lasttName" ). value     }      debugger ;      var   req  =  new   XMLHttpRequest ();      req . open ( "POST" ,  Xrm . Page . context . getClientUrl () +  "/api/data/v9.1/new_CreatePerson" ,  true );      req . setRequestHeader ( "O
Read more

Create related entity records along with the primary record in D365 using Web API Javascript - XMLHttpRequest

You have Person and Person Address custom entity. you wanted to call web API to create records for person and person address. You have added required web resources in CRM. var Gender; var Indian; var Technologies = ""; var firstName; var lastName; function CreatePerson() {     firstName = document.getElementById("firstName").value;     lastName = document.getElementById("lastName").value;     var data =     {         "new_name": firstName + " " + lastName,         "new_firstname": document.getElementById("firstName").value,         "new_lastname": document.getElementById("lastName").value,         "new_dob": document.getElementById("DOB").value,         "new_age": document.getElementById("Age").value,         "new_gender": Gender,         "new_indian": Indian,         "new_salary": parseInt(document.getElemen
Read more