{"id":23108,"date":"2020-03-18T12:37:20","date_gmt":"2020-03-18T12:37:20","guid":{"rendered":"https:\/\/www.inogic.com\/blog\/?p=23108"},"modified":"2020-03-18T12:37:20","modified_gmt":"2020-03-18T12:37:20","slug":"how-to-retrieve-entity-icons-using-javascript","status":"publish","type":"post","link":"https:\/\/www.inogic.com\/blog\/2020\/03\/how-to-retrieve-entity-icons-using-javascript\/","title":{"rendered":"How to Retrieve Entity Icons using JavaScript"},"content":{"rendered":"

Introduction<\/strong><\/h2>\n

In this blog, we will see how to retrieve Entity icon using the JavaScript. Recently, one of our client wanted to retrieve the related entity along with the icons of entity in the table and wanted to create the related record.<\/p>\n

Now the client wanted to identify the entities. Suppose the client has two entities \u2013 \u2018Contact\u2019 and \u2018Sub Contact\u2019. Here, it will be easy for the client to be identify the entities on the basis of icons.<\/p>\n

Solution<\/strong><\/h2>\n

To fulfil this requirement, I created html page which shows the list of related entities in the table. Given below is the code which we are using to retrieve the entity icons.<\/p>\n

Here, I retrieved the related entity of \u2018Account\u2019 entity. After retrieving the related entity, next I retrieved the entity\u2019s EntityDefinitions as shown below in the code:<\/p>\n

var selectAttri = \"ObjectTypeCode,DisplayName,LogicalName,IconLargeName,IconSmallName,IconMediumName\";\r\n\r\n\/\/retrieve entities\r\n\r\n\/\/Create AJAX request\r\n\r\nvar jqxhr = $.ajax({\r\n\r\ntype: \"GET\",\r\n\r\ncontentType: \"application\/json; charset=utf-8\",\r\n\r\ndatatype: \"json\",\r\n\r\nasync: false,\r\n\r\nurl: encodeURI(Xrm.Page.context.getClientUrl() + \"\/api\/data\/v9.1\/EntityDefinitions?$select=\" + selectAttri + \"&$filter=LogicalName eq 'account'\"),\r\n\r\nbeforeSend: function (xhr) {\r\n\r\n\/\/Specifying this header ensures that the results will be returned as JSON.\r\n\r\nxhr.setRequestHeader(\"Accept\", \"application\/json\");\r\n\r\nxhr.setRequestHeader(\"Accept\", \"application\/json\");\r\n\r\nxhr.setRequestHeader(\"Content-Type\", \"application\/json; charset=utf-8\");\r\n\r\nxhr.setRequestHeader(\"OData-MaxVersion\", \"4.0\");\r\n\r\nxhr.setRequestHeader(\"OData-Version\", \"4.0\");\r\n\r\n}\r\n\r\n});\r\n\r\nvar response = { valid: jqxhr.statusText, data: jqxhr.responseJSON };\r\n\r\nif (response.data == null) {\r\n\r\nif (jqxhr.responseJSON == null) {\r\n\r\ntry {\r\n\r\nresponse = JSON.parse(jqxhr.responseText)\r\n\r\n} catch (e) {\r\n\r\n}\r\n\r\nentities = response.value;\r\n\r\n}\r\n\r\n}\r\n\r\nelse {\r\n\r\nentities = response.data.value;\r\n\r\n}<\/pre>\n
After retrieving the related entity\u2019s EntityDefinations we will retrieve the Icons of the image as per below code:<\/p>\n
\/\/loop thru all views read\r\n$.each(allEntities, function (index, elem) {\r\n\r\nvar displayName = \"\";\r\n\r\nvar ent = {};\r\n\/\/set the properties\r\nent.DisplayName = displayName;\r\nent.LogicalName = elem.LogicalName;\r\nent.ObjectTypeCode = elem.ObjectTypeCode;\r\nif (elem.ObjectTypeCode >= 10000 && elem.IconSmallName != null) {\r\nent.DefaultImage = Xrm.Page.context.getClientUrl() + \"\/WebResources\/\" + elem.IconSmallName.toString();\r\n}\r\nelse {\r\nent.DefaultImage =Xrm.Page.context.getClientUrl() + + getURL(elem);\r\n}\r\n\/\/add it to collection\r\nentObj.push(ent);\r\n});\r\n\r\n\/\/Get the URL\r\nfunction getURL(ent) {\r\n\/\/default icon\r\nvar url = \"\/_imgs\/svg_\" + ent.ObjectTypeCode.toString() + \".svg\";\r\n\r\nif (!UrlExists(url)) {\r\nurl = \"\/_imgs\/ico_16_\" + ent.ObjectTypeCode.toString() + \".gif\";\r\n\r\n\/\/not all system entities use GIF format\r\n\r\nif (!UrlExists(url)) {\r\nurl = \"\/_imgs\/ico_16_\"\r\n+ ent.ObjectTypeCode.toString() +\r\n\".png\";\r\n\r\n\/\/default icon\r\n\r\nif (!UrlExists(url)) {\r\nurl = \"\/_imgs\/ico_16_customEntity.gif\";\r\n}\r\n}\r\n}\r\n\r\nreturn url;\r\n}\r\n\r\nfunction UrlExists(url) {\r\nvar http = new XMLHttpRequest();\r\nhttp.open('HEAD', url, false);\r\nhttp.send();\r\nreturn http.status != 404 && http.status != 500;\r\n}\r\n\/\/loop thru all views read\r\n$.each(allEntities, function (index, elem) {\r\n\r\nvar displayName = \"\";\r\n\r\nvar ent = {};\r\n\/\/set the properties\r\nent.DisplayName = displayName;\r\nent.LogicalName = elem.LogicalName;\r\nent.ObjectTypeCode = elem.ObjectTypeCode;\r\nif (elem.ObjectTypeCode >= 10000 && elem.IconSmallName != null) {\r\nent.DefaultImage = Xrm.Page.context.getClientUrl() + \"\/WebResources\/\" + elem.IconSmallName.toString();\r\n}\r\nelse {\r\nent.DefaultImage =Xrm.Page.context.getClientUrl() + + getURL(elem);\r\n}\r\n\/\/add it to collection\r\nentObj.push(ent);\r\n});\r\n\r\n\/\/Get the URL\r\nfunction getURL(ent) {\r\n\/\/default icon\r\nvar url = \"\/_imgs\/svg_\" + ent.ObjectTypeCode.toString() + \".svg\";\r\n\r\nif (!UrlExists(url)) {\r\nurl = \"\/_imgs\/ico_16_\" + ent.ObjectTypeCode.toString() + \".gif\";\r\n\r\n\/\/not all system entities use GIF format\r\n\r\nif (!UrlExists(url)) {\r\nurl = \"\/_imgs\/ico_16_\"\r\n+ ent.ObjectTypeCode.toString() +\r\n\".png\";\r\n\r\n\/\/default icon\r\n\r\nif (!UrlExists(url)) {\r\nurl = \"\/_imgs\/ico_16_customEntity.gif\";\r\n}\r\n}\r\n}\r\n\r\nreturn url;\r\n}\r\n\r\nfunction UrlExists(url) {\r\nvar http = new XMLHttpRequest();\r\nhttp.open('HEAD', url, false);\r\nhttp.send();\r\nreturn http.status != 404 && http.status != 500;\r\n}<\/pre>\n
In the below screenshot, you can see the related entities and their icons.<\/p>\n
\"Java<\/p>\n
Conclusion<\/strong><\/h2>\n
In this way, with the above code you can easily retrieve the entity icons using JavaScript.<\/p>\n","protected":false},"excerpt":{"rendered":"
Introduction In this blog, we will see how to retrieve Entity icon using the JavaScript. Recently, one of our client wanted to retrieve the related entity along with the icons of entity in the table and wanted to create the related record. Now the client wanted to identify the entities. Suppose the client has two\u2026 Read More »<\/a><\/span><\/p>\n","protected":false},"author":13,"featured_media":23111,"comment_status":"closed","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"om_disable_all_campaigns":false,"_monsterinsights_skip_tracking":false,"_monsterinsights_sitenote_active":false,"_monsterinsights_sitenote_note":"","_monsterinsights_sitenote_category":0,"footnotes":""},"categories":[16,18,33],"tags":[545,971],"class_list":["post-23108","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-dynamics-365","category-dynamics-365-v9-2","category-javascript","tag-dynamics-365-crm","tag-javascript-2"],"aioseo_notices":[],"_links":{"self":[{"href":"https:\/\/www.inogic.com\/blog\/wp-json\/wp\/v2\/posts\/23108","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.inogic.com\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.inogic.com\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.inogic.com\/blog\/wp-json\/wp\/v2\/users\/13"}],"replies":[{"embeddable":true,"href":"https:\/\/www.inogic.com\/blog\/wp-json\/wp\/v2\/comments?post=23108"}],"version-history":[{"count":0,"href":"https:\/\/www.inogic.com\/blog\/wp-json\/wp\/v2\/posts\/23108\/revisions"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/www.inogic.com\/blog\/wp-json\/wp\/v2\/media\/23111"}],"wp:attachment":[{"href":"https:\/\/www.inogic.com\/blog\/wp-json\/wp\/v2\/media?parent=23108"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.inogic.com\/blog\/wp-json\/wp\/v2\/categories?post=23108"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.inogic.com\/blog\/wp-json\/wp\/v2\/tags?post=23108"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}