{"id":34142,"date":"2023-03-02T14:18:47","date_gmt":"2023-03-02T08:48:47","guid":{"rendered":"https:\/\/www.inogic.com\/blog\/?p=34142"},"modified":"2023-10-13T15:19:21","modified_gmt":"2023-10-13T09:49:21","slug":"get-entity-colors-in-powerapps-component-framework","status":"publish","type":"post","link":"https:\/\/www.inogic.com\/blog\/2023\/03\/get-entity-colors-in-powerapps-component-framework\/","title":{"rendered":"Get Entity Colors in PowerApps Component Framework"},"content":{"rendered":"<h2>Introduction<\/h2>\n<p>PowerApps Component Framework has numerous methods that are useful to developers in several ways. In developing one of my PCF controls, I ran across a case in which entity colors were required in our control.<\/p>\n<p>I obtained this using the conventional method of calling the getEntityMetadata() for the respective entity and obtaining the EntityColor from it.<\/p>\n<pre class=\"lang:css gutter:true start:1\">let metadata = await context.utils.getEntityMetadata(\"account\");\r\nlet entityColor = metadata.EntityColor;<\/pre>\n<p>However, this leads to sending requests to the CRM as it is asynchronous, which usually degrades the performance of our PCF control.<\/p>\n<p>Solution<\/p>\n<p>In this case, the getEntityColor method comes to the rescue, where no request is sent to CRM. Thus, enhancing the performance of our PCF control. This method can be found in theming under context.<\/p>\n<p>context.theming.getEntityColor(entityName);<\/p>\n<p>Using the above method, we can get the entity color in HEX format as we add them in customizations.<\/p>\n<p><img decoding=\"async\" class=\"alignnone size-full wp-image-34143\" src=\"https:\/\/www.inogic.com\/blog\/wp-content\/uploads\/2023\/03\/1PowerApps.png\" alt=\"PowerApps\" width=\"327\" height=\"108\" srcset=\"https:\/\/www.inogic.com\/blog\/wp-content\/uploads\/2023\/03\/1PowerApps.png 327w, https:\/\/www.inogic.com\/blog\/wp-content\/uploads\/2023\/03\/1PowerApps-300x99.png 300w\" sizes=\"(max-width: 327px) 100vw, 327px\" \/><\/p>\n<p>As shown in the below screenshot, we have set the color for the account entity as #794300.<\/p>\n<p><img decoding=\"async\" class=\"alignnone size-full wp-image-34144\" style=\"border: 1px solid #0a0a0a; padding: 1px; margin: 1px;\" src=\"https:\/\/www.inogic.com\/blog\/wp-content\/uploads\/2023\/03\/2PowerApps.png\" alt=\"PowerApps\" width=\"1186\" height=\"541\" srcset=\"https:\/\/www.inogic.com\/blog\/wp-content\/uploads\/2023\/03\/2PowerApps.png 1186w, https:\/\/www.inogic.com\/blog\/wp-content\/uploads\/2023\/03\/2PowerApps-300x137.png 300w, https:\/\/www.inogic.com\/blog\/wp-content\/uploads\/2023\/03\/2PowerApps-1024x467.png 1024w, https:\/\/www.inogic.com\/blog\/wp-content\/uploads\/2023\/03\/2PowerApps-768x350.png 768w, https:\/\/www.inogic.com\/blog\/wp-content\/uploads\/2023\/03\/2PowerApps-660x301.png 660w\" sizes=\"(max-width: 1186px) 100vw, 1186px\" \/><\/p>\n<p><strong>Scenario<\/strong><\/p>\n<p>Let us consider, we are working on building a dropdown in PCF which shows the entities\/tables of CRM. Users can select any of these entities from the dropdown for further operations.<\/p>\n<p>However, just showing entity names will make it look dull and uninteresting. So, to lighten up this scenario we will add a colorful box, which will be colored with the respective entity colors.<\/p>\n<p>Another scenario from this can be the user may need to know the color of the entity before selecting the entity option.<\/p>\n<p><img decoding=\"async\" class=\"alignnone size-full wp-image-34145\" style=\"border: 1px solid #0a0a0a; padding: 1px; margin: 1px;\" src=\"https:\/\/www.inogic.com\/blog\/wp-content\/uploads\/2023\/03\/3PowerApps.png\" alt=\"PowerApps\" width=\"335\" height=\"265\" srcset=\"https:\/\/www.inogic.com\/blog\/wp-content\/uploads\/2023\/03\/3PowerApps.png 335w, https:\/\/www.inogic.com\/blog\/wp-content\/uploads\/2023\/03\/3PowerApps-300x237.png 300w\" sizes=\"(max-width: 335px) 100vw, 335px\" \/><\/p>\n<p>Here, we use a Dropdown component of Fluent UI and render the options in it.<\/p>\n<pre class=\"lang:css gutter:true start:1\">return (\r\n\r\n);\r\n\/\/method to render an option into the dropdown field\r\nconst _renderOption = (option: any): any =&gt; {\r\nlet entityName = option.key;\r\nreturn (\r\n{ \/\/@ts-ignore } {\/* text of an option set field *\/} {option.text}\r\n); }<\/pre>\n<p><strong>Note: This method is not documented so use a fallback for this method in terms of any future untoward.<\/strong><\/p>\n<h2>Conclusion<\/h2>\n<p>In this way, we learned how to get the entity color without sending a request with getEntityMetadata()<\/p>\n<p><a href=\"https:\/\/www.inogic.com\/product\/productivity-apps\/business-process-dynamics-365-crm-to-do-checklist-sequence\" target=\"_blank\" rel=\"noopener\"><img decoding=\"async\" class=\"alignnone wp-image-34146\" src=\"https:\/\/www.inogic.com\/blog\/wp-content\/uploads\/2023\/03\/Business-Process-Checklist-2.png\" alt=\"Business Process Checklist (2)\" width=\"836\" height=\"209\" srcset=\"https:\/\/www.inogic.com\/blog\/wp-content\/uploads\/2023\/03\/Business-Process-Checklist-2.png 800w, https:\/\/www.inogic.com\/blog\/wp-content\/uploads\/2023\/03\/Business-Process-Checklist-2-300x75.png 300w, https:\/\/www.inogic.com\/blog\/wp-content\/uploads\/2023\/03\/Business-Process-Checklist-2-768x192.png 768w, https:\/\/www.inogic.com\/blog\/wp-content\/uploads\/2023\/03\/Business-Process-Checklist-2-660x165.png 660w\" sizes=\"(max-width: 836px) 100vw, 836px\" \/><\/a><\/p>\n","protected":false},"excerpt":{"rendered":"<p>Introduction PowerApps Component Framework has numerous methods that are useful to developers in several ways. In developing one of my PCF controls, I ran across a case in which entity colors were required in our control. I obtained this using the conventional method of calling the getEntityMetadata() for the respective entity and obtaining the EntityColor\u2026 <span class=\"read-more\"><a href=\"https:\/\/www.inogic.com\/blog\/2023\/03\/get-entity-colors-in-powerapps-component-framework\/\">Read More &raquo;<\/a><\/span><\/p>\n","protected":false},"author":13,"featured_media":0,"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":[38,44,2361],"tags":[2130],"class_list":["post-34142","post","type-post","status-publish","format-standard","hentry","category-microsoft-powerapps","category-power-apps","category-technical","tag-powerapps-component-framework"],"aioseo_notices":[],"_links":{"self":[{"href":"https:\/\/www.inogic.com\/blog\/wp-json\/wp\/v2\/posts\/34142","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=34142"}],"version-history":[{"count":0,"href":"https:\/\/www.inogic.com\/blog\/wp-json\/wp\/v2\/posts\/34142\/revisions"}],"wp:attachment":[{"href":"https:\/\/www.inogic.com\/blog\/wp-json\/wp\/v2\/media?parent=34142"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.inogic.com\/blog\/wp-json\/wp\/v2\/categories?post=34142"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.inogic.com\/blog\/wp-json\/wp\/v2\/tags?post=34142"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}