{"id":6595,"date":"2024-02-09T04:57:00","date_gmt":"2024-02-09T04:57:00","guid":{"rendered":"https:\/\/www.greytrix.com\/blogs\/salesforce\/?p=6595"},"modified":"2025-10-09T05:07:40","modified_gmt":"2025-10-09T05:07:40","slug":"how-to-fetch-current-record-id-from-lightning-web-components-lwc","status":"publish","type":"post","link":"https:\/\/www.greytrix.com\/blogs\/salesforce\/2024\/02\/09\/how-to-fetch-current-record-id-from-lightning-web-components-lwc\/","title":{"rendered":"How to fetch current Record Id from Lightning Web Components (LWC)"},"content":{"rendered":"\n<p>This blog post explains how to get the current record ID in the Lightning web component. The Record Id property is utilized on the Lightning record page, and it is set to the current record Id.<\/p>\n\n\n\n<p>We are using this property in a JavaScript class using a <strong>@api decorator, <\/strong>and we need to define recordId in public property.<\/p>\n\n\n\n<blockquote class=\"wp-block-quote is-layout-flow wp-block-quote-is-layout-flow\">\n<p><em><strong>Note:<\/strong> The lightning Web component should be added to a lightning record page.<\/em><\/p>\n<\/blockquote>\n\n\n\n<p>To get Id from the lightning web component, we need to define a <strong>recordId<\/strong> property with <strong>@api decorator. <\/strong>Now let us see an example &#8211;<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li>First, create a lightning web component page on any record page (Account, Opportunity, contact) using <strong>Visual studio code.<\/strong><\/li>\n\n\n\n<li>We are creating this LWC to get account details.<\/li>\n\n\n\n<li>Give any name to the LWC page as we are giving as recordIdexample. Use Control Shift P and select SFDX: Create lightning Web Component.<\/li>\n<\/ul>\n\n\n\n<blockquote class=\"wp-block-quote is-layout-flow wp-block-quote-is-layout-flow\">\n<p><em><strong>Note: <\/strong>Alternative of Using Control Shift P is <strong>go to View <\/strong>and select <strong>command Palette.<\/strong><\/em><\/p>\n<\/blockquote>\n\n\n\n<ul class=\"wp-block-list\">\n<li>We use this command palette to create SFDX: Create lightning Web Component. and <strong>authorize our org.<\/strong><\/li>\n\n\n\n<li>Now we are showing an <strong>account detail<\/strong> using recordId in lightning record form. We can also use some other details of the Account.<\/li>\n<\/ul>\n\n\n\n<p>Here is an example of a JavaScript class with the name <strong>myFirstLWC.js<\/strong><\/p>\n\n\n\n<center><a href=\"https:\/\/www.greytrix.com\/blogs\/salesforce\/wp-content\/uploads\/2022\/02\/1.-LWC-Class.png\" target=\"_blank\" rel=\"noreferrer noopener\"><img decoding=\"async\" class=\"size-full\" style=\"border: 1px solid #A9A9A9; padding: 2px; margin: 2px; align: center;\" src=\"https:\/\/www.greytrix.com\/blogs\/salesforce\/wp-content\/uploads\/2022\/02\/1.-LWC-Class.png\" alt=\"LWC Class\"><\/a><\/center>\n<font size=\"2\"><center><i>LWC Class<\/i><\/center><\/font>\n\n\n\n<ul class=\"wp-block-list\">\n<li>We are using this<strong> &lt;lightning-record-view-form&gt; to<\/strong> show the details of the Account using recordId.<\/li>\n\n\n\n<li>We can also use some other details also related to the Account.<\/li>\n<\/ul>\n\n\n\n<blockquote class=\"wp-block-quote is-layout-flow wp-block-quote-is-layout-flow\">\n<p><em><strong>Note:<\/strong> Because we are doing for account detail page, you can also do this for contact, opportunity, etc.<\/em><\/p>\n<\/blockquote>\n\n\n\n<p>Here is an example of an Html file with the name <strong>myFirstLWC.html<\/strong><\/p>\n\n\n\n<center><a href=\"https:\/\/www.greytrix.com\/blogs\/salesforce\/wp-content\/uploads\/2022\/02\/2.-HTML-File.png\" target=\"_blank\" rel=\"noreferrer noopener\"><img decoding=\"async\" class=\"size-full\" style=\"border: 1px solid #A9A9A9; padding: 2px; margin: 2px; align: center;\" src=\"https:\/\/www.greytrix.com\/blogs\/salesforce\/wp-content\/uploads\/2022\/02\/2.-HTML-File.png\" alt=\"HTML File\"><\/a><\/center>\n<font size=\"2\"><center><i>HTML File<\/i><\/center><\/font>\n\n\n\n<p class=\"has-vivid-red-color has-text-color has-link-color wp-elements-814cc45f4ecbe154b642fb3b410b045e\"><strong>myFirstLWC.js-meta.xml<\/strong><\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li>For the lightning-record page, we have given target as <strong>lightning-recordpage.<\/strong><\/li>\n\n\n\n<li>You can also give these details on the home page or any other page you want.<\/li>\n<\/ul>\n\n\n\n<center><a href=\"https:\/\/www.greytrix.com\/blogs\/salesforce\/wp-content\/uploads\/2022\/02\/3.-Lightning-Record-Page.png\" target=\"_blank\" rel=\"noreferrer noopener\"><img decoding=\"async\" class=\"size-full\" style=\"border: 1px solid #A9A9A9; padding: 2px; margin: 2px; align: center;\" src=\"https:\/\/www.greytrix.com\/blogs\/salesforce\/wp-content\/uploads\/2022\/02\/3.-Lightning-Record-Page.png\" alt=\"Lightning Record Page\"><\/a><\/center>\n<font size=\"2\"><center><i>Lightning Record Page<\/i><\/center><\/font>\n\n\n\n<p>Now let&#8217;s add this LWC on an Account details Page.<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li>Go to the <strong>Account Page<\/strong> of the Sales.<\/li>\n\n\n\n<li>Open any record or Account you want.<\/li>\n\n\n\n<li>Then Click on <strong>Setup (Gear Icon)<\/strong> and select the edit page option.<\/li>\n\n\n\n<li>On the left side, under <strong>Custom components, <\/strong>select your<strong> myFirstLWC component.<\/strong><\/li>\n\n\n\n<li>Drag and Drop on the right side of the top, click <strong>save and activate.<\/strong><\/li>\n\n\n\n<li>Below, you can see the Account detail on a lightning record page of the Account<strong>.<\/strong><\/li>\n<\/ul>\n\n\n\n<center><a href=\"https:\/\/www.greytrix.com\/blogs\/salesforce\/wp-content\/uploads\/2022\/02\/4.-LWC-Component-on-Account.png\" target=\"_blank\" rel=\"noreferrer noopener\"><img decoding=\"async\" class=\"size-full\" style=\"border: 1px solid #A9A9A9; padding: 2px; margin: 2px; align: center;\" src=\"https:\/\/www.greytrix.com\/blogs\/salesforce\/wp-content\/uploads\/2022\/02\/4.-LWC-Component-on-Account.png\" alt=\"Fetch current record id from Lightning Web Components on Account\"><\/a><\/center>\n<font size=\"2\"><center><i>Fetch current record id from Lightning Web Components on Account<\/i><\/center><\/font>\n\n\n\n<p>The above steps shows how user can fetch the current record Id from Salesforce using LWC.<\/p>\n\n\n\n<p>We hope that you find this blog helpful, if you still have queries, don\u2019t hesitate to contact us at&nbsp;<a rel=\"noreferrer noopener\" href=\"mailto:salesforce@greytrix.com\" target=\"_blank\">salesforce@greytrix.com<\/a>.<\/p>\n\n\n\n<p style=\"text-align: justify\"><b>About Us<\/b><\/br>\n<p><a href=\"https:\/\/www.greytrix.com\/\">Greytrix<\/a> \u2013 a globally recognized and one of the oldest Sage Development Partner and a Salesforce Product development partner offers a wide variety of integration products and services to the end users as well as to the Partners and Sage PSG across the globe. We offer Consultation, Configuration, Training and support services in out-of-the-box functionality as well as customizations to incorporate custom business rules and functionalities that require apex code incorporation into the Salesforce platform.<br><br> Greytrix has some unique solutions for Cloud CRM such as <a href=\"\">Salesforce Sage integration<\/a> for <a href=\"https:\/\/www.greytrix.com\/sage-x3-erp\/integration\/\">Sage X3<\/a>, <a href=\"https:\/\/www.greytrix.com\/salesforce-cloud-services\/sage-100-integration\/\">Sage 100<\/a> and <a href=\"https:\/\/www.greytrix.com\/salesforce-cloud-services\/sage-300-integration\/\">Sage 300 (Sage Accpac)<\/a>. We also offer best-in-class Cloud CRM <a href=\"https:\/\/www.greytrix.com\/salesforce-cloud-services\/crm-development\/\">Salesforce customization and development services<\/a> along with services such as Salesforce <a href=\"https:\/\/www.greytrix.com\/salesforce-cloud-services\/data-migration-support\/\">Data Migration<\/a>, <a href=\"https:\/\/www.greytrix.com\/salesforce-cloud-services\/crm-development\/\">Integrated App development<\/a>, Custom App development and Technical Support business partners and end users. Salesforce Cloud CRM integration offered by Greytrix works with Lightning web components and supports standard opportunity workflow. Greytrix GUMU&#x2122; integration for Sage ERP \u2013 Salesforce is a 5-star rated app listed on <a href=\"https:\/\/appexchange.salesforce.com\/appxListingDetail?listingId=a0N30000000psM5EAI\" target=\"_blank\" rel=\"noopener\">Salesforce AppExchange<\/a>.<br> The GUMU&#x2122; Cloud framework by Greytrix forms the backbone of cloud integrations that are managed in real-time for processing and execution of application programs at the click of a button.<br><br> For more information on our Salesforce products and services, contact us at <a href=\"mailto:salesforce@greytrix.com\">salesforce@greytrix.com<\/a>. We will be glad to assist you.<\/p>\n\n\n\n<p><strong>Related Posts<\/strong><\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li><a href=\"https:\/\/www.greytrix.com\/blogs\/salesforce\/2022\/01\/31\/how-to-call-the-apex-method-in-lightning-web-component\/\" target=\"_blank\" rel=\"noreferrer noopener\">How to call the apex method in lightning web component<\/a><\/li>\n\n\n\n<li><a rel=\"noreferrer noopener\" href=\"https:\/\/www.greytrix.com\/blogs\/salesforce\/2021\/09\/22\/how-to-use-email-template-in-apex-code\/\" target=\"_blank\">How to Use Email Template in Apex Code<\/a><\/li>\n\n\n\n<li><a rel=\"noreferrer noopener\" href=\"https:\/\/www.greytrix.com\/blogs\/salesforce\/2021\/08\/16\/clone-record-of-any-object-using-flows-in-salesforce\/\" target=\"_blank\">Clone Record of Any Object using Flows in Salesforce<\/a><\/li>\n\n\n\n<li><a rel=\"noreferrer noopener\" href=\"https:\/\/www.greytrix.com\/blogs\/salesforce\/2021\/08\/14\/how-to-avoid-null-pointer-exception-by-using-safe-navigator-operator\/\" target=\"_blank\">How to Avoid Null Pointer Exception By Using Safe Navigator Operator (?.)<\/a><\/li>\n\n\n\n<li><a rel=\"noreferrer noopener\" href=\"https:\/\/www.greytrix.com\/blogs\/salesforce\/2021\/08\/17\/how-to-create-a-dynamic-multi-filter-object-in-salesforce-part-i\/\" target=\"_blank\">How to create a dynamic multi-filter object in Salesforce-Part I<\/a><\/li>\n<\/ul>\n\n\n\n<p><\/p>\n","protected":false},"excerpt":{"rendered":"<p>This blog post explains how to get the current record ID in the Lightning web component. The Record Id property is utilized on the Lightning record page, and it is set to the current record Id. We are using this property in a JavaScript class using a @api decorator, and we need to define recordId\u2026 <span class=\"read-more\"><a href=\"https:\/\/www.greytrix.com\/blogs\/salesforce\/2024\/02\/09\/how-to-fetch-current-record-id-from-lightning-web-components-lwc\/\">Read More &raquo;<\/a><\/span><\/p>\n","protected":false},"author":2,"featured_media":0,"comment_status":"closed","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[3],"tags":[13,859,14,15,16,18,20,206,207,208,1050,1049,1079,643,651],"class_list":["post-6595","post","type-post","status-publish","format-standard","hentry","category-salesforce-srv","tag-apex","tag-apex-class","tag-apex-classes","tag-apex-development","tag-apex-in-salesforce","tag-apex-methods","tag-apex-references-in-salesforce","tag-lightning","tag-lightning-basics","tag-lightning-component","tag-lightning-web-component","tag-lwc","tag-record-page","tag-retrieve-records-in-lightning","tag-salesforce-lightning-component"],"_links":{"self":[{"href":"https:\/\/www.greytrix.com\/blogs\/salesforce\/wp-json\/wp\/v2\/posts\/6595","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.greytrix.com\/blogs\/salesforce\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.greytrix.com\/blogs\/salesforce\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.greytrix.com\/blogs\/salesforce\/wp-json\/wp\/v2\/users\/2"}],"replies":[{"embeddable":true,"href":"https:\/\/www.greytrix.com\/blogs\/salesforce\/wp-json\/wp\/v2\/comments?post=6595"}],"version-history":[{"count":5,"href":"https:\/\/www.greytrix.com\/blogs\/salesforce\/wp-json\/wp\/v2\/posts\/6595\/revisions"}],"predecessor-version":[{"id":9271,"href":"https:\/\/www.greytrix.com\/blogs\/salesforce\/wp-json\/wp\/v2\/posts\/6595\/revisions\/9271"}],"wp:attachment":[{"href":"https:\/\/www.greytrix.com\/blogs\/salesforce\/wp-json\/wp\/v2\/media?parent=6595"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.greytrix.com\/blogs\/salesforce\/wp-json\/wp\/v2\/categories?post=6595"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.greytrix.com\/blogs\/salesforce\/wp-json\/wp\/v2\/tags?post=6595"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}