Read image from Notes and show them on HTML Page
Show images attached to the notes of the entity and client will select some of them and should be able to print them.
Created a html webresource to read the images of the notes and given check box beside to select and issue print command.
Here is the POC of it.
<html>
<head>
<title></title>
<style type="text/css">
.tdClass {
border: 1px solid black;
width: 33%;
text-align: center;
padding: 12px;
font-family: sans-serif;
font-size: medium;
vertical-align: central;
background-color: aliceblue;
}
</style>
<script src="ClientGlobalContext.js.aspx"></script>
<script src="../WebResources/new_SDK.REST.js" type="text/javascript"></script>
<script type="text/javascript">
//check if document is loaded or not
var imgControl = document.createElement("IMG");
var tableId = "salesNotes";
var vRecordCount = 0;
function byId(e) { return document.getElementById(e); }
function newEl(tag) { return document.createElement(tag); }
function newTxt(txt) { return document.createTextNode(txt); }
//Check if documented loaded fully
document.onreadystatechange = function () {
if (document.readyState == "complete") {
var vResult = GetNotesImages();
}
}
//this function is used to get image from notes
function GetNotesImages() {
//get regarding object id
var regardingObjectId = window.parent.Xrm.Page.data.entity.getId();
//assign notes entity name
var entitySchemaName = "Annotation";
var odataQuery = "select=AnnotationId,DocumentBody,MimeType,NoteText&" + "$filter=ObjectId/Id eq guid'" + regardingObjectId + "' and IsDocument eq true and startswith(MimeType,'image/') ";
//call retrieveMultipleRecords method in SDK.REST javascript script library
SDK.REST.retrieveMultipleRecords(entitySchemaName, odataQuery, getnotesImagesCallback, function (error) { alert(error.message); }, function () { });
}
//process callbanck result
function getnotesImagesCallback(resultSet) {
// CreateTable(resultSet);
if (resultSet != null && resultSet != 'undefined') {
vRecordCount = resultSet.length;
constructTable(resultSet);
}
}
// Create a table with the result
function constructTable(notesResults) {
var divTarget = document.getElementById('divDynamicContent');
var txtNoRows = parseInt(notesResults.length);
var tbl = document.createElement("table");
tbl.id = 'tblDynamic';
var tblHead = ["S.no", "Description", "Image", "Select"]
var newCell;
var newTHEAD = tbl.createTHead();
newTHEAD.id = "mytblHead";
var newRow = newTHEAD.insertRow(-1);
for (var i = 0; i < tblHead.length; i++) {
newCell = newRow.insertCell(i);
newCell.innerHTML = tblHead[i];
}
var tblBody = document.createElement("tbody");
// creating all cells
for (var j = 0; j < txtNoRows; j++) {
// creates a table row
var row = document.createElement("tr");
row.id = "tr_" + j;
for (var i = 0; i < 4; i++) {
var cell = document.createElement("td");
var cellText;
if (i == 0) {
cellText = document.createElement('label')
cellText.htmlFor = "sno_" + j;
cellText.style["width"] = "100px";
cellText.appendChild(document.createTextNode(j + 1));
}
else if (i == 1) {
cellText = document.createElement('label')
cellText.htmlFor = "id_" + j;
cellText.style["width"] = "400px";
if (notesResults[j].NoteText != undefined) {
cellText.appendChild(document.createTextNode(notesResults[j].NoteText));
}
else {
cellText.appendChild(document.createTextNode(""));
}
}
else if (i == 2) {
//cellText = document.createElement("<input type='radio' name='radiotest'id='idFirstInputRadio' value='first choice'>");
var cellText = document.createElement("img");
cellText.src = "data:" + notesResults[j].MimeType + ";base64," + notesResults[j].DocumentBody;
cellText.width = "300";
cellText.height = "300";
cellText.id = "img" + j;
}
else if (i == 3) {
var cellText = document.createElement("input");
cellText.type = "checkbox";
cellText.name = "name";
cellText.id = "chk_" + j;
cellText.checked = true;
}
cell.appendChild(cellText);
row.appendChild(cell);
}
// add the row to the end of the table body
tblBody.appendChild(row);
}
// put the <tbody> in the <table>
tbl.appendChild(tblBody);
// appends <table> into <body>
divTarget.appendChild(tbl);
}
// Print the selected content of the page.
function PrintSelectedContent() {
var vTableStart = "<table>";
var vTableEnd = "</table>";
var vTrs = "";
var ttl;
for (var vCount = 0; vCount < vRecordCount; vCount++) {
if (document.getElementById("chk_" + vCount).checked == true) {
vTrs = vTrs + "<tr>";
var vCells = document.getElementById('tr_' + vCount).getElementsByTagName('td');
for (var iCell = 0, iTotal = vCells.length; iCell < iTotal; iCell++) {
if (vCells[iCell].firstChild.getAttribute('type') != 'checkbox') {
var vTableCell = document.createElement("td");
vTableCell.className = "tdClass";
vTableCell.style.width = "30%";
vTableCell.style.fontFamily = "sans-serif"
vTableCell.style.fontSize = "medium";
// vTableCell.style.border = "1px solid black";
vTableCell.style.textAlign = "center"
vTableCell.style.padding = "10px";
vTableCell.style.height = "100"
vTableCell.style.backgroundColor = "aliceblue";
vTableCell.innerHTML = vCells[iCell].innerHTML;
vTrs = vTrs + vTableCell.outerHTML;
}
}
vTrs = vTrs + "</tr>";
}
}
var vCompleteTable = vTableStart + vTrs + vTableEnd;
var printWindow = window.open('', '', 'height=400,width=800');
printWindow.document.write('<html><head><title>DIV Contents</title>');
printWindow.document.write('</head><body >');
printWindow.document.write(vCompleteTable);
printWindow.document.write('</body></html>');
printWindow.document.close();
printWindow.print();
}
</script>
<meta charset="utf-8">
</head>
<body style="-ms-zoom: 1;">
<button onclick="PrintSelectedContent();">Selected Content</button>
<div id="imagediv" style="width: 50px; height: 20px;"></div>
<div id="divDynamicContent" style="width: 100%; height: 100%;">
</div>
<div id="dvContainer">
</div>
</body>
</html>
