{"id":6736,"date":"2022-08-18T11:14:56","date_gmt":"2022-08-18T11:14:56","guid":{"rendered":"https:\/\/www.greytrix.com\/blogs\/salesforce\/?p=6736"},"modified":"2022-08-18T11:15:01","modified_gmt":"2022-08-18T11:15:01","slug":"navigation-service-in-lwc","status":"publish","type":"post","link":"https:\/\/www.greytrix.com\/blogs\/salesforce\/2022\/08\/18\/navigation-service-in-lwc\/","title":{"rendered":"Navigation Service in LWC"},"content":{"rendered":"\n<p>In this blog, we are going to discuss <strong>\u201cNavigation Service in LWC\u201d<\/strong> which is used to create a new account from an Account record page. This is not just limited to creating a new account you can perform various other tasks with it like going to the account list view, Creating a contact from the account screen, etc.<\/p>\n\n\n\n<h4 class=\"wp-block-heading\"><em><strong><span style=\"text-decoration: underline;\">Navigation Service in LWC<\/span><\/strong><\/em><\/h4>\n\n\n\n<p>Here are the steps to use the navigation service.<\/p>\n\n\n\n<ul class=\"wp-block-list\"><li>Navigation service uses a PageReference.And a page reference is JavaScript that describes its page type, its attributes, and the state of the page.<\/li><li>First, we need to import the<strong> lightning\/navigation module<\/strong>.<\/li><li>Use this Syntax:- <strong>\u00a0 Import {NavigationMixin} from &#8216;lightning\/navigation;<\/strong><\/li><\/ul>\n\n\n\n<p>Apply&nbsp;the <strong>NavigationMixin<\/strong> function to your component\u2019s base Class.<\/p>\n\n\n\n<p>Syntax: Export default class MyCustomElement extends NavigationMixin(LightningElement) {}<\/p>\n\n\n\n<ul class=\"wp-block-list\"><li>Create a javascript that defines a page.<\/li><li>In javascript call the navigation services that are [NavigationMixin.Navigate] page reference.<\/li><li><strong>Example:<\/strong><\/li><\/ul>\n\n\n\n<pre class=\"wp-block-code\"><code>navigateNext() {\n      this&#91;NavigationMixin.Navigate]({\n           type: 'standard__navItemPage',\n           attributes: {\n               apiName: this.tabName,\n           },\n      });\n}<\/code><\/pre>\n\n\n\n<ul class=\"wp-block-list\"><li>The component <strong><u>NavigationMixin.Navigate<\/u> is <\/strong>used to navigate another page in the application.<\/li><li>Now let&#8217;s see an example of this:-<\/li><li>First, create an Html page in LWC.\u00a0\u00a0<\/li><\/ul>\n\n\n\n<center><a href=\"https:\/\/www.greytrix.com\/blogs\/salesforce\/wp-content\/uploads\/2022\/08\/1.navigateservice.html.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\/08\/1.navigateservice.html.png\" alt=\"Navigation Service in LWC Or Navigate Service Html Code\"><\/a><\/center>\n<font size=\"2\"><center><i>Navigate Service Html Code<\/i><\/center><\/font>\n\n\n\n<ul class=\"wp-block-list\"><li>Then call the action i.e <strong>Onclick&nbsp;javascript controller<\/strong>.<\/li><\/ul>\n\n\n\n<center><a href=\"https:\/\/www.greytrix.com\/blogs\/salesforce\/wp-content\/uploads\/2022\/08\/2.navigateservice.js.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\/08\/2.navigateservice.js.png\" alt=\"Navigate Service JavaScript Code\"><\/a><\/center>\n<font size=\"2\"><center><i>Navigate Service JavaScript Code <\/i><\/center><\/font>\n\n\n\n<ul class=\"wp-block-list\"><li>Then create an XML page to show the navigation work on UI.<\/li><\/ul>\n\n\n\n<center><a href=\"https:\/\/www.greytrix.com\/blogs\/salesforce\/wp-content\/uploads\/2022\/08\/3.naviagteservice.js-meta.xml_.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\/08\/3.naviagteservice.js-meta.xml_.png\" alt=\"Navigate Service Meta XML Code\"><\/a><\/center>\n<font size=\"2\"><center><i>Navigate Service Meta XML Code <\/i><\/center><\/font>\n\n\n\n<pre class=\"wp-block-verse\"><strong><em>Note: You can show this in any object on the lightning record page, home page, and also the App page.<\/em><\/strong><\/pre>\n\n\n\n<ul class=\"wp-block-list\"><li>Now let&#8217;s add this navigate button on the r<strong>ecord page of the account.<\/strong><\/li><li>To add this button <strong>go to the edit page<\/strong> and drag your custom component named <strong>navigateservice, <\/strong>then click on <strong>save and active.<\/strong><\/li><\/ul>\n\n\n\n<center><a href=\"https:\/\/www.greytrix.com\/blogs\/salesforce\/wp-content\/uploads\/2022\/08\/4.Account-record-page.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\/2022\/08\/4.Account-record-page.jpg\" alt=\"Account Record Page\"><\/a><\/center>\n<font size=\"2\"><center><i>Account Record Page <\/i><\/center><\/font>\n\n\n\n<p>Using the details mentioned in the steps above, we hope you are be able to undertand on \u201cNavigation Service in LWC\u201d. You can find more details on Navigation and Salesforce on their help page\u00a0<a href=\"https:\/\/developer.salesforce.com\/docs\/component-library\/bundle\/lightning-navigation\" target=\"_blank\" data-type=\"URL\" data-id=\"https:\/\/developer.salesforce.com\/docs\/component-library\/bundle\/lightning-navigation\" rel=\"noreferrer noopener\">here<\/a>.<\/p>\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 get in touch with 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\"><li><a href=\"https:\/\/www.greytrix.com\/blogs\/salesforce\/2022\/02\/22\/displaying-types-of-toast-message-in-lightning-web-component\/\" target=\"_blank\" data-type=\"URL\" data-id=\"https:\/\/www.greytrix.com\/blogs\/salesforce\/2022\/02\/22\/displaying-types-of-toast-message-in-lightning-web-component\/\" rel=\"noreferrer noopener\">Displaying Types of Toast Message in Lightning Web component.<\/a><\/li><li><a href=\"https:\/\/www.greytrix.com\/blogs\/salesforce\/2022\/02\/09\/how-to-fetch-current-record-id-from-lightning-web-components-lwc\/\" target=\"_blank\" data-type=\"URL\" data-id=\"https:\/\/www.greytrix.com\/blogs\/salesforce\/2022\/02\/09\/how-to-fetch-current-record-id-from-lightning-web-components-lwc\/\" rel=\"noreferrer noopener\">How to Fetch current Record Id from Lightning Web Components (LWC).<\/a><\/li><li><a href=\"https:\/\/www.greytrix.com\/blogs\/salesforce\/2022\/02\/14\/how-to-create-multi-select-pick-list-field-using-lightning-web-component\/\" target=\"_blank\" data-type=\"URL\" data-id=\"https:\/\/www.greytrix.com\/blogs\/salesforce\/2022\/02\/14\/how-to-create-multi-select-pick-list-field-using-lightning-web-component\/\" rel=\"noreferrer noopener\">How to Create Multi-Select Pick-list Field Using Lightning Web Component<\/a><\/li><li><a href=\"https:\/\/www.greytrix.com\/blogs\/salesforce\/2022\/02\/16\/how-to-invoke-an-lwc-component-function-from-aura-component\/\" data-type=\"URL\" data-id=\"https:\/\/www.greytrix.com\/blogs\/salesforce\/2022\/02\/16\/how-to-invoke-an-lwc-component-function-from-aura-component\/\" target=\"_blank\" rel=\"noreferrer noopener\">How to invoke an LWC Component function from Aura Component.<\/a><\/li><\/ul>\n\n\n\n<p><\/p>\n","protected":false},"excerpt":{"rendered":"<p>In this blog, we are going to discuss \u201cNavigation Service in LWC\u201d which is used to create a new account from an Account record page. This is not just limited to creating a new account you can perform various other tasks with it like going to the account list view, Creating a contact from the\u2026 <span class=\"read-more\"><a href=\"https:\/\/www.greytrix.com\/blogs\/salesforce\/2022\/08\/18\/navigation-service-in-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":[206,1055,207,208,1287,1050,1290,1049,1292,651,1032],"class_list":["post-6736","post","type-post","status-publish","format-standard","hentry","category-salesforce-srv","tag-lightning","tag-lightning-aura-component","tag-lightning-basics","tag-lightning-component","tag-lightning-record-page","tag-lightning-web-component","tag-lightning-checkbox-group","tag-lwc","tag-navigation-2","tag-salesforce-lightning-component","tag-salesforce-lightning-component-bundle"],"_links":{"self":[{"href":"https:\/\/www.greytrix.com\/blogs\/salesforce\/wp-json\/wp\/v2\/posts\/6736","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=6736"}],"version-history":[{"count":4,"href":"https:\/\/www.greytrix.com\/blogs\/salesforce\/wp-json\/wp\/v2\/posts\/6736\/revisions"}],"predecessor-version":[{"id":6767,"href":"https:\/\/www.greytrix.com\/blogs\/salesforce\/wp-json\/wp\/v2\/posts\/6736\/revisions\/6767"}],"wp:attachment":[{"href":"https:\/\/www.greytrix.com\/blogs\/salesforce\/wp-json\/wp\/v2\/media?parent=6736"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.greytrix.com\/blogs\/salesforce\/wp-json\/wp\/v2\/categories?post=6736"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.greytrix.com\/blogs\/salesforce\/wp-json\/wp\/v2\/tags?post=6736"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}