Read images of Notes and printing selected images in MS CRM

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(“”);
                        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

in the


            tbl.appendChild(tblBody);
            // appends

into
            divTarget.appendChild(tbl);
        }

        // Print the selected content of the page.
        function PrintSelectedContent() {
            var vTableStart =

;
            var vTableEnd =

;
            var vTrs = “”;
            var ttl;
            for (var vCount = 0; vCount < vRecordCount; vCount++) {
                if (document.getElementById(“chk_” + vCount).checked == true) {
                    vTrs = vTrs +

;
                    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 +

;
                }
            }
            var vCompleteTable = vTableStart + vTrs + vTableEnd;
            var printWindow = window.open(, , ‘height=400,width=800’);
            printWindow.document.write(‘DIV Contents’);
            printWindow.document.write();
            printWindow.document.write(vCompleteTable);
            printWindow.document.write();
            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.

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out /  Change )

Google photo

You are commenting using your Google account. Log Out /  Change )

Twitter picture

You are commenting using your Twitter account. Log Out /  Change )

Facebook photo

You are commenting using your Facebook account. Log Out /  Change )

Connecting to %s