{"id":5975,"date":"2021-01-20T06:30:00","date_gmt":"2021-01-20T06:30:00","guid":{"rendered":"https:\/\/www.greytrix.com\/blogs\/salesforce\/?p=5975"},"modified":"2024-05-23T11:08:31","modified_gmt":"2024-05-23T11:08:31","slug":"how-to-add-lightning-web-components-as-custom-tabs-in-salesforce","status":"publish","type":"post","link":"https:\/\/www.greytrix.com\/blogs\/salesforce\/2021\/01\/20\/how-to-add-lightning-web-components-as-custom-tabs-in-salesforce\/","title":{"rendered":"How to add Lightning Web Components as Custom Tabs in Salesforce"},"content":{"rendered":"\n<p>According to the release notes for <a href=\"https:\/\/help.salesforce.com\/s\/articleView?id=release-notes.salesforce_release_notes.htm&amp;release=222&amp;type=5\" target=\"_blank\" rel=\"noopener\">Winter &#8217;20<\/a>, you may now add the Lightning Web Component to Salesforce as a Custom Tab. Therefore, this blog post will explain how to construct a custom Lightning Web Component tab.<br><br>As we all know the\u00a0<strong>&lt;component>.js-meta.xml\u00a0<\/strong>configuration file defines the metadata values for the component. To define lightning tab, add the\u00a0<strong>lightning__Tab<\/strong>\u00a0target to the component\u2019s configuration file. Please see the below screenshot for the same.<\/p>\n\n\n\n<center><a href=\"https:\/\/www.greytrix.com\/blogs\/salesforce\/wp-content\/uploads\/2021\/01\/1.-Ligtning-Tab.jpg\" 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\/2021\/01\/1.-Ligtning-Tab.jpg\" alt=\"Lightning Tab\"><\/a><\/center>\n<font size=\"2\"><center><i>Lightning Tab<\/i><\/center><\/font>\n\n\n\n<p>Kindly follow below steps to create custom tab.<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li>Click on Gear Icon and then click on \u201c<strong>Setup<\/strong>\u201d<\/li>\n\n\n\n<li>Enter&nbsp;\u201c<strong>Tabs\u201d<\/strong>&nbsp;in the Quick Find box and click on \u201c<strong>Tabs<\/strong>\u201d<\/li>\n\n\n\n<li>Click on&nbsp;\u201c<strong>New\u201d<\/strong>&nbsp;button in&nbsp;<strong>Lightning Components Tabs<\/strong><\/li>\n\n\n\n<li>Then Select your <strong><em>LWC <\/em><\/strong>component.<\/li>\n<\/ul>\n\n\n\n<center><a href=\"https:\/\/www.greytrix.com\/blogs\/salesforce\/wp-content\/uploads\/2021\/01\/2.-Lightning-Component-Tab.jpg\" 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\/2021\/01\/2.-Lightning-Component-Tab.jpg\" alt=\"Lightning Component Tab\"><\/a><\/center>\n<font size=\"2\"><center><i>Lightning Component Tab<\/i><\/center><\/font>\n\n\n\n<ul class=\"wp-block-list\">\n<li>Click on \u201cNext\u201d and then \u201cSave\u201d the tab.<\/li>\n<\/ul>\n\n\n\n<p>Now you can view the Lightning Web Component Tab in your Org. Please see the below screenshot for the same.<\/p>\n\n\n\n<center><a href=\"https:\/\/www.greytrix.com\/blogs\/salesforce\/wp-content\/uploads\/2021\/01\/3.-Custom-Tab.jpg\" 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\/2021\/01\/3.-Custom-Tab.jpg\" alt=\"Custom Tab\"><\/a><\/center>\n<font size=\"2\"><center><i>Custom Tab<\/i><\/center><\/font>\n\n\n\n<p>We hope you may find this blog resourceful and helpful. If you still have concerns and need more help, please contact us at <a href=\"mailto:salesforce@greytrix.com\">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 rel=\"noreferrer noopener\" href=\"https:\/\/www.greytrix.com\/blogs\/salesforce\/2019\/08\/21\/import-entity-routine-in-gumus-new-pure-lightning-interface\/\" target=\"_blank\">GUMU&#x2122; Salesforce Tricks &amp; Tips \u2013 Real-Time Tax Calculation in Sales Order for Sage 100<\/a><\/li>\n\n\n\n<li><a rel=\"noreferrer noopener\" href=\"https:\/\/www.greytrix.com\/blogs\/salesforce\/2019\/11\/12\/create-entity-in-gumu-sage-100-integration-lightning-interface\/\" target=\"_blank\">Create Entity in GUMU&#x2122; SAGE 100 Integration \u2013 Lightning Interface<\/a><\/li>\n\n\n\n<li><a rel=\"noreferrer noopener\" href=\"https:\/\/www.greytrix.com\/blogs\/salesforce\/2019\/11\/18\/gumu-salesforce-tricks-tips-data-validation-for-sage-100-country-code-in-salesforce\/\" target=\"_blank\">GUMU&#x2122; Salesforce Tricks &amp; Tips \u2013 Data Validation for Sage 100 Country Code in Salesforce<\/a><\/li>\n<\/ul>\n\n\n\n<p><\/p>\n","protected":false},"excerpt":{"rendered":"<p>According to the release notes for Winter &#8217;20, you may now add the Lightning Web Component to Salesforce as a Custom Tab. Therefore, this blog post will explain how to construct a custom Lightning Web Component tab. As we all know the\u00a0&lt;component>.js-meta.xml\u00a0configuration file defines the metadata values for the component. To define lightning tab, add\u2026 <span class=\"read-more\"><a href=\"https:\/\/www.greytrix.com\/blogs\/salesforce\/2021\/01\/20\/how-to-add-lightning-web-components-as-custom-tabs-in-salesforce\/\">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":[51,1052,1050,1049,1051,809],"class_list":["post-5975","post","type-post","status-publish","format-standard","hentry","category-salesforce-srv","tag-configuration","tag-custom-tab","tag-lightning-web-component","tag-lwc","tag-meta","tag-tab"],"_links":{"self":[{"href":"https:\/\/www.greytrix.com\/blogs\/salesforce\/wp-json\/wp\/v2\/posts\/5975","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=5975"}],"version-history":[{"count":3,"href":"https:\/\/www.greytrix.com\/blogs\/salesforce\/wp-json\/wp\/v2\/posts\/5975\/revisions"}],"predecessor-version":[{"id":8419,"href":"https:\/\/www.greytrix.com\/blogs\/salesforce\/wp-json\/wp\/v2\/posts\/5975\/revisions\/8419"}],"wp:attachment":[{"href":"https:\/\/www.greytrix.com\/blogs\/salesforce\/wp-json\/wp\/v2\/media?parent=5975"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.greytrix.com\/blogs\/salesforce\/wp-json\/wp\/v2\/categories?post=5975"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.greytrix.com\/blogs\/salesforce\/wp-json\/wp\/v2\/tags?post=5975"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}