How to navigate from one component to another component on click button after Change Opportunity Stages (Mark Stage as Complete) in lightning component Salesforce | how to navigate lightning component on click button after changed the opportunity StageName Value in Salesforce lightning component

4,579 views

Hey guys, today in this post we are going to learn If Opportunity Stages Change then check the StageName Value through Javascript after that navigate the lightning component by on click custom button in lightning Salesforce

Real time scenarios:- If Opportunity Stages (Mark Stage as Complete) then check the value and navigate from one component to another component on click button in Salesforce.

Files we used to navigate the lightning component on click button

navigateStageCmp.cmp Lightning Component It is used to create a Navigation Button to navigate from one component to another component in lightning.
navigateStageCmpController.js JavaScript Controller File It is hold Javascript click function to check the StageName and navigate the component from one to another component.
navigateStageCmpHelper.js JavaScript Controller Helper File It is hold Javascript Helper stageCompToNaviagate action to check the StageName and navigate to respective component as per Mark Stage as Complete.
naviagateStageCtrl.apxc Apex Class Controller It is used to get the current record Id from Opportunity Object through Apex class method.
qualificationStageCmp.cmp Lightning Component It’s navigate on click button if StageName is Qualification
needsAnalysisStageCmp.cmp Lightning Component It’s navigate on click button if StageName is NeedsAnalysis.

Live Demo

Why Should You Schedule Meeting?

🎯 If You Are Facing Any Of These 6 Challenges. Schedule Meeting With Me.

  • Learn Salesforce Development
  • Career Confusion
  • No Interview Call
  • Low Salary
  • No Promotion/Growth
  • No Finding New Job Opportunity
  • Why you stucking from past so many years in same company?

 

navigate the lightning component by on click custom -- w3web.net
 

You can download file directly from github by Click Here.

 

 

Other related post that would you like to learn in Salesforce

 

  • Find the below steps

Create Lightning Component

Step 1:- Create Lightning Component : navigateStageCmp.cmp

From Developer Console >> File >> New >> Lightning Component

navigateStageCmp.cmp [Lightning Component File]

  1.    <aura:component controller="naviagateStageCtrl" implements="force:appHostable,flexipage:availableForAllPageTypes,flexipage:availableForRecordHome,force:hasRecordId,forceCommunity:availableForAllPageTypes,force:lightningQuickAction" access="global" >
  2. 	<div class="slds"> 
  3.        <lightning:card> 
  4.           <div style="text-align:center;"> <lightning:button variant="brand" label="Naviagate to Component" title="Naviagate" type="Button" onclick="{!c.naviagateAction}" /> </div> 
  5.  
  6. <br/>
  7.    <!--Start RelatedTopics Section-->
  8. <div style="border:1px #ddd solid; padding:10px; background:#eee; margin:40px 0;">
  9.  
  10.             <p data-aura-rendered-by="435:0"><img src="https://www.w3web.net/wp-content/uploads/2021/05/thumbsUpLike.png" width="25" height="25" style="vertical-align:top; margin-right:10px;" data-aura-rendered-by="436:0"><strong data-aura-rendered-by="437:0"><span style="font-size:16px; font-style:italic; display:inline-block; margin-right:5px;">Don't forget to check out:-</span><a href="https://www.w3web.net/" target="_blank" rel="noopener noreferrer" style="text-decoration:none;" data-aura-rendered-by="440:0">An easy way to learn step-by-step online free Salesforce tutorial, To know more Click  <span style="color:#ff8000; font-size:18px;" data-aura-rendered-by="442:0">Here..</span></a></strong></p>
  11.  
  12.             <br/><br/>
  13.             <p data-aura-rendered-by="435:0"><img src="https://www.w3web.net/wp-content/uploads/2021/07/tickMarkIcon.png" width="25" height="25" style="vertical-align:top; margin-right:10px;" data-aura-rendered-by="436:0"><strong data-aura-rendered-by="437:0"><span style="font-size:17px; font-style:italic; display:inline-block; margin-right:5px; color:rgb(255 128 0);">You May Also Like →</span> </strong></p>
  14.             <div style="display:block; overflow:hidden;"> 
  15.                 <div style="width: 50%; float:left; display:inline-block">
  16.                     <ul style="list-style-type: square; font-size: 16px; margin: 0 0 0 54px; padding: 0;"> 
  17.                         <li><a href="https://www.w3web.net/lwc-get-set-lightning-checkbox-value/" target="_blank" rel="noopener noreferrer">How to get selected checkbox value in lwc</a></li>
  18.                         <li><a href="https://www.w3web.net/display-account-related-contacts-in-lwc/" target="_blank" rel="noopener noreferrer">how to display account related contacts based on AccountId in lwc</a></li>
  19.                         <li><a href="https://www.w3web.net/create-lightning-datatable-row-actions-in-lwc/" target="_blank" rel="noopener noreferrer">how to create lightning datatable row actions in lwc</a></li>
  20.                         <li><a href="https://www.w3web.net/if-and-else-condition-in-lwc/" target="_blank" rel="noopener noreferrer">how to use if and else condition in lwc</a></li>
  21.                         <li><a href="https://www.w3web.net/get-selected-radio-button-value-and-checked-default-in-lwc/" target="_blank" rel="noopener noreferrer">how to display selected radio button value in lwc</a></li>
  22.                     </ul>
  23.             </div>
  24.  
  25.             <div style="width: 50%; float:left; display:inline-block">
  26.                     <ul style="list-style-type: square; font-size: 16px; margin: 0 0 0 54px; padding: 0;"> 
  27.                         <li><a href="https://www.w3web.net/display-account-related-contacts-lwc/" target="_blank" rel="noopener noreferrer">display account related contacts based on account name in lwc</a></li>
  28.                         <li><a href="https://www.w3web.net/create-lightning-datatable-row-actions-in-lwc/" target="_blank" rel="noopener noreferrer">how to insert a record of account Using apex class in LWC</a></li>
  29.                         <li><a href="https://www.w3web.net/fetch-picklist-values-dynamic-in-lwc/" target="_blank" rel="noopener noreferrer">how to get picklist values dynamically in lwc</a></li>
  30.                         <li><a href="https://www.w3web.net/edit-save-and-remove-rows-dynamically-in-lightning-component/" target="_blank" rel="noopener noreferrer">how to edit/save row dynamically in lightning component</a></li>
  31.                         <li><a href="https://www.w3web.net/update-parent-object-from-child/" target="_blank" rel="noopener noreferrer">update parent field from child using apex trigger</a></li>
  32.                     </ul>
  33.                 </div>
  34.                <div style="clear:both;"></div> 
  35.                <br/>
  36.                 <div class="youtubeIcon">
  37.                     <a href="https://www.youtube.com/channel/UCW62gTen2zniILj9xE6LmOg" target="_blank" rel="noopener noreferrer"><img src="https://www.w3web.net/wp-content/uploads/2021/11/youtubeIcon.png" width="25" height="25" style="vertical-align:top; margin-right:10px;"/> <strong>TechW3web:-</strong> To know more, Use this <span style="color: #ff8000; font-weight: bold;">Link</span> </a>
  38.                 </div>
  39.     </div>
  40.  
  41. </div>
  42.  
  43.   <!--End RelatedTopics Section-->
  44.        </lightning:card>    
  45.     </div>
  46. </aura:component>

Create JavaScript Controller

Step 2:- Create Lightning Component : navigateStageCmpController.js

From Developer Console >> File >> New >> Lightning Component >> JavaScript Controller

navigateStageCmpController.js [JavaScript Controller]

  1.    ({
  2. 	naviagateAction : function(component, event, helper) {
  3. 		helper.naviagateStageHelper(component);
  4. 	},
  5.  
  6. })

Create JavaScript Helper

Step 3:- Create Lightning Component : navigateStageCmpHelper.js

From Developer Console >> File >> New >> Lightning Component >> JavaScript Helper

navigateStageCmpHelper.js [JavaScript Helper File]

  1.    ({
  2.     naviagateStageHelper : function(component, event, helper) {
  3.         var recordId = component.get("v.recordId");
  4.  
  5.         if(recordId !='' && recordId !='UNDEFINED'){
  6.             var action = component.get('c.getOppStage');           
  7.             action.setParams({
  8.                 "recId":recordId,
  9.             });
  10.             action.setCallback(this, function(response){
  11.                 var State = response.getState();
  12.                 if(State == "SUCCESS"){
  13.                     var result = response.getReturnValue();
  14.                     this.stageCompToNaviagate(result.StageName, recordId); 
  15.                 }
  16.             });
  17.             $A.enqueueAction(action);            
  18.         }        
  19.  
  20.     },
  21.  
  22.     stageCompToNaviagate:function(stageName, oppId){
  23.         var compToNavigate;
  24.         if(stageName == 'Qualification'){
  25.             compToNavigate = "c:qualificationStageCmp";
  26.         }else if(stageName == 'Needs Analysis'){
  27.             compToNavigate = "c:needsAnalysisStageCmp";
  28.         }
  29.  
  30.         var evt = $A.get("e.force:navigateToComponent");
  31.  
  32.         evt.setParams({
  33.             componentDef : compToNavigate,
  34.             componentAttributes: {
  35.                 oppId : oppId
  36.             }
  37.         });
  38.         evt.fire();
  39.     }
  40.  
  41.  
  42. })

Create Apex Class Controller

Step 4:- Create Apex Class : naviagateStageCtrl.apxc

From Developer Console >> File >> New >> Apex Class

naviagateStageCtrl.apxc [Apex Class Controller]

  1.    public class naviagateStageCtrl {
  2.     @AuraEnabled
  3.     public static Opportunity getOppStage(String recId){
  4.         Opportunity oppObj = [SELECT Id, StageName FROM Opportunity WHERE Id=:recId];
  5.         //system.debug('oppObj ' + oppObj);
  6.         RETURN oppObj;
  7.  
  8.     }
  9. }

Create Lightning Component:- For Qualification StageName

Step 5:- Create Lightning Component : qualificationStageCmp.cmp

From Developer Console >> File >> New >> Lightning Component

qualificationStageCmp.cmp [Lightning Component File]

  1.    <aura:component implements="force:appHostable,flexipage:availableForAllPageTypes,flexipage:availableForRecordHome,force:hasRecordId,forceCommunity:availableForAllPageTypes,force:lightningQuickAction" access="global" >
  2.     <lightning:card>
  3.         <div class="slds slds-p-around--medium">
  4.  
  5.             <div class="slds-section__title-action slds-p-around--small">
  6.                 <h2><strong>Qualification Details</strong></h2>
  7.             </div> 
  8.             <br></br>
  9.  
  10.  
  11.             <div class="slds-grid slds-wrap">
  12.                     <div class="slds-col slds-size_6-of-12 slds-p-horizontal--medium">
  13.                         <lightning:input aura:id="getFirstName" type="text"  label="First Name" required="true" />
  14.                     </div>
  15.                     <div class="slds-col slds-size_6-of-12 slds-p-horizontal--medium">
  16.                         <lightning:input aura:id="getFirstName" type="text"  label="First Name" required="true" />
  17.                     </div>
  18.                    <div class="slds-col slds-size_6-of-12 slds-p-horizontal--medium">
  19.                         <lightning:input aura:id="getDegree" type="text" label="Degree" required="true" />
  20.                     </div>
  21.                     <div class="slds-col slds-size_6-of-12 slds-p-horizontal--medium">
  22.                         <lightning:input aura:id="getUniversity" type="text"  label="University" required="true" />
  23.                     </div>
  24.  
  25.                     <div class="slds-col slds-size_6-of-12 slds-p-horizontal--medium">
  26.                         <lightning:input aura:id="getCity" type="text"  label="City" required="true"  />
  27.                     </div>
  28.  
  29.                     <div class="slds-col slds-size_6-of-12 slds-p-horizontal--medium">
  30.                         <lightning:input aura:id="getPAN" type="text" label="PAN Number" required="true" maxlength="10" />
  31.                     </div>
  32.                 </div> 
  33.                  <div class="slds-text-align--center slds-m-top--medium">
  34.                     <button class="slds-button slds-button--brand">Submit</button>
  35.                 </div>
  36.         </div>
  37.     </lightning:card>
  38. </aura:component>

Create Lightning Component:- For Needs Analysis StageName

Step 6:- Create Lightning Component : needsAnalysisStageCmp.cmp

From Developer Console >> File >> New >> Lightning Component

needsAnalysisStageCmp.cmp [Lightning Component File]

  1.    <aura:component implements="force:appHostable,flexipage:availableForAllPageTypes,flexipage:availableForRecordHome,force:hasRecordId,forceCommunity:availableForAllPageTypes,force:lightningQuickAction" access="global" >
  2.     <lightning:card>
  3.         <div class="slds slds-p-around--medium">
  4.             <div class="slds-section__title-action slds-p-around--small">
  5.                 <h2><strong>Needs Analysis</strong></h2>
  6.             </div> 
  7.  
  8.             <div class="slds-grid slds-wrap">
  9.                 <div class="slds-col slds-size_6-of-12 slds-p-horizontal--medium">
  10.                     <lightning:input aura:id="getEmail" type="email" name="input1" label="Email" required="true" />
  11.                 </div>
  12.                 <div class="slds-col slds-size_6-of-12 slds-p-horizontal--medium">
  13.                     <lightning:input aura:id="getPhone" type="phone" name="input2" label="Phone" required="true" />
  14.                 </div>
  15.  
  16.                 <div class="slds-col slds-size_6-of-12 slds-p-horizontal--medium">
  17.                     <div class="slds-form-element" aura:id="greenCheck">
  18.                         <div class="slds-m-top_medium"><strong>Occupation</strong></div><br/>
  19.                         <div class="slds-form-element__control">
  20.                             <div class="slds-checkbox slds-m-right--medium">                      
  21.                                 <input type="checkbox" name="options1" aura:id="govcheckbox" id="govcheckbox" value=""  />
  22.                                 <label class="slds-checkbox__label" for="govcheckbox">
  23.                                     <span class="slds-checkbox_faux"></span>
  24.                                     <span class="slds-form-element__label">Government Job</span>
  25.                                 </label>
  26.                             </div> 
  27.  
  28.                             <div class="slds-checkbox">                      
  29.                                 <input type="checkbox" name="prvtjob" aura:id="prvtjob" id="prvtjob" value=""  />
  30.                                 <label class="slds-checkbox__label" for="prvtjob">
  31.                                     <span class="slds-checkbox_faux"></span>
  32.                                     <span class="slds-form-element__label">Private Job</span>
  33.                                 </label>
  34.                             </div>
  35.                         </div>                  
  36.                     </div>
  37.  
  38.                 </div>
  39.  
  40.                 <div class="slds-col slds-size_6-of-12 slds-p-horizontal--medium">
  41.                     <div class="slds-m-top_medium"><strong>Office Location</strong></div><br/>
  42.                     <div class="slds-form-element">
  43.                         <div class="slds-form-element__control">
  44.                             <span class="slds-radio">
  45.                                 <input type="radio" id="radio1" value="" name="default" checked="" />
  46.                                 <label class="slds-radio__label" for="radio1">
  47.                                     <span class="slds-radio_faux"></span>
  48.                                     <span class="slds-form-element__label">Onshore</span>
  49.                                 </label>
  50.                             </span>                    
  51.                         </div>
  52.                     </div>
  53.  
  54.                     <div class="slds-form-element">
  55.                         <div class="slds-form-element__control">
  56.                             <span class="slds-radio">
  57.                                 <input type="radio" id="radio2" value="radio-43" name="default" checked="" />
  58.                                 <label class="slds-radio__label" for="radio2">
  59.                                     <span class="slds-radio_faux"></span>
  60.                                     <span class="slds-form-element__label">Offshore</span>
  61.                                 </label>
  62.                             </span>                    
  63.                         </div>
  64.                     </div>
  65.                 </div>
  66.             </div> 
  67.             <div class="slds-text-align--center slds-m-top--medium">
  68.                 <button class="slds-button slds-button--brand">Submit</button>
  69.             </div>
  70.         </div>
  71.     </lightning:card>     
  72. </aura:component>

 

Further post that would you like to learn in Salesforce

 

 

 

 

FAQ (Frequently Asked Questions)

How do I navigate from one component to another component in Salesforce?

To navigate from a Lightning component to another, specify the component name using componentDef .

How do you navigate in Aura component?

To navigate to a page or component, use the navigate() method in lightning:navigation. This approach is a substitute for a navigateTo* event, and both are supported. To generate a URL in your component, use the generateUrl() method in lightning:navigation to resolve the URL.

How do you close quick action in lightning component?

To close a quick action panel, usually in response to completing or canceling the action, run $A. get('e. force:closeQuickAction'). fire(); .

Can we use LWC in quick action?

LWC supports two types of quick actions: Screen Actions. Headless Actions.

Related Topics | You May Also Like

 
  

Our Free Courses →

👉 Get Free Course →

📌 Salesforce Administrators

📌 Salesforce Lightning Flow Builder

📌 Salesforce Record Trigger Flow Builder

👉 Get Free Course →

📌 Aura Lightning Framework

📌 Lightning Web Component (LWC)

📌 Rest APIs Integration



Hi, This is Vijay Kumar behind the admin and founder of w3web.net. I am a senior software developer and working in MNC company from more than 8 years. I am great fan of technology, configuration, customization & development. Apart of this, I love to write about Blogging in spare time, Working on Mobile & Web application development, Salesforce lightning, Salesforce LWC and Salesforce Integration development in full time. [Read full bio] | | The Sitemap where you can find all published post on w3web.net

Leave a Comment