{"id":1801,"date":"2015-10-31T06:42:25","date_gmt":"2015-10-31T06:42:25","guid":{"rendered":"http:\/\/himbap.com\/blog\/?p=1801"},"modified":"2015-11-30T10:27:48","modified_gmt":"2015-11-30T10:27:48","slug":"image-gallery-utility-for-dynamics-crm","status":"publish","type":"post","link":"https:\/\/himbap.com\/blog\/?p=1801","title":{"rendered":"Image Gallery Utility for Dynamics CRM"},"content":{"rendered":"

In our earlier article<\/a> we have demonstrated how we can fetch images attached to notes, working on the same requirement we have enhanced our examples to develop an image gallery utility to see all the images attached to notes. Here is the complete code for this utility:<\/p>\n

\r\n<!--This is a Image Gallery utility, which can be used with any entity which have\r\nrelationship with Notes, this web resource will show all the images attached to notes -->\r\n    < html > < head >\r\n    < style type = "text\/css" >\r\n\r\n    .left - div {\r\n        display: inline - block;\r\n        cursor: pointer;\r\n    }\r\n    .right - div {\r\n        cursor: pointer;\r\n        display: inline - block;\r\n    } < \/style>  < meta charset = "utf-8" >\r\n    < \/head><body style="-ms-zoom: 1;">\r\n    < script src = "..\/..\/ClientGlobalContext.js.aspx" > < \/script>\r\n    < script src = "..\/Script\/SDK.REST.js" type = "text\/javascript" > < \/script> < script type = "text\/javascript" >\r\n\/\/variables\r\nvar currentImage = 0;\r\nvar img = document.createElement("IMG");\r\nvar images = new Array;\r\nvar TotalImages = 0;\r\nvar SectionName;\r\nvar TabName;\r\ndocument.onreadystatechange = function() {\r\n        if (document.readyState == "complete") {\r\n            \/\/get query parameters\r\n            var queryParam = GetGlobalContext().getQueryStringParameters().data;\r\n            var fields = queryParam.split(",");\r\n            TabName = fields[0];\r\n            SectionName = fields[1];\r\n            \/\/hide control in case form create\r\n            if (isformtypeCreate())\r\n                showImageGalery(TabName, SectionName, false)\r\n            else {\r\n                showImageGalery(TabName, SectionName, true)\r\n                getnotesImages();\r\n            }\r\n        }\r\n    }\r\n    \/\/check for form create mode\r\nfunction isformtypeCreate() {\r\n    if (window.parent.Xrm.Page.ui.getFormType() == 1) \/\/create mode\r\n        return true;\r\n    else\r\n        return false;\r\n}\r\n\/\/hide\/show image gallery\r\nfunction showImageGalery(tabname, sectionname, flag) {\r\n    window.parent.Xrm.Page.ui.tabs.get(tabname).sections.get(sectionname).setVisible(flag);\r\n}\r\n\/\/get images from notes\r\nfunction getnotesImages() {\r\n    var regardingObjectId = window.parent.Xrm.Page.data.entity.getId();\r\n    var entitySchemaName = "Annotation";\r\n    var odataQuery = "?$select=AnnotationId,DocumentBody,MimeType&" +\r\n        "$filter=ObjectId\/Id eq guid'" + regardingObjectId +\r\n        "' and IsDocument eq true and startswith(MimeType,'image\/') ";\r\n    if (typeof(SDK) != "undefined") {\r\n        SDK.REST.retrieveMultipleRecords(entitySchemaName, odataQuery, getnotesImagesCallback, function(error) {\r\n            alert(error.message);\r\n        }, function() {});\r\n    } else {\r\n        alert("REST.SDK library is not available");\r\n    }\r\n}\r\n\/\/callback method\r\nfunction getnotesImagesCallback(resultSet) {\r\n    if (resultSet.length > 0) {\r\n        TotalImages = resultSet.length;\r\n        for (i = 0; i < resultSet.length; i++) {\r\n            var mimeType = resultSet[i].MimeType;\r\n            var body = resultSet[i].DocumentBody;\r\n            images[i] = "data:" + mimeType + ";base64," + body;\r\n        }\r\n        changeImage(0);\r\n\r\n    } else\r\n        showImageGalery(TabName, SectionName, false);\r\n}\r\n\/\/change image\r\nfunction changeImage(counter) {\r\n      currentImage += counter;\r\n    if (currentImage != TotalImages) {\r\n        if (currentImage < 0)\r\n            currentImage = 0;\r\n    } else {\r\n        currentImage = 0;\r\n    }\r\n    img.src = images[currentImage];\r\n    document.getElementById('imageGallery').appendChild(img);\r\n}\r\n\r\n< \/script> < div >\r\n\r\n< input onclick = "getnotesImages()"\r\nalt = "Reload"\r\ntype = "image"\r\nsrc = "..\/Image\/Refresh.png" >\r\n    < input class = "left-div"\r\nalt = "Go Next"\r\nonclick = "changeImage(-1);"\r\ntype = "image"\r\nsrc = "..\/Image\/Back.png" >\r\n    < input class = "right-div"\r\nalt = "Go Back"\r\nonclick = "changeImage(1);"\r\ntype = "image"\r\nsrc = "..\/Image\/Next.png" >\r\n    < \/div>  < div id = "imageGallery"\r\nstyle = "width: 100%; overflow: hidden;" >\r\n    < \/div><\/body >\r\n    < \/html>\r\n<\/pre>\n
You can download complete utility from GitHub <\/a>
\nFollowing are the steps to use this Gallery
\n1. Download Solution from here <\/a>
\n2. Import this solution to your CRM environment (We can place this web resource to any entity which has relationship with notes<\/em>)
\n3. Let\u2019s add this to account form, Open account entity form editor, and add a new section to existing tab or add a new tab and section to form.
\n4. Double click on tab and make note of tab name, follow similar steps for section and make note of section name, we need to pass these to web resource.
\n5. Select your section and click on Web Resource by navigating to insert tab under ribbon bar.
\n6. Select web resource properties like following:
\n\"Imagegallery1\"<\/a>
\n7. Click on OK and save, publish your changes.
\n8. Open any account record and attach image using notes.<\/p>\n
\"Imgegallery3\"<\/a><\/p>\n
9. Refresh your record first time to get image gallery, and you should be able to see it like below:<\/p>\n
\"Imagegallery2\"<\/a><\/p>\n","protected":false},"excerpt":{"rendered":"
In our earlier article we have demonstrated how we can fetch images attached to notes, working on the same requirement we have enhanced our examples to develop an image gallery utility to see all the images attached to notes. Here is the complete code for this utility: You can download complete utility from GitHub Following are the steps to use… Read more »<\/a><\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":[],"categories":[5,6,8],"tags":[243,241,242],"_links":{"self":[{"href":"https:\/\/himbap.com\/blog\/index.php?rest_route=\/wp\/v2\/posts\/1801"}],"collection":[{"href":"https:\/\/himbap.com\/blog\/index.php?rest_route=\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/himbap.com\/blog\/index.php?rest_route=\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/himbap.com\/blog\/index.php?rest_route=\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/himbap.com\/blog\/index.php?rest_route=%2Fwp%2Fv2%2Fcomments&post=1801"}],"version-history":[{"count":14,"href":"https:\/\/himbap.com\/blog\/index.php?rest_route=\/wp\/v2\/posts\/1801\/revisions"}],"predecessor-version":[{"id":1886,"href":"https:\/\/himbap.com\/blog\/index.php?rest_route=\/wp\/v2\/posts\/1801\/revisions\/1886"}],"wp:attachment":[{"href":"https:\/\/himbap.com\/blog\/index.php?rest_route=%2Fwp%2Fv2%2Fmedia&parent=1801"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/himbap.com\/blog\/index.php?rest_route=%2Fwp%2Fv2%2Fcategories&post=1801"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/himbap.com\/blog\/index.php?rest_route=%2Fwp%2Fv2%2Ftags&post=1801"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}