Read image from Notes and show them on HTML Page
Hello, today I got a requirement to show images attached to the notes of the entity and client will select some of them and should be able to print them.
I have 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>
--
Happy CRM'ing
Gopinath.
