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

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.

Don’t forget to check out:- How to Insert New Record with Radio Button, Checkbox, Datepicker, Picklist, Long Text Area Using Lightning Component Click Here For More Information

Live Demo

👉 Download Free Ebook →

👉 Get Free Course →

Note:: – You will get an email, so put correct email and mobile number and BEGIN YOUR JOURNEY from Today!

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]

Note:: – You will get an email, so put correct email and mobile number and BEGIN YOUR JOURNEY from Today!

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

```
	<div class="slds"> 
```
```
       <lightning:card> 
```

          <div style="text-align:center;"> <lightning:button variant="brand" label="Naviagate to Component" title="Naviagate" type="Button" onclick="{!c.naviagateAction}" /> </div>

```
 
```
```
<br/>
```
```
   
```

<div style="border:1px #ddd solid; padding:10px; background:#eee; margin:40px 0;">

```
 
```

            <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>
```
```
 
```
```
</div>
```
```
 
```
```
  
```
```
       </lightning:card>    
```
```
    </div>
```
```
</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]

```
   ({
```

	naviagateAction : function(component, event, helper) {

		helper.naviagateStageHelper(component);

```
	},
```
```
 
```
```
})
```

Create JavaScript Helper

Step 3:- Create Lightning Component : navigateStageCmpHelper.js

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

navigateStageCmpHelper.js [JavaScript Helper File]

```
   ({
```

    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

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

naviagateStageCtrl.apxc [Apex Class Controller]

```
   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;
```
```
 
```
```
    }
```
```
}
```

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]

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

```
    <lightning:card>
```

        <div class="slds slds-p-around--medium">

```
 
```

            <div class="slds-section__title-action slds-p-around--small">

                <h2><strong>Qualification Details</strong></h2>

```
            </div> 
```
```
            <br></br>
```
```
 
```
```
 
```

            <div class="slds-grid slds-wrap">

                    <div class="slds-col slds-size_6-of-12 slds-p-horizontal--medium">

                        <lightning:input aura:id="getFirstName" type="text"  label="First Name" required="true" />

```
                    </div>
```

                    <div class="slds-col slds-size_6-of-12 slds-p-horizontal--medium">

                        <lightning:input aura:id="getFirstName" type="text"  label="First Name" required="true" />

```
                    </div>
```

                   <div class="slds-col slds-size_6-of-12 slds-p-horizontal--medium">

                        <lightning:input aura:id="getDegree" type="text" label="Degree" required="true" />

```
                    </div>
```

                    <div class="slds-col slds-size_6-of-12 slds-p-horizontal--medium">

                        <lightning:input aura:id="getUniversity" type="text"  label="University" required="true" />

```
                    </div>
```
```
 
```

                    <div class="slds-col slds-size_6-of-12 slds-p-horizontal--medium">

                        <lightning:input aura:id="getCity" type="text"  label="City" required="true"  />

```
                    </div>
```
```
 
```

                    <div class="slds-col slds-size_6-of-12 slds-p-horizontal--medium">

                        <lightning:input aura:id="getPAN" type="text" label="PAN Number" required="true" maxlength="10" />

```
                    </div>
```
```
                </div> 
```

                 <div class="slds-text-align--center slds-m-top--medium">

                    <button class="slds-button slds-button--brand">Submit</button>

```
                </div>
```
```
        </div>
```
```
    </lightning:card>
```
```
</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]

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

```
    <lightning:card>
```

        <div class="slds slds-p-around--medium">

            <div class="slds-section__title-action slds-p-around--small">

                <h2><strong>Needs Analysis</strong></h2>

```
            </div> 
```
```
 
```

            <div class="slds-grid slds-wrap">

                <div class="slds-col slds-size_6-of-12 slds-p-horizontal--medium">

                    <lightning:input aura:id="getEmail" type="email" name="input1" label="Email" required="true" />

```
                </div>
```

                <div class="slds-col slds-size_6-of-12 slds-p-horizontal--medium">

                    <lightning:input aura:id="getPhone" type="phone" name="input2" label="Phone" required="true" />

```
                </div>
```
```
 
```

                <div class="slds-col slds-size_6-of-12 slds-p-horizontal--medium">

                    <div class="slds-form-element" aura:id="greenCheck">

                        <div class="slds-m-top_medium"><strong>Occupation</strong></div><br/>

                        <div class="slds-form-element__control">

                            <div class="slds-checkbox slds-m-right--medium">

                                <input type="checkbox" name="options1" aura:id="govcheckbox" id="govcheckbox" value=""  />

                                <label class="slds-checkbox__label" for="govcheckbox">

                                    <span class="slds-checkbox_faux"></span>

                                    <span class="slds-form-element__label">Government Job</span>

                                </label>

```
                            </div> 
```
```
 
```

                            <div class="slds-checkbox">

                                <input type="checkbox" name="prvtjob" aura:id="prvtjob" id="prvtjob" value=""  />

                                <label class="slds-checkbox__label" for="prvtjob">

                                    <span class="slds-checkbox_faux"></span>

                                    <span class="slds-form-element__label">Private Job</span>

                                </label>

```
                            </div>
```

                        </div>

```
                    </div>
```
```
 
```
```
                </div>
```
```
 
```

                <div class="slds-col slds-size_6-of-12 slds-p-horizontal--medium">

                    <div class="slds-m-top_medium"><strong>Office Location</strong></div><br/>

                    <div class="slds-form-element">

                        <div class="slds-form-element__control">

                            <span class="slds-radio">

                                <input type="radio" id="radio1" value="" name="default" checked="" />

                                <label class="slds-radio__label" for="radio1">

                                    <span class="slds-radio_faux"></span>

                                    <span class="slds-form-element__label">Onshore</span>

                                </label>

                            </span>

```
                        </div>
```
```
                    </div>
```
```
 
```

                    <div class="slds-form-element">

                        <div class="slds-form-element__control">

                            <span class="slds-radio">

                                <input type="radio" id="radio2" value="radio-43" name="default" checked="" />

                                <label class="slds-radio__label" for="radio2">

                                    <span class="slds-radio_faux"></span>

                                    <span class="slds-form-element__label">Offshore</span>

                                </label>

                            </span>

```
                        </div>
```
```
                    </div>
```
```
                </div>
```
```
            </div> 
```

            <div class="slds-text-align--center slds-m-top--medium">

                <button class="slds-button slds-button--brand">Submit</button>

```
            </div>
```
```
        </div>
```
```
    </lightning:card>     
```
```
</aura:component>
```

Further post that would you like to learn in Salesforce

The Sitemap to Find all Published Post of The Tutorial w3web.net Click Here For More Information

TechW3web:- To know more, Use this Link

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.

Vijay Kumar

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

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

Files we used to navigate the lightning component on click button

Note:: – You will get an email, so put correct email and mobile number and BEGIN YOUR JOURNEY from Today!

Create Lightning Component

navigateStageCmp.cmp [Lightning Component File]

Note:: – You will get an email, so put correct email and mobile number and BEGIN YOUR JOURNEY from Today!

Create JavaScript Controller

navigateStageCmpController.js [JavaScript Controller]

Create JavaScript Helper

navigateStageCmpHelper.js [JavaScript Helper File]

Create Apex Class Controller

naviagateStageCtrl.apxc [Apex Class Controller]

Create Lightning Component:- For Qualification StageName

qualificationStageCmp.cmp [Lightning Component File]

Create Lightning Component:- For Needs Analysis StageName

needsAnalysisStageCmp.cmp [Lightning Component File]

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

How do you navigate in Aura component?

How do you close quick action in lightning component?

Can we use LWC in quick action?

Related Topics | You May Also Like

Note:: – You will get an email, so put correct email and mobile number and BEGIN YOUR JOURNEY from Today!

Vijay Kumar

Leave a Comment Cancel reply