{"id":7058,"date":"2020-05-02T00:55:45","date_gmt":"2020-05-02T04:55:45","guid":{"rendered":"https:\/\/www.jitendrazaa.com\/blog\/?p=7058"},"modified":"2020-05-04T21:09:59","modified_gmt":"2020-05-05T01:09:59","slug":"gravatar-reusable-lightning-web-component","status":"publish","type":"post","link":"https:\/\/www.jitendrazaa.com\/blog\/salesforce\/gravatar-reusable-lightning-web-component\/","title":{"rendered":"Gravatar &#8211; Reusable Lightning Web Component"},"content":{"rendered":"\n<p class=\"justify\">Wouldn&#8217;t it would be great if we can use existing avatar of user on basis of email id instead of asking user to upload their profile pic ?<\/p>\n\n\n\n<p class=\"justify\"><a href=\"https:\/\/en.gravatar.com\/\">Gravatar<\/a> is Globally recognized avatar used by millions of user and many websites like WordPress, github, stackoverflow etc. <\/p>\n\n\n\n<h3 class=\"wp-block-heading\"><a href=\"https:\/\/jit29-developer-edition.na85.force.com\/blogdemo\/s\/lwcdemo\">Click here for Live Demo &#8211; Gravatar Component on public community<\/a><\/h3>\n\n\n\n<p class=\"justify\">In this post, we would create a reusable lightning component which would receive below three parameters to construct avatar<\/p>\n\n\n\n<ol class=\"wp-block-list\"><li>Email address to render avatar<\/li><li>Size of avatar<\/li><li>Should image be rendered as rounded corner<\/li><\/ol>\n\n\n\n<p class=\"justify\">Gravatar would need MD5 equivalent of email address. There is no native Javascript library to compute MD5 hash, either we have to use Javascript library or we can use Apex to compute MD5 using <a href=\"https:\/\/developer.salesforce.com\/docs\/atlas.en-us.apexcode.meta\/apexcode\/apex_classes_restful_crypto.htm\">crypto<\/a> class. I preferred Apex class instead of any other library a shown below<\/p>\n\n\n\n<!--more-->\n\n\n\n<h3 class=\"wp-block-heading\"><strong>Apex Class &#8211; Using Crypto class to generate MD5 digest equivalent to email<\/strong><\/h3>\n\n\n\n<script src=\"https:\/\/gist.github.com\/JitendraZaa\/44763fef2896e631a599d33cad33c652.js\"><\/script>\n\n\n\n<p><strong>Lightning Web Component [LWC] for Gravatar<\/strong><\/p>\n\n\n\n<script src=\"https:\/\/gist.github.com\/JitendraZaa\/7f1253ef9ab2b0234fb2cba14118e194.js\"><\/script>\n\n\n\n<h3 class=\"wp-block-heading\">Setting properties on Lightning Web Component to be used on App builder or Community<\/h3>\n\n\n\n<script src=\"https:\/\/gist.github.com\/JitendraZaa\/a150273d886aaec8959f1fb351b6ea11.js\"><\/script>\n\n\n\n<p class=\"justify\">Make sure to add target <em>lightningCommunity__Default<\/em> along with <em>lightningCommunity__Page<\/em> if this LWC is supposed to be used on Community.  Otherwise you would receive below error<\/p>\n\n\n\n<blockquote class=\"wp-block-quote is-layout-flow wp-block-quote-is-layout-flow\"><p>The &#8216;property&#8217; tag isn&#8217;t supported for lightningCommunity__Page<\/p><cite>use lightningCommunity__Default to allow setting up property in Community<\/cite><\/blockquote>\n\n\n\n<p>Also, if above LWC is supposed to be used on Lightning community, we need to add Gravatar host in Content Security Policy trusted website otherwise we would get error<\/p>\n\n\n\n<blockquote class=\"wp-block-quote is-layout-flow wp-block-quote-is-layout-flow\"><p>Access to resources from an unapproved, external host violates your Content Security Policy (CSP). To get access to these resources, try whitelisting the host in CSP Trusted Sites in Salesforce Setup<\/p><\/blockquote>\n\n\n\n<h3 class=\"wp-block-heading\">Demo Component to showcase how to use Gravatar<\/h3>\n\n\n\n<p>You would not need demo component as advance as this. I&#8217;ve created this component to showcase <\/p>\n\n\n\n<ol class=\"wp-block-list\"><li>Live preview of LWC Component<\/li><li>How binding works in LWC [Hint &#8211; its not as easy as aura, you would need events]]<\/li><\/ol>\n\n\n\n<script src=\"https:\/\/gist.github.com\/JitendraZaa\/5d37530330140dbb4e2ccdcce2a5b590.js\"><\/script>\n","protected":false},"excerpt":{"rendered":"<p>Avoid asking your users to upload pictures &#8211; Use Globally Recognized Avatar , Reusable Lightning Web Component <\/p>\n","protected":false},"author":1,"featured_media":7059,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"advanced_seo_description":"","jetpack_seo_html_title":"","jetpack_seo_noindex":false,"jetpack_post_was_ever_published":false,"_jetpack_newsletter_access":"","_jetpack_dont_email_post_to_subs":false,"_jetpack_newsletter_tier_id":0,"_jetpack_memberships_contains_paywalled_content":false,"jz_research_post":"","_jetpack_memberships_contains_paid_content":false,"footnotes":""},"categories":[9],"tags":[462,464],"class_list":["post-7058","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-salesforce","tag-lightning-web-component","tag-lwc"],"jetpack_featured_media_url":"https:\/\/i0.wp.com\/www.jitendrazaa.com\/blog\/wp-content\/uploads\/2020\/05\/Gravatar-Reusable-Lightning-Web-Component-e1624579234338.png?fit=700%2C201&ssl=1","jetpack_sharing_enabled":true,"jetpack-related-posts":[{"id":4493,"url":"https:\/\/www.jitendrazaa.com\/blog\/salesforce\/create-collapsible-panel-component-in-lightning\/","url_meta":{"origin":7058,"position":0},"title":"Salesforce  Lightning Component &#8211; expand and collapsable panel example","author":"Jitendra","date":"May 22, 2015","format":false,"excerpt":"How to use aura:facet component and Learn creating expand and collapsable reusable lightning component in Salesforce","rel":"","context":"In &quot;Lightning&quot;","block_context":{"text":"Lightning","link":"https:\/\/www.jitendrazaa.com\/blog\/category\/salesforce\/lightning\/"},"img":{"alt_text":"Lightning CollapsiblePanel Component - Expanded","src":"https:\/\/i0.wp.com\/www.jitendrazaa.com\/blog\/wp-content\/uploads\/2015\/05\/Lightning-CollapsiblePanel-Component-Expanded.png?resize=350%2C200&ssl=1","width":350,"height":200,"srcset":"https:\/\/i0.wp.com\/www.jitendrazaa.com\/blog\/wp-content\/uploads\/2015\/05\/Lightning-CollapsiblePanel-Component-Expanded.png?resize=350%2C200&ssl=1 1x, https:\/\/i0.wp.com\/www.jitendrazaa.com\/blog\/wp-content\/uploads\/2015\/05\/Lightning-CollapsiblePanel-Component-Expanded.png?resize=525%2C300&ssl=1 1.5x, https:\/\/i0.wp.com\/www.jitendrazaa.com\/blog\/wp-content\/uploads\/2015\/05\/Lightning-CollapsiblePanel-Component-Expanded.png?resize=700%2C400&ssl=1 2x"},"classes":[]},{"id":7072,"url":"https:\/\/www.jitendrazaa.com\/blog\/salesforce\/share-javascript-code-in-lightning-web-component-to-read-url-parameters\/","url_meta":{"origin":7058,"position":1},"title":"Share JavaScript Code in Lightning Web Component to Read URL Parameters","author":"Jitendra","date":"May 4, 2020","format":false,"excerpt":"Building Reusable LWC Component to read query string from URL","rel":"","context":"In &quot;Salesforce&quot;","block_context":{"text":"Salesforce","link":"https:\/\/www.jitendrazaa.com\/blog\/category\/salesforce\/"},"img":{"alt_text":"","src":"","width":0,"height":0},"classes":[]},{"id":4102,"url":"https:\/\/www.jitendrazaa.com\/blog\/salesforce\/salesforce-faq-part-20-lightning-questions\/","url_meta":{"origin":7058,"position":2},"title":"Salesforce interview question related to Lightning framework &#8211; Part 20","author":"Jitendra","date":"February 4, 2015","format":false,"excerpt":"Salesforce interview questions for Salesforce developers and admin , mostly related to newly released Salesforce Lightning components and applications","rel":"","context":"In &quot;Salesforce&quot;","block_context":{"text":"Salesforce","link":"https:\/\/www.jitendrazaa.com\/blog\/category\/salesforce\/"},"img":{"alt_text":"","src":"","width":0,"height":0},"classes":[]},{"id":4646,"url":"https:\/\/www.jitendrazaa.com\/blog\/salesforce\/compliation-of-resources-to-learn-lightning-components-in-salesforce\/","url_meta":{"origin":7058,"position":3},"title":"Compilation of resources to learn Lightning Components in Salesforce","author":"Jitendra","date":"July 8, 2015","format":false,"excerpt":"An attempt to gather all resources to learn Salesforce lightning component in one blog post","rel":"","context":"In &quot;Salesforce&quot;","block_context":{"text":"Salesforce","link":"https:\/\/www.jitendrazaa.com\/blog\/category\/salesforce\/"},"img":{"alt_text":"","src":"","width":0,"height":0},"classes":[]},{"id":5987,"url":"https:\/\/www.jitendrazaa.com\/blog\/salesforce\/use-lightning-components-on-external-websites-lightning-out\/","url_meta":{"origin":7058,"position":4},"title":"Use Lightning Components on external websites &#8211; Lightning Out","author":"Jitendra","date":"April 5, 2017","format":false,"excerpt":"How to use Lightning component in node.js (External websites) by using Lightning Out. It shows how to enable CORS and SSL in Node.js with Video and complete source code.","rel":"","context":"In &quot;Lightning&quot;","block_context":{"text":"Lightning","link":"https:\/\/www.jitendrazaa.com\/blog\/category\/salesforce\/lightning\/"},"img":{"alt_text":"Show Lightning Component in Node.js using Lightning Out","src":"https:\/\/i0.wp.com\/www.jitendrazaa.com\/blog\/wp-content\/uploads\/2017\/04\/Show-Lightning-Component-in-Node.js-using-Lightning-Out.png?fit=1162%2C637&ssl=1&resize=350%2C200","width":350,"height":200,"srcset":"https:\/\/i0.wp.com\/www.jitendrazaa.com\/blog\/wp-content\/uploads\/2017\/04\/Show-Lightning-Component-in-Node.js-using-Lightning-Out.png?fit=1162%2C637&ssl=1&resize=350%2C200 1x, https:\/\/i0.wp.com\/www.jitendrazaa.com\/blog\/wp-content\/uploads\/2017\/04\/Show-Lightning-Component-in-Node.js-using-Lightning-Out.png?fit=1162%2C637&ssl=1&resize=525%2C300 1.5x, https:\/\/i0.wp.com\/www.jitendrazaa.com\/blog\/wp-content\/uploads\/2017\/04\/Show-Lightning-Component-in-Node.js-using-Lightning-Out.png?fit=1162%2C637&ssl=1&resize=700%2C400 2x, https:\/\/i0.wp.com\/www.jitendrazaa.com\/blog\/wp-content\/uploads\/2017\/04\/Show-Lightning-Component-in-Node.js-using-Lightning-Out.png?fit=1162%2C637&ssl=1&resize=1050%2C600 3x"},"classes":[]},{"id":6419,"url":"https:\/\/www.jitendrazaa.com\/blog\/salesforce\/introduction-to-lightning-test-services-with-jasmine\/","url_meta":{"origin":7058,"position":5},"title":"Introduction to Lightning Test Services with Jasmine","author":"Jitendra","date":"March 10, 2018","format":false,"excerpt":"Complete Source code and video of using Lightning Datatable Component and Jasmine in Salesforce","rel":"","context":"In &quot;Salesforce&quot;","block_context":{"text":"Salesforce","link":"https:\/\/www.jitendrazaa.com\/blog\/category\/salesforce\/"},"img":{"alt_text":"Lightning Testing Service (LTS)","src":"https:\/\/i0.wp.com\/www.jitendrazaa.com\/blog\/wp-content\/uploads\/2018\/03\/Lightning-Testing-Service-LTS.png?fit=1200%2C433&ssl=1&resize=350%2C200","width":350,"height":200,"srcset":"https:\/\/i0.wp.com\/www.jitendrazaa.com\/blog\/wp-content\/uploads\/2018\/03\/Lightning-Testing-Service-LTS.png?fit=1200%2C433&ssl=1&resize=350%2C200 1x, https:\/\/i0.wp.com\/www.jitendrazaa.com\/blog\/wp-content\/uploads\/2018\/03\/Lightning-Testing-Service-LTS.png?fit=1200%2C433&ssl=1&resize=525%2C300 1.5x, https:\/\/i0.wp.com\/www.jitendrazaa.com\/blog\/wp-content\/uploads\/2018\/03\/Lightning-Testing-Service-LTS.png?fit=1200%2C433&ssl=1&resize=700%2C400 2x, https:\/\/i0.wp.com\/www.jitendrazaa.com\/blog\/wp-content\/uploads\/2018\/03\/Lightning-Testing-Service-LTS.png?fit=1200%2C433&ssl=1&resize=1050%2C600 3x"},"classes":[]}],"jetpack_likes_enabled":true,"_links":{"self":[{"href":"https:\/\/www.jitendrazaa.com\/blog\/wp-json\/wp\/v2\/posts\/7058","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.jitendrazaa.com\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.jitendrazaa.com\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.jitendrazaa.com\/blog\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/www.jitendrazaa.com\/blog\/wp-json\/wp\/v2\/comments?post=7058"}],"version-history":[{"count":5,"href":"https:\/\/www.jitendrazaa.com\/blog\/wp-json\/wp\/v2\/posts\/7058\/revisions"}],"predecessor-version":[{"id":7071,"href":"https:\/\/www.jitendrazaa.com\/blog\/wp-json\/wp\/v2\/posts\/7058\/revisions\/7071"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/www.jitendrazaa.com\/blog\/wp-json\/wp\/v2\/media\/7059"}],"wp:attachment":[{"href":"https:\/\/www.jitendrazaa.com\/blog\/wp-json\/wp\/v2\/media?parent=7058"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.jitendrazaa.com\/blog\/wp-json\/wp\/v2\/categories?post=7058"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.jitendrazaa.com\/blog\/wp-json\/wp\/v2\/tags?post=7058"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}