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,085

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,085 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

Announcing Our 2025 Season 1 Super Users!

A new season of Super Users has arrived, and we are so grateful for the daily…

Vahid Ghafarpour – Community Spotlight

We are excited to recognize Vahid Ghafarpour as our February 2025 Community…

Tip: Become a User Group leader!

Join the ranks of valued community UG leaders

Leaderboard

#1
André Arnaud de Calavon Profile Picture

André Arnaud de Cal... 292,516 Super User 2025 Season 1

#2
Martin Dráb Profile Picture

Martin Dráb 231,321 Most Valuable Professional

#3
nmaenpaa Profile Picture

nmaenpaa 101,156

Leaderboard

Featured topics

Product updates

Dynamics 365 release plans