{"id":6798,"date":"2019-03-03T20:17:00","date_gmt":"2019-03-04T01:17:00","guid":{"rendered":"https:\/\/www.jitendrazaa.com\/blog\/?p=6798"},"modified":"2019-03-03T20:17:08","modified_gmt":"2019-03-04T01:17:08","slug":"getting-started-with-lightning-web-component","status":"publish","type":"post","link":"https:\/\/www.jitendrazaa.com\/blog\/salesforce\/getting-started-with-lightning-web-component\/","title":{"rendered":"Getting Started with Lightning Web Component"},"content":{"rendered":"\n<p>Before starting with Lightning Web Component, I would suggest to read <a href=\"https:\/\/www.jitendrazaa.com\/blog\/salesforce\/introduction-to-html-web-components\/\">this introduction post<\/a> first. <\/p>\n\n\n\n<p>If you enjoy watching video then you might enjoy below video where I conducted Live coding explaining basics of Lightning Web Component.<\/p>\n\n\n\n<figure class=\"wp-block-embed-youtube wp-block-embed is-type-video is-provider-youtube wp-embed-aspect-16-9 wp-has-aspect-ratio\"><div class=\"wp-block-embed__wrapper\">\n<iframe loading=\"lazy\" title=\"Introduction to Lightning Web Components\" width=\"500\" height=\"281\" src=\"https:\/\/www.youtube.com\/embed\/KKNEpPP6V4s?feature=oembed\" frameborder=\"0\" allow=\"accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share\" referrerpolicy=\"strict-origin-when-cross-origin\" allowfullscreen><\/iframe>\n<\/div><\/figure>\n\n\n\n<p>In this post, we are going to Show<strong> loading image<\/strong> on initial load of LWC. In background we would be calling Apex class to take decision if loading image should be hided or redirect user to some other page. <\/p>\n\n\n\n<!--more-->\n\n\n\n<p>To make LWC faster, we are going to use <strong>@Auraenabled(Cacheable=true)<\/strong> and <strong>Platform Cache<\/strong> (Session based)<\/p>\n\n\n\n<p>Below code snippets are self explanatory and would help to get started with calling Apex from Salesforce.<\/p>\n\n\n\n<script src=\"https:\/\/gist.github.com\/JitendraZaa\/972516dd00f208e95232a0d2c2639f66.js\"><\/script>\n","protected":false},"excerpt":{"rendered":"<p>Before starting with Lightning Web Component, I would suggest to read this introduction post first. If you enjoy watching video then you might enjoy below video where I conducted Live coding explaining basics of Lightning Web Component. In this post, we are going to Show loading image on initial load of LWC. In background we [&hellip;]<\/p>\n","protected":false},"author":1,"featured_media":0,"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":[310,9],"tags":[462,464,380],"class_list":["post-6798","post","type-post","status-publish","format-standard","hentry","category-lightning","category-salesforce","tag-lightning-web-component","tag-lwc","tag-platform-cache"],"jetpack_featured_media_url":"","jetpack_sharing_enabled":true,"jetpack-related-posts":[{"id":6908,"url":"https:\/\/www.jitendrazaa.com\/blog\/salesforce\/point-and-click\/use-lightning-web-components-in-flow\/","url_meta":{"origin":6798,"position":0},"title":"Use Lightning Web Components in Flow","author":"Jitendra","date":"October 21, 2019","format":false,"excerpt":"Endless limit for your Salesforce application by combining Flow with Lightning Web Components (LWC)","rel":"","context":"In &quot;Lightning Web Components&quot;","block_context":{"text":"Lightning Web Components","link":"https:\/\/www.jitendrazaa.com\/blog\/category\/salesforce\/lightning-web-components\/"},"img":{"alt_text":"Using LWC in Flow","src":"https:\/\/i0.wp.com\/www.jitendrazaa.com\/blog\/wp-content\/uploads\/2019\/10\/Using-LWC-in-Flow-e1571713113388.png?fit=1200%2C651&ssl=1&resize=350%2C200","width":350,"height":200,"srcset":"https:\/\/i0.wp.com\/www.jitendrazaa.com\/blog\/wp-content\/uploads\/2019\/10\/Using-LWC-in-Flow-e1571713113388.png?fit=1200%2C651&ssl=1&resize=350%2C200 1x, https:\/\/i0.wp.com\/www.jitendrazaa.com\/blog\/wp-content\/uploads\/2019\/10\/Using-LWC-in-Flow-e1571713113388.png?fit=1200%2C651&ssl=1&resize=525%2C300 1.5x, https:\/\/i0.wp.com\/www.jitendrazaa.com\/blog\/wp-content\/uploads\/2019\/10\/Using-LWC-in-Flow-e1571713113388.png?fit=1200%2C651&ssl=1&resize=700%2C400 2x, https:\/\/i0.wp.com\/www.jitendrazaa.com\/blog\/wp-content\/uploads\/2019\/10\/Using-LWC-in-Flow-e1571713113388.png?fit=1200%2C651&ssl=1&resize=1050%2C600 3x"},"classes":[]},{"id":7072,"url":"https:\/\/www.jitendrazaa.com\/blog\/salesforce\/share-javascript-code-in-lightning-web-component-to-read-url-parameters\/","url_meta":{"origin":6798,"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":7058,"url":"https:\/\/www.jitendrazaa.com\/blog\/salesforce\/gravatar-reusable-lightning-web-component\/","url_meta":{"origin":6798,"position":2},"title":"Gravatar &#8211; Reusable Lightning Web Component","author":"Jitendra","date":"May 2, 2020","format":false,"excerpt":"Avoid asking your users to upload pictures - Use Globally Recognized Avatar , Reusable Lightning Web Component","rel":"","context":"In &quot;Salesforce&quot;","block_context":{"text":"Salesforce","link":"https:\/\/www.jitendrazaa.com\/blog\/category\/salesforce\/"},"img":{"alt_text":"Gravatar - Reusable Lightning Web Component","src":"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&resize=350%2C200","width":350,"height":200,"srcset":"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&resize=350%2C200 1x, 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&resize=525%2C300 1.5x, 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&resize=700%2C400 2x"},"classes":[]},{"id":6848,"url":"https:\/\/www.jitendrazaa.com\/blog\/salesforce\/lightning-web-component-event-handling-pub-sub\/","url_meta":{"origin":6798,"position":3},"title":"Lightning Web Component Event Handling &#8211; Pub Sub","author":"Jitendra","date":"June 21, 2019","format":false,"excerpt":"How to handle events in Lightning Web Components between nested and non nested Components","rel":"","context":"In &quot;Salesforce&quot;","block_context":{"text":"Salesforce","link":"https:\/\/www.jitendrazaa.com\/blog\/category\/salesforce\/"},"img":{"alt_text":"Event Communication between Lightning Web Components","src":"https:\/\/i0.wp.com\/www.jitendrazaa.com\/blog\/wp-content\/uploads\/2019\/05\/Event-Communication-between-Lightning-Web-Components.png?fit=675%2C382&ssl=1&resize=350%2C200","width":350,"height":200,"srcset":"https:\/\/i0.wp.com\/www.jitendrazaa.com\/blog\/wp-content\/uploads\/2019\/05\/Event-Communication-between-Lightning-Web-Components.png?fit=675%2C382&ssl=1&resize=350%2C200 1x, https:\/\/i0.wp.com\/www.jitendrazaa.com\/blog\/wp-content\/uploads\/2019\/05\/Event-Communication-between-Lightning-Web-Components.png?fit=675%2C382&ssl=1&resize=525%2C300 1.5x"},"classes":[]},{"id":6920,"url":"https:\/\/www.jitendrazaa.com\/blog\/salesforce\/data-exchange-between-aura-lightning-web-components-lwc-and-visualforce\/","url_meta":{"origin":6798,"position":4},"title":"Event Handling between Aura, Lightning Web Components (LWC) and Visualforce","author":"Jitendra","date":"October 16, 2019","format":false,"excerpt":"How to use Lightning Message Services for event handling between Lightning Web Components, Aura Components and Visualforce","rel":"","context":"In &quot;Lightning&quot;","block_context":{"text":"Lightning","link":"https:\/\/www.jitendrazaa.com\/blog\/category\/salesforce\/lightning\/"},"img":{"alt_text":"Salesforce Lightning Message Service","src":"https:\/\/i0.wp.com\/www.jitendrazaa.com\/blog\/wp-content\/uploads\/2019\/10\/Salesforce-Lightning-Message-Service.png?fit=1200%2C1046&ssl=1&resize=350%2C200","width":350,"height":200,"srcset":"https:\/\/i0.wp.com\/www.jitendrazaa.com\/blog\/wp-content\/uploads\/2019\/10\/Salesforce-Lightning-Message-Service.png?fit=1200%2C1046&ssl=1&resize=350%2C200 1x, https:\/\/i0.wp.com\/www.jitendrazaa.com\/blog\/wp-content\/uploads\/2019\/10\/Salesforce-Lightning-Message-Service.png?fit=1200%2C1046&ssl=1&resize=525%2C300 1.5x, https:\/\/i0.wp.com\/www.jitendrazaa.com\/blog\/wp-content\/uploads\/2019\/10\/Salesforce-Lightning-Message-Service.png?fit=1200%2C1046&ssl=1&resize=700%2C400 2x, https:\/\/i0.wp.com\/www.jitendrazaa.com\/blog\/wp-content\/uploads\/2019\/10\/Salesforce-Lightning-Message-Service.png?fit=1200%2C1046&ssl=1&resize=1050%2C600 3x"},"classes":[]},{"id":7101,"url":"https:\/\/www.jitendrazaa.com\/blog\/salesforce\/implement-infinite-scrolling-for-lightning-data-table\/","url_meta":{"origin":6798,"position":5},"title":"Implement Infinite Scrolling for lightning-datatable","author":"Jitendra","date":"June 10, 2020","format":false,"excerpt":"When to use wire vs Imperative approach to call Apex in Lightning Web Component","rel":"","context":"In &quot;Lightning Web Components&quot;","block_context":{"text":"Lightning Web Components","link":"https:\/\/www.jitendrazaa.com\/blog\/category\/salesforce\/lightning-web-components\/"},"img":{"alt_text":"Salesforce Lightning Datatable Infinite Scrolling","src":"https:\/\/i0.wp.com\/www.jitendrazaa.com\/blog\/wp-content\/uploads\/2020\/06\/Salesforce-Lightning-Datatable-Infinite-Scrolling-e1624579111169.png?fit=700%2C385&ssl=1&resize=350%2C200","width":350,"height":200,"srcset":"https:\/\/i0.wp.com\/www.jitendrazaa.com\/blog\/wp-content\/uploads\/2020\/06\/Salesforce-Lightning-Datatable-Infinite-Scrolling-e1624579111169.png?fit=700%2C385&ssl=1&resize=350%2C200 1x, https:\/\/i0.wp.com\/www.jitendrazaa.com\/blog\/wp-content\/uploads\/2020\/06\/Salesforce-Lightning-Datatable-Infinite-Scrolling-e1624579111169.png?fit=700%2C385&ssl=1&resize=525%2C300 1.5x, https:\/\/i0.wp.com\/www.jitendrazaa.com\/blog\/wp-content\/uploads\/2020\/06\/Salesforce-Lightning-Datatable-Infinite-Scrolling-e1624579111169.png?fit=700%2C385&ssl=1&resize=700%2C400 2x"},"classes":[]}],"jetpack_likes_enabled":true,"_links":{"self":[{"href":"https:\/\/www.jitendrazaa.com\/blog\/wp-json\/wp\/v2\/posts\/6798","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=6798"}],"version-history":[{"count":1,"href":"https:\/\/www.jitendrazaa.com\/blog\/wp-json\/wp\/v2\/posts\/6798\/revisions"}],"predecessor-version":[{"id":6799,"href":"https:\/\/www.jitendrazaa.com\/blog\/wp-json\/wp\/v2\/posts\/6798\/revisions\/6799"}],"wp:attachment":[{"href":"https:\/\/www.jitendrazaa.com\/blog\/wp-json\/wp\/v2\/media?parent=6798"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.jitendrazaa.com\/blog\/wp-json\/wp\/v2\/categories?post=6798"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.jitendrazaa.com\/blog\/wp-json\/wp\/v2\/tags?post=6798"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}