web
You’re offline. This is a read only version of the page.
close
Skip to main content

Notifications

Announcements

No record found.

News and Announcements icon
Community site session details

Community site session details

Session Id :
Dynamics 365 Community / Forums / Microsoft Dynamics CRM (Archived) / how to populate CRM re...
Microsoft Dynamics CRM (Archived)

how to populate CRM record attribute data into a html page on a button click

(0) ShareShare
ReportReport
Posted on by harish reddy 10

Hi,

I had a HTML Webresource, which opens a html page in a separate window on a button click(located on record).

I had to load some attributes data from the CRM record into the Html page on the button click, where i had input field in the table of html page.

*This post is locked for comments

I have the same question (0)
  • RaviKashyap Profile Picture
    RaviKashyap 55,410 Moderator on at

    Hi Harish,

    There is already a sample code available in SDK on how to pass values to HTML web resource. Refer this-

    msdn.microsoft.com/.../gg327945.aspx

    Hope this helps.

  • Verified answer
    gdas Profile Picture
    gdas 50,091 Moderator on at

    Hi Harish ,

    You can open HTML window  using Xrm.Utility.openWebResource and pass parameter. Check here -

    https://msdn.microsoft.com/en-us/library/jj602956.aspx?f=255&MSPPError=-2147217396#BKMK_OpenWebResource

  • harish reddy Profile Picture
    harish reddy 10 on at

    Hi Ravi,

    In this code we can pass multiple data parameters manually from JS websource. I want to get the Record multiple attributes data and set them in a table in HTML page. The above code doesnot help me.

    Thanks for your answer.

  • Suggested answer
    Pawar Pravin Profile Picture
    Pawar Pravin 5,237 on at

    Hi Harish,

    I can suggest you to pass to guid as filter criteria if you want to filter multiple records else retrieve using rest web api on html page.

    I'm sharing working lines of code which is working for me.

    <html lang="en" xmlns="www.w3.org/.../xhtml&quot;>

    <head>

       <meta charset="utf-8" />

       <title></title>

       <style>

           #myTable {

               border-collapse: collapse;

               text-align: left;

           }

               #myTable th,

               td {

                   padding: 15px;

                   text-align: left;

                   border-bottom: 1px solid #ddd;

               }

               #myTable tr:hover {

                   background-color: #f5f5f5;

               }

       </style>

    </head>

    <body style='word-wrap: break-word;' onload='createView();'>

       <iframe id="txtArea1" style='display:none'></iframe>

       <!--<input type="button" onclick="createView();" />-->

       <meta http-equiv="x-ua-compatible" content="IE=9,IE=10,IE=11">

       <meta content="text/html; charset=utf-8" http-equiv="Content-Type">

       <script src="ClientGlobalContext.js.aspx" type="text/javascript"></script>

       <script src="sc_json2.js" type="text/javascript"></script>

       <script type="text/javascript" language="javascript">

           function createView() {

               debugger;

               try {

                   var customerobject = new Array();

                   customerobject[0] = new Object();

                   var lookupItem = parent.Xrm.Page.getAttribute("contact").getValue();

                   if (lookupItem != null && lookupItem != "" && lookupItem != "undefined") {

                       var guid = lookupItem[0].id.replace('{', '').replace('}', '');

                       var x = document.getElementById("myTable").rows.length;

                       if (x > 1) {

                           var table1 = document.getElementById("myTable");

                           for (var k = x - 1; k > 0; k--) {

                               table1.deleteRow(k);

                           }

                       }

                       var req = new XMLHttpRequest();

                       req.open("GET", Xrm.Page.context.getClientUrl() + "/api/data/v8.0/incidents?$select=caseorigincode,_contactid_value,complaintstatus,_ownerid_value,contact_value,createdon,vendor_name_account_value,title&$filter=contact_value eq " + guid, 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=\"OData.Community.Display.V1.FormattedValue\"");

                       req.onreadystatechange = function() {

                           if (this.readyState === 4) {

                               req.onreadystatechange = null;

                               if (this.status === 200) {

                                   var results = JSON.parse(this.response);

                                   if (results.value.length > 0) {

                                       for (var i = 0; i < results.value.length; i++) {

                                           var title = results.value[i]["title"];

                                           var caseorigincode = results.value[i]["caseorigincode"];

                                           var caseorigincode_formatted = results.value[i]["caseorigincode@OData.Community.Display.V1.FormattedValue"];

                                           var complaintstatus = results.value[i]["complaintstatus"];

                                           var complaintstatus_formatted = results.value[i]["complaintstatus@OData.Community.Display.V1.FormattedValue"];

                                           var contact_value = results.value[i]["contact_value"];

                                           var contact_value_formatted = results.value[i]["contact_value@OData.Community.Display.V1.FormattedValue"];

                                           var table = document.getElementById("myTable");

                                           var j = 0;

                                           j = i + 1;

                                           var row = table.insertRow(j);

                                           var cell1 = row.insertCell(0);

                                           var cell2 = row.insertCell(1);

                                           var cell3 = row.insertCell(2);

                                           var cell4 = row.insertCell(3);

                                           var cell5 = row.insertCell(4);

                                           var cell6 = row.insertCell(5);

                                           var cell7 = row.insertCell(6);

                                           var cell8 = row.insertCell(7);

                                           cell1.innerHTML = j;

                                           if (title != null && title != 'undefined')

                                               cell2.innerHTML = title;

                                           if (createdon != null && createdon != 'undefined')

                                               cell3.innerHTML = createdon.getDate() + "-" + createdon.getMonth() + "-" + createdon.getFullYear();

                                           if (contact_value_formatted != null && contact_value_formatted != 'undefined')

                                               cell4.innerHTML = contact_value_formatted;

                                           if (vendor_name_account_value_formatted != null && vendor_name_account_value_formatted != 'undefined')

                                               cell5.innerHTML = vendor_name_account_value_formatted;

                                           if (caseorigincode_formatted != null && caseorigincode_formatted != 'undefined')

                                               cell6.innerHTML = caseorigincode_formatted;

                                           if (complaintstatus_formatted != null && complaintstatus_formatted != 'undefined')

                                               cell7.innerHTML =complaintstatus_formatted;

                                           if (_ownerid_value_formatted != null && _ownerid_value_formatted != 'undefined')

                                               cell8.innerHTML = _ownerid_value_formatted;

                                       }

                                   }

                               } else {

                                   // alert(this.statusText);

                               }

                           }

                       };

                       req.send();

                   }

               } catch (error) {

                   alert("Error occured in createView function... " + error.message);

               }

           }

       </script>

       <table id="myTable">

           <tr>

               <td style='font-weight:bold'>Sr No</td>

               <td style='font-weight:bold'>Complaint Ref. No</td>

               <td style='font-weight:bold'>Created On</td>

               <td style='font-weight:bold'>Consumer Name</td>

               <td style='font-weight:bold'>Name</td>

               <td style='font-weight:bold'>Channel of Complaint</td>

               <td style='font-weight:bold'>Complaint Status</td>

           </tr>

       </table>

       <br>

    </body>

    </html>

    Regards,

    Pravin

  • Suggested answer
    RaviKashyap Profile Picture
    RaviKashyap 55,410 Moderator on at

    Hi Harish,m

    Then you can just access the attribute by appending window.parent.opener.Xrm.Page.getAttribute("name").getValue();

    Hope this helps.

  • Suggested answer
    Mahendar Pal Profile Picture
    Mahendar Pal 45,095 on at

    Hi,

    You have options to pass only id and query rest of the field in your html page on page load using Web API or you can pass all the parameters using parameters in the url.

    http://himbap.com/blog/?p=2852

    http://dynamicscrmcoe.com/passing-custom-parameters-web-resources/

  • Suggested answer
    Summer Garg Profile Picture
    Summer Garg 585 on at

    Hi harish,

    check this below article. This article show how to bind the CRM data into HTML table form. You can modify the code as per your requirement.

    crmhub.blogspot.com/.../use-jquery-datatable-to-create-custom-subgrid-in-MS-Dynamic-CRM.html  

  • Yash Trivedi CRM Profile Picture
    Yash Trivedi CRM 351 on at

    hello pravin

    Here var caseorigincode = results.value[i]["caseorigincode"]; in this I am not able to get lookup value and option setvalue in variable...inlookup it give undefined. even though it's exist....can you help me out...how should I get...

  • Suggested answer
    ajyendra Profile Picture
    ajyendra 1,738 on at

    var caseorigincode_formatted = results.value[i]["caseorigincode@OData.Community.Display.V1.FormattedValue"];

  • Suggested answer
    ajyendra Profile Picture
    ajyendra 1,738 on at

    For Lookup value check this blog

    community.dynamics.com/.../get-lookup-value-from-other-entity-and-set-it-on-the-form-using-web-api-in-microsoft-dynamics-crm

Under review

Thank you for your reply! To ensure a great experience for everyone, your content is awaiting approval by our Community Managers. Please check back later.

Helpful resources

Quick Links

Responsible AI policies

As AI tools become more common, we’re introducing a Responsible AI Use…

Neeraj Kumar – Community Spotlight

We are honored to recognize Neeraj Kumar as our Community Spotlight honoree for…

Congratulations to the November Top 10 Community Leaders!

These are the community rock stars!

Leaderboard > 🔒一 Microsoft Dynamics CRM (Archived)

#1
SA-08121319-0 Profile Picture

SA-08121319-0 4

#1
Calum MacFarlane Profile Picture

Calum MacFarlane 4

#3
Alex Fun Wei Jie Profile Picture

Alex Fun Wei Jie 2

Last 30 days Overall leaderboard

Featured topics

Product updates

Dynamics 365 release plans