Share
Report
5,457Hi,
I want to create an html dashboard all looks good. but while in the main dashboard instead of showing output ...its loading ...... here is my code.
could you please help me out to solve the issue
<html><head>
<meta charset="utf-8">
<title></title>
<script src="ejf_eLite_alert"></script>
<script src="sis_jquery3.3.1_min_js"></script>
<link rel="stylesheet" href="sis_jquery_dataTables_min_css">
<script src="sis_jquery_dataTables_min_js"></script>
<link rel="stylesheet" href="sis_bootstrap_min_css">
<script src="sis_bootstrap_min_js"></script>
<link rel="stylesheet" href="sis_bootstrap_multiselect_css">
<script src="sis_bootstrap_multiselect_js"></script>
<script src="ejf_eLite_api"></script>
<link href="sis_jquery_ui_css" rel="stylesheet">
<script src="sis_jquery_ui_js"></script>
<script src="sis_datatablegeneric_js"></script>
<style>
.tblbtn {
padding: 0px 20px;
}
</style>
<script>
//l_sendReminderObject = new Object();
//l_sendReminderObject.sis_sendnotification = "True";
var globalContext = parent.Xrm.Utility.getGlobalContext();
var baseUrl = globalContext.getClientUrl();
var dataIFrame = parent.document.getElementById("WebResource_SandeepTestDashboard")
if (dataIFrame != null) {
dataIFrame.setAttribute('style', 'border: none !important')
}
var dashboardDiv = parent.document.getElementById("dashboardFrameRow");
if (dashboardDiv != null) {
dashboardDiv.style.margin = "0px";
}
var l_teacherChangeHistory;
$(document).ready(function () {
var l_locationRecord,
// l_courseRecord, l_streamRecord, l_academicYearrRecord, l_selectedAcademicYear, l_option, l_teacherRecord, ClassData;
// var l_locationGetObject, l_courseGetObject, l_streamGetObject, l_academicYearGetObject, l_teacherGetObject, l_sendReminderObject, l_classGetObject;
// l_locationGetObject = new Object();
//l_teacherGetObject = new Object();
//l_courseGetObject = new Object();
//l_streamGetObject = new Object();
// l_academicYearGetObject = new Object();
// l_classGetObject = new Object();
availableTeacher = [];
availableClass = [];
// var l_handover;
// l_locationGetObject.columnSet = "sis_name";
// l_locationRecord = Api.oData.retrieveMultiple("sis_locationents", l_locationGetObject, false);
//l_courseGetObject.columnSet = "sis_coursename";
//l_courseRecord = Api.oData.retrieveMultiple("sis_courseents", l_courseGetObject, false);
// l_streamGetObject.columnSet = "sis_name";
// l_streamRecord = Api.oData.retrieveMultiple("sis_streaments", l_streamGetObject, false);
//l_teacherGetObject.columnSet = "sis_name";
// l_teacherRecord = Api.oData.retrieveMultiple("sis_teacherents", l_teacherGetObject, false);
//l_selectedAcademicYear = { '1': false, '2': true, '3': false };
//l_academicYearGetObject.columnSet = "sis_name,sis_academicyearstatus";
//l_academicYearGetObject.orderBy = "sis_name";
//l_academicYearRecord = Api.oData.retrieveMultiple("sis_academicyearents", l_academicYearGetObject, false);
// l_classGetObject.columnSet = "sis_name";
// ClassData = Api.oData.retrieveMultiple("sis_classents", l_classGetObject, false);
//for (i = 0; i < l_locationRecord.length; i++) {
// l_option = document.createElement("option");
// l_option.text = l_locationRecord[i].sis_name;
// l_option.value = l_locationRecord[i].sis_locationentid;
// document.getElementById("location").add(l_option);
// }
//for (i = 0; i < l_courseRecord.length; i++) {
// l_option = document.createElement("option");
// l_option.text = l_courseRecord[i].sis_coursename;
// l_option.value = l_courseRecord[i].sis_courseentid;
// document.getElementById("course").add(l_option);
// }
//for (i = 0; i < l_streamRecord.length; i++) {
// l_option = document.createElement("option");
// l_option.text = l_streamRecord[i].sis_name;
// l_option.value = l_streamRecord[i].sis_streamentid;
//document.getElementById("stream").add(l_option);
}
for (i = 0; i < l_teacherRecord.length; i++) {
if (l_teacherRecord[i].sis_name == null) {
continue;
}
availableTeacher.push({ 'label': l_teacherRecord[i].sis_name, 'value': l_teacherRecord[i].sis_teacherentid });
}
availableTeacher.push({ 'label': "TBA", 'value': "tba" })
// for (i = 0; i < l_academicYearRecord.length; i++) {
// l_option = document.createElement("option");
// l_option.text = l_academicYearRecord[i].sis_name;
// l_option.value = l_academicYearRecord[i].sis_academicyearentid;
// l_option.selected = l_selectedAcademicYear[l_academicYearRecord[i].sis_academicyearstatus];
// document.getElementById("academicYear").add(l_option);
// }
$("#regularTeacher").autocomplete({
source: availableTeacher,
select: function (event, ui) {
$("#regularTeacher").val(ui.item.label); //ui.item is your object from the array
$('#regularTeacher')[0].setAttribute('teacherId', ui.item.value);
return false;
}
});
// $("#takeoverTeacher").autocomplete({
//source: availableTeacher,
// select: function (event, ui) {
// $("#takeoverTeacher").val(ui.item.label); //ui.item is your object from the array
// $('#takeoverTeacher')[0].setAttribute('teacherId', ui.item.value);
//$('#takeoverTeacher')[0].attr('teacherId', ui.item.value);
// return false;
//}
// });
// for (i = 0; i < ClassData.length; i++) {
// if (ClassData[i].sis_name == null) {
// continue;
// }
// availableClass.push({ 'label': ClassData[i].sis_name, 'value': ClassData[i].sis_classentid });
// }
// $("#classcode").autocomplete({
// source: availableClass,
//select: function (event, ui) {
// $("#classcode").val(ui.item.label); //ui.item is your object from the array
// $('#classcode')[0].setAttribute('classId', ui.item.value);
// return false;
// }
// });
// $('.multiselect').multiselect();
// $('#loader1').hide();
// $('#parameters').show();
// $('#myTable').DataTable();
// $(".datepicker").datepicker({
// showAnim: "slide",
// dateFormat: 'yy-mm-dd'
// });
// $("#effectiveDate").datepicker({
// showAnim: "slide",
// minDate:0,
// dateFormat: 'dd/mm/yy'
// });
// });
// function RemoveClass() {
// Alert.show("Confirm Close Class", 'Are you sure you want to close this class?<br /><div //class="col-md-6"> <div class="col-md-6"><label class="lbl">Effective Date: </label><input //style="width:50%" type="text"></div><div class="col-md-6"> <div class="col-md-6"><label //class="lbl">Reason: </label><textarea rows="2"></textarea>', [new Alert.button("Yes"), new //Alert.button("No")], "INFO", null, null, parent.Xrm.Page.context.getClientUrl(), null, null);
// }
// function ShowClassMovement() {
//Alert.showWebResource("sis_classmovement", 1200, 600, '<label //style="color:#337ab7;margin-left: 45%;font-weight: bold;">Update Class Details</label>', [new //Alert.button("Cancel"), new Alert.button("Allocate/Update")], //parent.Xrm.Page.context.getClientUrl(), null, null);
// }
//function AddHeadCount() {
// Alert.showWebResource("sis_studentlist", 1200, 600, '<label //style="color:#337ab7;margin-left: 45%;font-weight: bold;">Student List</label>', [new //Alert.button("Okay")], parent.Xrm.Page.context.getClientUrl(), null, null);
// }
// function ShowSessions() {
// Alert.showWebResource("sis_SessionList", 1200, 600, '<label //style="color:#337ab7;margin-left: 45%;font-weight: bold;">Session List</label>', [new //Alert.button("Okay")], parent.Xrm.Page.context.getClientUrl(), null, null);
// }
function CheckAll() {
if ($('#checkall').prop("checked")) {
Table.$(".checked").prop("checked", true);
} else {
Table.$(".checked").prop("checked", false);
}
}
function CheckValue(p_value) {
if (!p_value) {
return "TBA";
}
return p_value;
}
var Table = "";
function searchData() {
if ($('#checkall').prop("checked")) {
$("#checkall").prop("checked", false);
}
// var selectedCourse = $("#course").val();
//var selectedStream = $("#stream").val();
//var selectedAcademicYear = $("#academicYear").val();
//var selectedLocation = $("#location").val();
var selectedRegularTeacher = $("#regularTeacher")[0].getAttribute('teacherId');
// var selectedTakeoverTeacher = $("#takeoverTeacher")[0].getAttribute('teacherId');
//var selectedClass = $("#classcode")[0].getAttribute('classId');
var selectedDow = $("#dow").val();
//var selectedSubmitStatus = $('#submitStatus').val();
var l_handoverGetObject = new Object();
l_handoverGetObject.filterUrl = "";
//var selectedCourseList = "";
//if (selectedCourse.length > 0) {
// selectedCourseList = selectedCourseList + "_sis_course_value eq " + //selectedCourse[0];
//for (var i = 1; i < selectedCourse.length; i++)
// selectedCourseList = selectedCourseList + " or _sis_course_value eq " + //selectedCourse[i];
// l_handoverGetObject.filterUrl = l_handoverGetObject.filterUrl + "(" + //selectedCourseList + ") and ";
// }
//var selectedLocationList = "";
// if (selectedLocation.length > 0) {
// selectedLocationList = selectedLocationList + "_sis_location_value eq " + //selectedLocation[0];
// for (var i = 1; i < selectedLocation.length; i++)
// selectedLocationList = selectedLocationList + " or _sis_location_value eq " + selectedLocation[i];
// l_handoverGetObject.filterUrl = l_handoverGetObject.filterUrl + "(" + selectedLocationList + ") and ";
// }
//var selectedStreamList = "";
//if (selectedStream.length > 0) {
// selectedStreamList = selectedStreamList + "_sis_stream_value eq " + selectedStream[0];
// for (var i = 1; i < selectedStream.length; i++)
//selectedStreamList = selectedStreamList + " or _sis_stream_value eq " + selectedStream[i];
// l_handoverGetObject.filterUrl = l_handoverGetObject.filterUrl + "(" + selectedStreamList + ") and ";
// }
if (selectedRegularTeacher != null && $('#regularTeacher').val() != "") {
if (selectedRegularTeacher == "tba")
l_handoverGetObject.filterUrl = l_handoverGetObject.filterUrl + "_sis_handoverfrom_value eq null and ";
else
l_handoverGetObject.filterUrl = l_handoverGetObject.filterUrl + "_sis_handoverfrom_value eq '" + selectedRegularTeacher + "' and ";
l_classGetObject.filterUrl = l_classGetObject.filterUrl + "_sis_teacheridregular_value eq '" + selectedRegularTeacher + "' and ";
}
// if (selectedTakeoverTeacher != null && $('#takeoverTeacher').val() != "") {
//if (selectedTakeoverTeacher == "tba")
//l_handoverGetObject.filterUrl = l_handoverGetObject.filterUrl + "_sis_handoverto_value eq null and ";
// else
// l_handoverGetObject.filterUrl = l_handoverGetObject.filterUrl + "_sis_handoverto_value eq '" + selectedTakeoverTeacher + "' and ";
// l_handoverGetObject.filterUrl = l_handoverGetObject.filterUrl + "_sis_handoverto_value eq '" + selectedTakeoverTeacher + "' and ";
// }
//if (selectedClass != null && $('#classcode').val() != "") {
// l_handoverGetObject.filterUrl = l_handoverGetObject.filterUrl + "_sis_class_value eq '" + selectedClass + "' and ";
// }
var selectedDOWList = "";
if (selectedDow.length > 0) {
selectedDOWList = selectedDOWList + "sis_day eq " + selectedDow[0];
for (var i = 1; i < selectedDow.length; i++)
selectedDOWList = selectedDOWList + " or sis_day eq " + selectedDow[i];
l_handoverGetObject.filterUrl = l_handoverGetObject.filterUrl + "(" + selectedDOWList + ") and ";
}
// var selectedstatusList = "";
//if (selectedSubmitStatus.length > 0) {
// selectedstatusList = selectedstatusList + " sis_studentprofileupdated eq " + //selectedSubmitStatus;
// l_handoverGetObject.filterUrl = l_handoverGetObject.filterUrl + "(" + //selectedstatusList + ") and ";
// }
// l_handoverGetObject.linkEntityUrl = "//sis_Class($select=sis_startdate,sis_starttime,_sis_classcluster_value,_sis_academicyear_value),s//is_HandoverFrom($select=sis_lastworkingdate)";
// l_handoverGetObject.filterUrl = l_handoverGetObject.filterUrl + "sis_handoverentid ne //null ";
//l_handover = Api.oData.retrieveMultiple("sis_handoverents", l_handoverGetObject, //false);
// if ($("#academicYear").val() != "")
// l_handover = l_handover.filter(w=>w.sis_Class._sis_academicyear_value == //$("#academicYear").val());
var l_values = "";
if (!(selectedRegularTeacher == null && $('#regularTeacher').val() != "")) {
for (var i = 0; i < l_handover.length; i++) {
l_values = l_values + '<td><input type="checkbox" class="checked"class="checked" name="selectrow" id=' + i + ' ></td><td>' + CheckValue(l_handover[i]["_sis_class_value@OData.Community.Display.V1.FormattedValue"]) +
//'</td><td onclick="CheckRow(this)">' + CheckValue(l_handover[i]["_sis_course_value@OData.Community.Display.V1.FormattedValue"]) +
// '</td><td onclick="CheckRow(this)">' + CheckValue(l_handover[i]["_sis_stream_value@OData.Community.Display.V1.FormattedValue"]) +
// '</td><td onclick="CheckRow(this)">' + CheckValue(l_handover[i]["_sis_handoverfrom_value@OData.Community.Display.V1.FormattedValue"]) +
// '</td><td onclick="CheckRow(this)">' + CheckValue(l_handover[i]["_sis_handoverto_value@OData.Community.Display.V1.FormattedValue"]) +
'</td><td onclick="CheckRow(this)">' + CheckValue(l_handover[i]["sis_day@OData.Community.Display.V1.FormattedValue"]) +
// '</td><td onclick="CheckRow(this)">' + CheckValue(l_handover[i].sis_Class.sis_startdate) +
'</td><td onclick="CheckRow(this)">' + CheckValue(l_handover[i].sis_Class.sis_starttime) +
//'</td><td onclick="CheckRow(this)">' + CheckValue(l_handover[i]["_sis_location_value@OData.Community.Display.V1.FormattedValue"]) +
//'</td><td onclick="CheckRow(this)">' + CheckValue(l_handover[i].sis_Class["_sis_classcluster_value@OData.Community.Display.V1.FormattedValue"]) +
// '</td><td onclick="CheckRow(this)">' + CheckValue(l_handover[i]["sis_effectivedate@OData.Community.Display.V1.FormattedValue"]) +
// '</td><td onclick="CheckRow(this)">' + CheckValue(l_handover[i]["sis_handoverdate@OData.Community.Display.V1.FormattedValue"]) +
//'</td><td onclick="CheckRow(this)">' + CheckValue(l_handover[i]["sis_dateofobservationcopilot@OData.Community.Display.V1.FormattedValue"]) +
//'</td><td onclick="CheckRow(this)">' + CheckValue(l_handover[i]["sis_teacherlastday@OData.Community.Display.V1.FormattedValue"]) +
// '</td><td onclick="CheckRow(this)">' + CheckValue(l_handover[i].sis_reasonforchange) +
// '</td><td onclick="CheckRow(this)">' + CheckValue(l_handover[i]["sis_studentprofileupdated@OData.Community.Display.V1.FormattedValue"]) +
// '</td></tr>';
// }
//}
$('#myTable').dataTable().fnDestroy();
document.getElementById("tableBody").innerHTML = l_values;
Table=$('#myTable').DataTable();
$('#tableContainer').show();
DataTableGeneric("WebResource_SandeepTestDashboard");
}
function RemoveFilter() {
ClearParameters("dow", "regularTeacher");
// var l_academicYearGetObject = new Object();
// l_selectedAcademicYear = { '1': false, '2': true, '3': false };
// l_academicYearGetObject.columnSet = "sis_name,sis_academicyearstatus";
// l_academicYearGetObject.orderBy = "sis_name";
// var l_academicYearRecord = Api.oData.retrieveMultiple("sis_academicyearents", //l_academicYearGetObject, false);
// var l_option;
// for (i = 0; i < l_academicYearRecord.length; i++) {
// l_option = document.createElement("option");
// l_option.text = l_academicYearRecord[i].sis_name;
// l_option.value = l_academicYearRecord[i].sis_academicyearentid;
// l_option.selected = //l_selectedAcademicYear[l_academicYearRecord[i].sis_academicyearstatus];
// document.getElementById("academicYear").add(l_option);
// }
// $('#academicYear').multiselect('refresh');
//}
function CheckRow(event) {
var isChecked = event.parentElement.getElementsByTagName('input')[0].checked;
if (isChecked) {
event.parentElement.getElementsByTagName('input')[0].checked = false;
$('#checkall')[0].checked = false;
return;
}
event.parentElement.getElementsByTagName('input')[0].checked = true;
}
function check(p_value) {
if (p_value == true)
return "Yes";
else
return "No";
}
function numberofSelection() {
return Table.$('input[name="selectrow"]:checked').length;
}
//function reminder() {
// var idSelector = function () {
// return this.id;
// };
// var entity = {};
// entity.sis_teacherreminder = true;
// var idCheckedBox = Table.$('input[name="selectrow"]:checked').map(idSelector).get();
// if (idCheckedBox.length == 0)
// alert("Please select a Record.");
// else {
// for (var i = 0; i < idCheckedBox.length; i++) {
// var l_result = Api.oData.updateRecord("sis_handoverents", l_handover[idCheckedBox[i]].sis_handoverentid, entity, false);
// }
// if (l_result)
// Alert.show("Reminder send successfully.", null, [new Alert.button("Okay")], "INFO", null, null, baseUrl, null, null);
// else
// Alert.show("Error in sending notification", null, [new Alert.button("Okay")], "INFO", null, null, baseUrl, null, null);
// }
// }
// function parentNotification() {
// var idSelector = function () {
// return this.id;
// };
// var entity = {};
// entity.sis_parentreminder = true;
// var idCheckedBox = Table.$('input[name="selectrow"]:checked').map(idSelector).get();
//if (idCheckedBox.length == 0)
// alert("Please select a Record.");
// else {
// for (var i = 0; i < idCheckedBox.length; i++) {
// var l_result = Api.oData.updateRecord("sis_handoverents", l_handover[idCheckedBox[i]].sis_handoverentid, entity, false);
// }
// if (l_result)
// Alert.show("Notification send successfully.", null, [new Alert.button("Okay")], "INFO", null, null, baseUrl, null, null);
// else
// Alert.show("Error in sending notification", null, [new Alert.button("Okay")], "INFO", null, null, baseUrl, null, null);
// }
// }
</script>
<style>
.loader {
border: 8px solid #f3f3f3;
border-radius: 50%;
border-top: 8px solid #3498db;
width: 50px;
height: 50px;
-webkit-animation: spin 2s linear infinite;
/* Safari */
animation: spin 2s linear infinite;
}
/* Safari */
@-webkit-keyframes spin {
0% {
-webkit-transform: rotate(0deg);
}
100% {
-webkit-transform: rotate(360deg);
}
}
@keyframes spin {
0% {
transform: rotate(0deg);
}
100% {
transform: rotate(360deg);
}
}
.record-span:hover {
cursor: pointer;
text-decoration-line: underline;
}
th {
background: #666666;
color: white;
border: 1px solid white;
}
.btn-group {
width: 100%;
}
.btn {
overflow: hidden !IMPORTANT;
}
.btn:hover {
background-color: #696868 !IMPORTANT;
}
.btn-primary:hover {
color: #fff;
background-color: #286090 !IMPORTANT;
border-color: #204d74;
}
.multiselect {
width: 100%;
}
.multiselect-container {
width: 100%;
}
.param {
width: 20%;
}
</style>
<meta>
<meta><meta><meta><meta></head>
<body onfocusout="parent.setEmailRange();" style="overflow-wrap: break-word;">
<div class="container" style="width:98%">
<div class="col-md-12" style="font-family: Arial Rounded MT Bold;font-size: 16px;background:#f8f8f8;border:1px solid #d9d9d9; margin-bottom:14px;">
<div style="margin-top:20px; display:none;" id="parameters">
<div>
<div class="col-md-3" style="margin-bottom:20px;"><label class="parameter">Location</label><br><select id="location" class="multiselect" multiple="multiple" style=" width: -webkit-fill-available;"></select></div>
// <div class="col-md-3" style="margin-bottom:20px;"><label class=" //parameter">Courses</label><br><select id="course" class="multiselect" multiple="multiple" style=" width: -webkit-fill-available;"></select></div>
// <div class="col-md-3" style="margin-bottom:20px;"><label class=" //parameter">Stream</label><br><select id="stream" class="multiselect" multiple="multiple" style=" width: -webkit-fill-available;"></select></div>
<div class="col-md-3" style="margin-bottom:20px;"><label class=" parameter">Regular Teacher</label><input id="regularTeacher" class="form-control"></div>
</div>
<div>
// <div class="col-md-3" style="margin-bottom:20px;"><label class=" //parameter">Takeover Teacher</label><input id="takeoverTeacher" class="form-control"></div>
// <div class="col-md-3" style="margin-bottom:20px;"><label class=" //parameter">Class Code</label><input id="classcode" class="form-control"></div>
// <div class="col-md-3" style="margin-bottom:20px;"><label class=" parameter">Day of Week</label><br><select id="dow" class="multiselect" multiple="multiple" style=" width: -webkit-fill-available;"><option value="1">Monday</option><option value="2">Tuesday</option><option value="3">Wednesday</option><option value="4">Thursday</option><option value="5">Friday</option><option value="6">Saturday</option><option value="7">Sunday</option></select></div>
<div class="col-md-3" style="margin-bottom:20px;"><label class=" //parameter">Academic Year</label><br><select id="academicYear" class="multiselect" style=" //width: -webkit-fill-available; height:30px;"></select></div>
</div>
<div style="clear:both"></div>
<div>
// <div class="col-md-3" style="margin-bottom:20px;"><label class=" //parameter">Submit Status</label><br><select id="submitStatus" style=" width: -webkit-fill-//available; height:30px;"><option value="true">Yes</option><option value="false">No</option></select></div>
// <div class="col-md-3" style="margin-bottom:20px;"><label class=" //parameter">Effective Date</label><input class="datepicker form-control" autocomplete="off" id="effectiveDate" style="width: 100%;"></div>
// <div class="col-md-3" style="margin-bottom:20px;"><label class=" parameter"> //</label><br></div>
<div class="col-md-3" style="margin-bottom:20px;"><label class=" parameter"></label></div>
</div>
<div class="col-md-12" style="float:right;margin-bottom:20px;">
<div style="float:right;">
<button class="btn" style="background:#999999; color :#fff;" onclick="RemoveFilter();">Clear</button><button class="btn btn-primary" style="margin-left:10px;" onclick="searchData();">Search</button>
</div>
</div>
</div>
</div>
<div class="col-md-12" id="loader1" align="center" style="position:absolute;margin-top:15%;"><div class="loader"></div>Loading...</div>
<div id="tableContainer" style="margin-top:10px; display:none;">
//
//
//
//
//
//
//
//
//
//
//
//
//
//
// <table id="myTable" class="table table-bordered table-condensed table-hover" style="font-family: Segoe\000020UI;font-size: small;">
<thead>
<tr>
<th><input type="checkbox" id="checkall" onclick="CheckAll();"></th><th>Class Code</th><th>Course</th><th>Stream</th>
<th>Teacher</th><th>Takeover Teacher</th>
<th>Day of week</th><th>Start Date</th><th>Start Time</th><th>Location</th><th>Cluster</th><th>Effective Date</th><th>Handover Date</th><th>Observation Date</th><th>Last Working Day</th><!--<th>Sitdown Date</th>
// <th>Observation Date</th>--><th>Reason for Change</th><th>Student Profile Updated</th>
</tr>
</thead>
<tbody id="tableBody"></tbody>
</table>
<div class="clearfix"></div>
<div class="col-md-12" style="float:right;margin-top:10px;">
<button class="btn" style="float:right;margin-left: 10px;" onclick="reminder();">Send Reminder</button><button class="btn" style="float:right;" onclick="parentNotification();">Send Notification to Parent</button>
</div>
</div>
</div>
</body></html>
*This post is locked for comments
All responses (
Answers (
