How to navigate from one component to another component on click button after Change Opportunity Stages (Mark Stage as Complete) in lightning component Salesforce

[vijayk3327]

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.

👉 To get source code live demo link, Click Here.

Create Lightning Component
Step 1:- Create Lightning Component : navigateStageCmp.cmp

`<aura:component controller="naviagateStageCtrl" implements="force:appHostable,flexipage:availableForAllPageTypes,flexipage:availableForRecordHome,force:hasRecordId,forceCommunity:availableForAllPageTypes,force:lightningQuickAction" access="global" >

lightning:card

<lightning:button variant="brand" label="Naviagate to Component" title="Naviagate" type="Button" onclick="{!c.naviagateAction}" />

        <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>

        <br/><br/>
        <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>
        <div style="display:block; overflow:hidden;"> 
            <div style="width: 50%; float:left; display:inline-block">
                <ul style="list-style-type: square; font-size: 16px; margin: 0 0 0 54px; padding: 0;"> 
                    <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>
                    <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>
                    <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>
                    <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>
                    <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>
                </ul>
        </div>

        <div style="width: 50%; float:left; display:inline-block">
                <ul style="list-style-type: square; font-size: 16px; margin: 0 0 0 54px; padding: 0;"> 
                    <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>
                    <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>
                    <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>
                    <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>
                    <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>
                </ul>
            </div>
           <div style="clear:both;"></div> 
           <br/>
            <div class="youtubeIcon">
                <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>
            </div>
</div>

   </lightning:card>    
</div>

</aura:component>`

Create JavaScript Controller
Step 2:- Create Lightning Component : navigateStageCmpController.js

`({
naviagateAction : function(component, event, helper) {
helper.naviagateStageHelper(component);
},

})`

Create JavaScript Helper
Step 3:- Create Lightning Component : navigateStageCmpHelper.js

`({
naviagateStageHelper : function(component, event, helper) {
var recordId = component.get("v.recordId");

    if(recordId !='' && recordId !='UNDEFINED'){
        var action = component.get('c.getOppStage');           
        action.setParams({
            "recId":recordId,
        });
        action.setCallback(this, function(response){
            var State = response.getState();
            if(State == "SUCCESS"){
                var result = response.getReturnValue();
                this.stageCompToNaviagate(result.StageName, recordId); 
            }
        });
        $A.enqueueAction(action);            
    }        

},

stageCompToNaviagate:function(stageName, oppId){
    var compToNavigate;
    if(stageName == 'Qualification'){
        compToNavigate = "c:qualificationStageCmp";
    }else if(stageName == 'Needs Analysis'){
        compToNavigate = "c:needsAnalysisStageCmp";
    }

    var evt = $A.get("e.force:navigateToComponent");

    evt.setParams({
        componentDef : compToNavigate,
        componentAttributes: {
            oppId : oppId
        }
    });
    evt.fire();
}

})`

Create Apex Class Controller
Step 4:- Create Apex Class : naviagateStageCtrl.apxc

`public class naviagateStageCtrl {
@AuraEnabled
public static Opportunity getOppStage(String recId){
Opportunity oppObj = [SELECT Id, StageName FROM Opportunity WHERE Id=:recId];
//system.debug('oppObj ' + oppObj);
RETURN oppObj;

}

}`

👉 To get source code live demo link, Click Here.