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 / Customer experience | Sales, Customer Insights,... / Create table and displ...
Customer experience | Sales, Customer Insights,...
Unanswered

Create table and display records in mscrm html dashboard

(0) ShareShare
ReportReport
Posted on by sandeepc 5,457

Hi, I have written code as below will this work or any changes reuqired in code to dispaly records

<html><head>
    <meta charset="utf-8">
    <!--<meta http-equiv="X-UA-Compatible" content="IE=edge">-->
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>Example of Bootstrap 3 Responsive Tables</title>
    <!--<link rel="stylesheet" href="">maxcdn.bootstrapcdn.com/.../bootstrap.min.css">
    <script type="text/javascript src="">ajax.googleapis.com/.../script>
    <script src="">maxcdn.bootstrapcdn.com/.../script>-->
    <script src="../WebResources/new_Jquery1.9.1" type="text/javascript"></script>
    <script src="../WebResources/new_XRMServiceToolKit.js" type="text/javascript"></script>
    <link href="../WebResources/new_bootstrap.min" rel="stylesheet">
    <link rel="stylesheet" type="text/css" href="">cdn.datatables.net/.../datatables.min.css">
    <script type="text/javascript" src="">cdn.datatables.net/.../script>

    <style>
        .btn_pos {
            padding: 10px;
        }

        .title h1 {
            color: #2490eb;
            font-size: 20px;
            /*border-bottom: 1px solid #2490eb;*/
            padding-bottom: 10px;
            margin-bottom: 25px;
        }

        .title .table-bordered th {
            background-color: #f8f8f8;
            color: #333333;
            font-size: 14px;
            font-weight: normal;
            padding: 5px;
        }

        .title .table-bordered td {
            padding: 5px;
            font-size: 14px;
        }

        .table-bordered {
            height: 26px;
            width: 100%;
        }

            .table-bordered .sem {
                width: 25%;
                /* width: 557px;*/
            }

            .table-bordered .mod {
                width: 12%;
                /* width: 557px;*/
            }

            .table-bordered .modl {
                width: 12%;
                /* width: 557px;*/
            }

            .table-bordered .secndmrks {
                width: 12%;
                /* width: 557px;*/
            }


            .table-bordered .input {
                width: 100%;
            }

        .container {
            padding: 0px;
        }

            .container h1 {
                background-color: #002050;
                color: ;
                font-size: 14pt;
                padding: 10px 10px;
                margin: 0px;
            }
.semester label {
            font-weight: bold;
            font-size: 14px;
            margin-top: 10px;
        }
        .module label {
            font-weight: bold;
            font-size: 14px;
            margin-top: 10px;
        }
        .module leader label {
            font-weight: bold;
            font-size: 14px;
            margin-top: 10px;
        }
        .second marker label {
            font-weight: bold;
            font-size: 14px;
            margin-top: 10px;
        }
    </style>

    <meta>
  <!-- Dynamically get table data from Student Placement History -->
 <script type="text/javascript">
        window.onload = function calling() {
            UploadData();
        }
      function UploadData() {

debugger;

var semester = '<fetch version="1.0" output-format="xml-platform" mapping="logical" distinct="false"><entity name="new_coursestreamdivisionsession"><attribute name="new_name"/><attribute name="createdon"/><attribute name="new_coursestreamdivisionsessionid"/><order descending="false" attribute="new_name"/><filter type="and"><condition attribute="new_sessionstatus" value="1" operator="eq"/></filter></entity></fetch>';
var semester = getFetch("new_coursestreamdivisionsession", semester);
var _html = "";
$.each(semester.value, function (index, res) {
_html += "<option value='" + res.new_coursestreamdivisionsessionid + "'>" + res.new_name + "</option>"; });



var module = '<fetch version="1.0" output-format="xml-platform" mapping="logical" distinct="false"   <entity name="new_subject_course_stream_mapping"><attribute name="new_subject_course_stream_mappingid"/><attribute name="new_name"/><attribute name="createdon"/><order descending="false" attribute="new_name"/><filter type="and"><condition attribute="new_session" operator="not-null"/></filter></entity></fetch>';
var module = getFetch("    new_subject_course_stream_mapping", module);
var _html = "";
$.each(module.value ,function (index, res) {
_html += "<option value='" + res.new_subject_course_stream_mappingid + "'>" + res.new_name + "</option>"; });

var module leader = '<fetch version="1.0" output-format="xml-platform" mapping="logical" distinct="false"  <entity name="new_lessonplan"><attribute name="new_lessonplanid"/><attribute name="new_name"/><attribute name="createdon"/><order descending="false" attribute="new_name"/><filter type="and"><condition attribute="new_coursesession" operator="not-null"/><condition attribute="new_subjectsetup" operator="not-null"/><condition attribute="new_subjecttype1" operator="eq" value="{72A07C07-9BE8-E811-A96C-000D3AF05828}" uitype="new_utility" uiname="Lecture"/><condition attribute="new_isfacultyload" operator="eq" value="0"/></filter></entity></fetch>';
var module leader = getFetch("new_lessonplan", module leader);
var _html = "";
$.each(moduleleader.value ,function (index, res) {
_html += "<option value='" + res.new_lessonplanid + "'>" + res.new_name + "</option>"; });

var second marker '<fetch version="1.0" output-format="xml-platform"mapping="logical" distinct="false"  <entity name="bam_employee"><attribute name="bam_employeeid"/><attribute name="bam_name"/><attribute name="createdon"/><order descending="false" attribute="bam_name"/><filter type="and"><condition attribute="sis_isacademic" value="1" operator="eq"/></filter></entity></fetch>';
var second marker = getFetch("bam_employee", second marker );
var _html = "";
$.each(employee.value ,function (index, res) {
_html += "<option value='" + res.new_bam_employeid + "'>" + res.bam_name + "</option>"; });



$('#SemesterComponent').append(_html);
$('#SubjectsetupComponent').append(_html);
$('#LessonPlanComponent').append(_html);
$('#EmployeeComponent').append(_html);


}

$(document).ready(function () {
$("#SemesterComponent", "SubjectsetupComponent","LessonPlanComponent","EmployeeComponent" ).change(function () {
$("#semestertable", "SubjectsetupComponent","LessonPlanComponent","EmployeeComponent").empty();

debugger;

$(this).parents("tr").remove();

var grid_id = $('#StudentSubjectComponent :selected').val();
var grid_id = $('#SubjectsetupComponent :selected').val();
var grid_id = $('#LessonPlanComponent :selected').val();
var grid_id = $('#EmployeeComponent :selected').val();
var uploadData;

if (grid_id != null) {

//var fetch = '<fetch version="1.0" output-format="xml-platform" mapping="logical" distinct="false" ><entity name="new_studentsubjectmarks" ><attribute name="new_coursestreamdivisionsessionid" /><attribute name="new_subjecttype1" /><attribute name="new_secondmarker" /><attribute name="new_marker1" /><attribute name="new_marker2" /><attribute name="new_marker3" /><attribute name="new_examtype" /><attribute name="new_name" /><attribute name="new_maximummarks1" /><attribute name="new_marksobtained1" /><attribute name="new_enrollmentno" /><order attribute="new_name" descending="false" /><filter type="and" ><condition attribute="new_isotherassesment" operator="eq" value="0" /><condition attribute="new_examination" operator="eq" uiname="Audits and Regulatory Compliance" uitype="new_examination" value="' + grid_id + '" /><condition attribute="new_appeared" operator="eq" value="1" /></filter><link-entity name="new_studentsubjectattendance" from="new_studentsubjectattendanceid" to="new_studentsubject" link-type="inner" alias="ae" ><link-entity name="new_studentcoursestreamdivisionsession" from="new_studentcoursestreamdivisionsessionid" to="new_studentsession" link-type="inner" alias="af" ><attribute name="new_examrollno" /><attribute name="new_student" /><attribute name="new_studentname" /><attribute name="new_rollnumber" /><link-entity name="new_student" from="new_studentid" to="new_student" link-type="inner" alias="st" ><attribute name="new_studentname" /><attribute name="new_firstname" /><attribute name="new_contactname" /><attribute name="new_contact" /><attribute name="sis_registrationid" /></link-entity></link-entity></link-entity></entity></fetch>';
var fetch = '<fetch version="1.0" output-format="xml-platform" mapping="logical" distinct="false"><entity name="new_coursestreamdivisionsession"><attribute name="new_name"/><attribute name="createdon"/><attribute name="new_coursestreamdivisionsessionid"/><order descending="false" attribute="new_name"/><filter type="and"><condition attribute="new_sessionstatus" value="1" operator="eq"/></filter></entity></fetch>
uploadData = getFetch("new_coursestreamdivisionsession", fetch);


var fetch = '<fetch version="1.0" output-format="xml-platform" mapping="logical" distinct="false"   <entity name="new_subject_course_stream_mapping"><attribute name="new_subject_course_stream_mappingid"/><attribute name="new_name"/><attribute name="createdon"/><order descending="false" attribute="new_name"/><filter type="and"><condition attribute="new_session" operator="not-null"/></filter></entity></fetch>';
uploadData = getFetch("new_coursestreamdivisionsession", fetch);
var fetch = '<fetch version="1.0" output-format="xml-platform" mapping="logical" distinct="false"  <entity name="new_lessonplan"><attribute name="new_lessonplanid"/><attribute name="new_name"/><attribute name="createdon"/><order descending="false" attribute="new_name"/><filter type="and"><condition attribute="new_coursesession" operator="not-null"/><condition attribute="new_subjectsetup" operator="not-null"/><condition attribute="new_subjecttype1" operator="eq" value="{72A07C07-9BE8-E811-A96C-000D3AF05828}" uitype="new_utility" uiname="Lecture"/><condition attribute="new_isfacultyload" operator="eq" value="0"/></filter></entity></fetch>';
uploadData = getFetch("new_coursestreamdivisionsession", fetch);
var fetch = '<fetch version="1.0" output-format="xml-platform"mapping="logical" distinct="false"  <entity name="bam_employee"><attribute name="bam_employeeid"/><attribute name="bam_name"/><attribute name="createdon"/><order descending="false" attribute="bam_name"/><filter type="and"><condition attribute="sis_isacademic" value="1" operator="eq"/></filter></entity></fetch>';
uploadData = getFetch("new_coursestreamdivisionsession", fetch);
}

var len = uploadData.value.length;

var head

var html = "";            
var tbody = "";
////////////////////
tbody = "<thead><tr><th valign='middle' style='width:25%'>Semester.</th><th style='text-center'>Module</th><th class='text-center' style='width:10%'>Module Leader</th><th class='text-center' style='width:10%'>Second Marker</th></tr></thead><tbody>";
///////////////
if (len > 0) {

for (i = 0; i < len; i++) {

var semester, module, module 1eader, second marker;

//var enrollNo = uploadMarks.value[i]["af_x002e_new_examrollno"];

var semester = uploadData.value[i]["new_sessionstatus@OData.Community.Display.V1.FormattedValue"];
var module = uploadData.value[i]["_new_session_value@OData.Community.Display.V1.FormattedValue"];
var moduleleader = uploadData.value[i]["_new_coursesession_value@OData.Community.Display.V1.FormattedValue"],["new_isfacultyload@OData.Community.Display.V1.FormattedValue"],["_new_subjectsetup_value@OData.Community.Display.V1.FormattedValue"],["_new_subjecttype1_value@OData.Community.Display.V1.FormattedValue"];
var secondmarker = uploadData.value[i]["sis_isacademic@OData.Community.Display.V1.FormattedValue"];




/////////////
html += "<tr><td class='nme' id='" + uploadData.value[i].new_coursestreamdivisionsessionid + "'>" + semester + "</td>
<td class='nme' id='" + uploadData.value[i].new_subject_course_stream_mappingid + "'>"  + module + "</td>
<td class='nme' id='" + uploadData.value[i].new_lessonplanid + "'>"  + module leader + "</td>
<td class='nme' id='" + uploadData.value[i].bam_employeeid + "'>" + second marker + "</td>
//////////////////

}

}

var examTable = tbody + html + "</tbody>";

var table = $("#semestertable").append(semesterTable);
var table = $("#Moduletable").append(subjectsetupTable);
var table = $("#ModuleLeadertable").append(lessonplanTable);
var table = $("#SecondMarkertable").append(secondmarkerTable);

if ($.fn.DataTable.isDataTable('#semestertable')) {
$('#semestertable').DataTable().destroy();
}
if ($.fn.DataTable.isDataTable('#subjectsetuptable')) {
$('#Moduletable').DataTable().destroy();
}
if ($.fn.DataTable.isDataTable('#lessonplantable')) {
$('#ModuleLeadertable').DataTable().destroy();
}
if ($.fn.DataTable.isDataTable('#secondmarkertable')) {
$('#SecondMarkertable').DataTable().destroy();

}


table.DataTable();

});

});

///////////////////////////
  function creatNewFeepaymnetTable() {
            debugger;
            var Semester = 0;
            var Module = 0;
            var ModuleLeader= 0;
            var SecondMarker = 0;
  var Tablellength = $($("#subjectExam_table","#subjectsetup_table","#Lessonplan_table","#Secondmarker_table").find('tr')).length;
            for (var i = 1; i < Tablellength - 1; i++) {
               var Semester =("#subjectExam_table").find('tr'))[1]).find('td')[4].innerHTML)
                var NewModule =("#subjectsetup_table").find('tr'))[1]).find('td')[4].innerHTML)
                 var NewModuleLeader =("#Lessonplan_table").find('tr'))[1]).find('td')[4].innerHTML)
                  var NewSecondMarker =("#Secondmarker_table").find('tr'))[1]).find('td')[4].innerHTML)

            $('#modaltable').html(_html);

            $("#myModal").modal("show");
            }

////////////////

        function getFetch(entity, fetchXML) {
            var req = new XMLHttpRequest();
            req.open("GET", window.parent.Xrm.Page.context.getClientUrl() + "/api/data/v8.2/" + entity + "s?fetchXml=" + fetchXML + "", false);
            req.setRequestHeader("OData-MaxVersion", "4.0");
            req.setRequestHeader("OData-Version", "4.0");
            req.setRequestHeader("Accept", "application/json");
            req.setRequestHeader("Prefer", "odata.include-annotations=\"*\"");
            req.send();
            if (req.status === 200) {
                return results = JSON.parse(req.response);
            } else {
                window.parent.Xrm.Utility.alertDialog(req.statusText);
            }
        }
        function checkObtainedMarks(obtainedMarks) {
            var inputMarks = obtainedMarks.value;
            var totalMarks = obtainedMarks.getAttribute("data");

            if (parseInt(inputMarks) > parseInt(totalMarks)) {
                alert("Obtained marks should not be greater than total marks. ");
                obtainedMarks.value = null;
            }
        }
        function idBasedOdata(EntityName, id) {
            var guid = id.replace('{', '').replace('}', '');
            var url = window.parent.Xrm.Page.context.getClientUrl() + "/api/data/v8.0/" + EntityName + "s(" + guid + ")?$filter= statecode eq 0";
            var req = new XMLHttpRequest();
            req.open("GET", url, 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.send();
            if (req.status == 200) {
                var results = JSON.parse(req.response);
                return results;
            }
            else
                return null;
        }
        function fieldBasedOdata(EntityName, fieldName, id) {
            var guid = id.replace('{', '').replace('}', '');
            var url = window.parent.Xrm.Page.context.getClientUrl() + "/api/data/v8.0/" + EntityName + "s?$filter=_" + fieldName + "_value eq " + guid + " and statecode eq 0";
            var req = new XMLHttpRequest();
            req.open("GET", url, 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.send();
            if (req.status == 200) {
                var results = JSON.parse(req.response);
                return results;
            }
            else
                return null;
        }
        function twofieldBasedOdataidvalue(EntityName, field1, field2, id1, value) {
            var guid1 = id1.replace('{', '').replace('}', '');
            var url = window.parent.Xrm.Page.context.getClientUrl() + "/api/data/v8.0/" + EntityName + "s?$filter=_" + field1 + "_value eq " + guid1 + " and " + field2 + " eq " + value + " and statecode eq 0";
            var req = new XMLHttpRequest();
            req.open("GET", url, 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.send();
            if (req.status == 200) {
                var results = JSON.parse(req.response);
                return results;
            }
            else
                return null;
        }
    </script>
    
    <style>
        #WebResource_Componentdb6474d {
            height: 700px !important;
        }

        .headblue {
            padding: 5px 10px;
            float: left;
            width: 100%;
            background-color: #428bca;
            color: ;
            font-size: 12px;
            padding-top: 10px;
            padding-bottom: 10px;
            font-family: 'Segoe UI';
        }

            .headblue h3 {
                padding: 0px;
                margin: 0px;
                font-size: 14px;
            }

        .table-bordered > thead > tr > td, .table-bordered > tbody > tr > td, .table-bordered > tfoot > tr > td {
            border: 1px solid #efefef !important;
            text-align: left;
        }

        .table-bordered > thead > tr > th, .table-bordered > tbody > tr > th, .table-bordered > tfoot > tr > th {
            border: 1px solid #dddddd !important;
            text-align: left;
        }

        Iframe {
            width: 100%;
            display: block;
        }

        .table-bordered {
            border: 1px solid #6589e6 !important;
        }

        input.form-control.input-sm {
            border: 1px solid #eee;
            background: #fff;
        }

        .btn-sm, .btn-group-sm > .btn {
            padding: 7px 8px !important;
        }

        .table > tbody > tr > td, .table > tfoot > tr > td {
            padding: 4px !important;
            line-height: 29px !important;
            font-size: 12px !important;
        }

        .table > thead > tr > th {
            padding: 4px !important;
            line-height: 29px !important;
            font-size: 12px !important;
        }

        th {
            background-color: #fffefe;
            color: #666666;
            padding: 4px;
            font-weight: bold;
            font-size: 12px;
        }

        td {
            background-color: white;
            color: #636363;
        }

        .btn-primary {
            color: #fff;
            background-color: #ca4242;
            border-color: #ca4242;
        }

        .scroll-list {
            padding: 0px;
            height: 250px;
            overflow-y: scroll;
        }

        .headblue .btn-primary {
            color: #333333;
            background-color: #eee;
            border-color: #333333;
            font-size: 12px;
        }

        .headblue .btn {
            padding: 2px 5px;
        }

        select label {
            top: -14px !important;
            font-size: 14px !important;
            color: #2196f3 !important;
        }
    </style>
    <style>
        input[type="radio"], input[type="checkbox"] {
            line-height: normal;
            position: relative;
            margin: 6px 0px 0px -20px;
            padding: 0px;
        }
    </style>
    <meta charset="utf-8">
    <title>Second Markings</title>
    <style type="text/css">
        P {
            margin: 0;
        }
    </style>
<meta><meta><meta><meta>

    <meta><meta><meta><meta><meta><meta><meta><meta><meta><meta><meta><meta><meta><meta><meta></head><body dir="LTR" onfocusout="parent.setEmailRange();" lang="en-US" style="overflow-wrap: break-word;"><div class="container title" style="width: 100%; margin: 0px; font-family: undefined;">
        <div class="modal-dialog modal-lg" style="margin:15px 0px;">
        </div>
                <!-- Modal content-->
                <div class="modal-content">
                    <div class="modal-header">
                        <button type="button" class="close" data-dismiss="modal">×</button>
                        <h4 class="modal-title">Second Markings</h4>
                    </div>
                    <div class="modal-body">
                        <div id="modaltable">
                                   </div>
                    <div class="modal-footer">
                        <button type="button" class="btn btn-default" data-dismiss="modal">Approve</button>
                        <button id="newInstalment" class="btn btn-primary" onclick="validation()">Submit</button>
                    </div>
                </div>
            </div>
        </div>
        <!--<div class="clearfix"></div>
        <div class="container"  style="display:none" id="divtable">-->
        <!--</div>-->
  
<meta></body></html>

  • sandeepc Profile Picture
    sandeepc 5,457 on at
    RE: Create table and display records in mscrm html dashboard

    after adding this code  <script>
    <script>
    array = [ Semester, Module, Module Leader, Second Marker ];
    for (index = 0; index < array.length; index++) {
        console.log(array[index]);
    }
    </script>

    it s shwoing like this

    pastedimage1571115172749v1.png

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

🌸 Community Spring Festival 2025 Challenge Winners! 🌸

Congratulations to all our community participants!

Adis Hodzic – Community Spotlight

We are honored to recognize Adis Hodzic as our May 2025 Community…

Kudos to the April Top 10 Community Stars!

Thanks for all your good work in the Community!

Leaderboard > Customer experience | Sales, Customer Insights, CRM

#1
Daivat Vartak (v-9davar) Profile Picture

Daivat Vartak (v-9d... 225 Super User 2025 Season 1

#2
Muhammad Shahzad Shafique Profile Picture

Muhammad Shahzad Sh... 83

#3
Vahid Ghafarpour Profile Picture

Vahid Ghafarpour 78 Super User 2025 Season 1

Overall leaderboard

Featured topics

Hide selecting Contact for potential customer when creating quote

Product updates

Dynamics 365 release plans