PowerApps, Power Automate, SharePoint, Dynamics 365, Azure, C#: Dynamics 365: CRUD Operations-4 (Read Item)

Monday, January 31, 2022

Dynamics 365: CRUD Operations-4 (Read Item)

Hello Friends,

Welcome back with another post on Dynamics 365. This post is the 4th part of CRUD operations.

In last post, we have created an item in Account Entity.

Dynamics 365: CRUD Operations-1 (Basic Preparations)

Dynamics 365: CRUD Operations-2 (Retrieve All Items)

Dynamics 365: CRUD Operations-3 (Create Item)

Now, we will learn about how to reading an individual item from D365 >> Account entity.

Below is the complete HTML. This HTML includes code of previous post as well. You may copy/paste this entire HTML.

<html>
    <head></head>
    <body onfocusout="parent.setEmailRange();" style="overflow-wrap: break-word;">
        <meta charset="UTF-8">
        <link rel="stylesheet" href="https://static2.sharepointonline.com/files/fabric/office-ui-fabric-js/1.4.0/css/fabric.min.css">
        <link rel="stylesheet" href="https://static2.sharepointonline.com/files/fabric/office-ui-fabric-js/1.4.0/css/fabric.components.min.css">
        <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">
        <link href="https://unpkg.com/bootstrap-table@1.18.1/dist/bootstrap-table.min.css" rel="stylesheet">
        
        <script src="https://static2.sharepointonline.com/files/fabric/office-ui-fabric-js/1.4.0/js/fabric.min.js"></script>
        <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
        <script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
        <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js" integrity="sha384-UO2eT0CpHqdSJQ6hJty5KVphtPhzWj9WO1clHTMGa3JDZwrnQq4sF86dIHNDz0W1" crossorigin="anonymous"></script>  
        <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js" integrity="sha384-JjSmVgyd0p3pXB1rRibZUAYoIIy6OrQ6VrjIEaFf/nJGzIxFDsf4x0xIM+B07jRM" crossorigin="anonymous"></script>
        <script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
        <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js" integrity="sha384-UO2eT0CpHqdSJQ6hJty5KVphtPhzWj9WO1clHTMGa3JDZwrnQq4sF86dIHNDz0W1" crossorigin="anonymous"></script>
        <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js" integrity="sha384-JjSmVgyd0p3pXB1rRibZUAYoIIy6OrQ6VrjIEaFf/nJGzIxFDsf4x0xIM+B07jRM" crossorigin="anonymous"></script>
        <script src="https://unpkg.com/bootstrap-table@1.16.0/dist/bootstrap-table.min.js"></script>
        <script src="https://unpkg.com/tableexport.jquery.plugin/tableExport.min.js"></script>
        <style type="text/css">
            .footer {
                position: fixed;
                bottom: 0;
                right: 0;
                padding-bottom: 10px;
                padding-right: 10px;
            }
    
            .footerButton {
                width: 150px;
            }
        </style>
        <div>
            <table id="tblCreateRecord" style="width: 100%;">
                <tr>
                    <td style="width: 50%;">Account Name</td>
                    <td style="width: 5%;">:</td>
                    <td style="width: 45%;"><input type="text" id="txtAccountName"></td>
                </tr>
                <tr>
                    <td style="width: 50%;">Primary Contact Person (ID)</td>
                    <td style="width: 5%;">:</td>
                    <td style="width: 45%;"><input type="text" id="txtPrimaryContactPersonID"></td>
                </tr>
                <tr>
                    <td style="width: 50%;">Account Category Code (Preferred Customer-1 / Standard-2)</td>
                    <td style="width: 5%;">:</td>
                    <td style="width: 45%;"><input type="text" id="txtAccountCategoryCode"></td>
                </tr>
                <tr>
                    <td style="width: 50%;">Annual Revenue</td>
                    <td style="width: 5%;">:</td>
                    <td style="width: 45%;"><input type="text" id="txtAnnualRevenue"></td>
                </tr>
                <tr>
                    <td style="width: 50%;">Primary Phone</td>
                    <td style="width: 5%;">:</td>
                    <td style="width: 45%;"><input type="text" id="txtPrimaryPhone"></td>
                </tr>
                <tr>
                    <td colspan="3"><input type="button" onclick="fnCreateRecord();return false;" value="Create Record"/></td>
                </tr>
                
            </table>
        </div>
        <div>
            <table id="table" data-search="true" data-header-style="headerStyle" data-page-size="25">
                <thead>
                    <tr>
                        <th data-field="id" data-visible="false" data-checkbox="true">Id</th>
                        <th data-field="name" data-sortable="true">Full Name</th>
                        <th data-field="mainphone" data-sortable="true">Main Phone</th>
                        <th data-field="primaryemail" data-sortable="true">EMail (Primary)</th>
                        <th data-field="primarycontact" data-sortable="true">Primary Contact</th>
                        <th data-field="primarycontactname" data-sortable="true">Primary Contact Name</th>
                        <th data-field="readitem" data-sortable="false">Read</th>
                    </tr>
                </thead>
            </table>
        </div>
    </body>
    <script type="text/javascript">
        $(document).ready(function(){
            fnGetAllAccounts();
        });
        function fnGetAllAccounts() 
        {
            //var query = '?$select=accountcategorycode,address1_addressid,address1_longitude,donotphone,name,_primarycontactid_value,revenue';
            var query = '?$select=accountid,name,telephone1,emailaddress1,_primarycontactid_value';
            window.parent.Xrm.WebApi.online.retrieveMultipleRecords("account", query).then(
            function success(accounts) 
            {
                var results = accounts.entities;
                var accountRecords = [];  
                results.forEach(function (result, index, array) 
                {
                    var accountid = result["accountid"];
                    var name = result["name"];
                    var telephone = result["telephone1"];
                    var emailaddress = result["emailaddress1"];
                    var primarycontactid = result["_primarycontactid_value"];
                    var primarycontactname = result["_primarycontactid_value@OData.Community.Display.V1.FormattedValue"];
                    
                    var accountRecord = {};  
                    accountRecord =  
                    {  
                        'id': accountid,
                        'name': name,
                        'account': accountid,
                        'mainphone': telephone,
                        'primaryemail':emailaddress,
                        'primarycontact':primarycontactid,
                        'primarycontactname':primarycontactname,
                        'readitem':'<a href="javascript:void(0);" onclick="fnReadRecord(\'' + accountid + '\');return false;">Read</a>'
                    }  
                    accountRecords.push(accountRecord);  
                });
                $('#table').bootstrapTable({ data: accountRecords });  
            },
            function (error) {
                console.log(error.message);
                reject(Error(error.message));
            });
        }

        function fnCreateRecord()
        {
            var entityData =
            {
                "name": $('#txtAccountName').val(),
                "primarycontactid@odata.bind": "/contacts(" + $('#txtPrimaryContactPersonID').val() + ")", //--- Lookup --- Display Text = Primary Contact
                "accountcategorycode": $('#txtAccountCategoryCode').val(),     // Option Set --- Display Text = Category
                "revenue": parseFloat($('#txtAnnualRevenue').val()),        // Currency (money type) ---Display Text = Annual Revenue
                "telephone1":$('#txtPrimaryPhone').val()
            }
            window.parent.Xrm.WebApi.createRecord("account", entityData).then(
                function success(result) {
                    //Success - No Return Data
                    alert("Account created successfully.");
                },
                function (error) {
                    alert(error.message);
                }
            );
        }

        function fnReadRecord(accountID)
        {
            //var query = '?$select=accountcategorycode,address1_addressid,address1_longitude,donotphone,name,_primarycontactid_value,revenue';
            var query = '?$select=accountid,name,accountcategorycode,revenue,telephone1,_primarycontactid_value';
            window.parent.Xrm.WebApi.online.retrieveRecord("account",accountID, query).then(
            function success(result) 
            {debugger;
                if(result != null)
                {
                    $('#txtAccountName').val(result["name"]);
                    $('#txtPrimaryContactPersonID').val(result["_primarycontactid_value"]);
                    $('#txtAccountCategoryCode').val(result["accountcategorycode"]);
                    $('#txtAnnualRevenue').val(result["revenue"]);
                    $('#txtPrimaryPhone').val(result["telephone1"]);
                }
            },
            function (error) {
                console.log(error.message);
                reject(Error(error.message));
            });
        }
    </script>
</html>

You need to copy/paste this HTML in Web Resource file we discussed in previous post.

Save the Web Resource file and then publish it. Now refresh the D365 page (Ctrl + F5).

Here we go!

Now, click on Read button of any record. Let's hit for the first record.

Yay!, the record details have been loaded into the input boxes.
This way, you can read the individual record itself.
The API used is:-

window.parent.Xrm.WebApi.retrieveRecord

In Next post, we will try to update the record in Account Entity.
Next Post Link-

Dynamics 365: CRUD Operations-5 (Update Item)

With this, I am concluding this post.

Happy Coding !!!

Will see you again with some new topics.

Stay Safe !

Stay Healthy !

PowerApps, Power Automate, SharePoint, Dynamics 365, Azure, C#

Header Navigation

Monday, January 31, 2022

Dynamics 365: CRUD Operations-4 (Read Item)

No comments:

Post a Comment