+ Start a Discussion
abu saleh khan 20abu saleh khan 20 

how to pass id to the second component

Hi abu here,

Kindly help me out with the following scenario. I am trying to pass id to the second component,for this i have created a component event and registered it in "FeedBackComponent", here once id is generated through event id will get stored in attribute present in event.Afetr that i have handled event in "FiveStarRating" but id is not passing.Kindly help me with this scenarion.

 FeedBackComponent.Cmp

<aura:component controller="FeedBackController" implements="force:appHostable,flexipage:availableForAllPageTypes,flexipage:availableForRecordHome,force:hasRecordId,force:lightningQuickAction" access="global" >
    
    <aura:attribute name ="feedbackname" type="Customer_Review__c" default="{'sobjectType':'Customer_Review__c'}" /> 
    <aura:attribute name="ObjectName" type="String" default="Customer_Review__c" access="global"/> <!-- Object Name as String-->
    <aura:attribute name="Salutation" type="String" default="Salutation__c" access="global"/>
    <aura:attribute name="Occupation" type="String" default="Occupation__c" access="global"/>
    <aura:attribute name="mailprovider" type="String" default="mail_Provider__c" access="global"/> 
    <aura:attribute name="idholder" type="String"/>
    <aura:attribute name="SalutationPicklist" type="String[]" />
    <aura:attribute name="OccupationPicklist" type="String[]" />
    <aura:attribute name="mailproviderPicklist" type="String[]" />
    <aura:registerEvent name="getId" type="c:GetIdFromCustomerReview"/>
     <aura:handler   name ="init" value="{!this}" action="{!c.doInit}"/>
    <div class="slds-p-around_x-small form-cls">
        <div class="demo-only demo-only--sizing slds-grid slds-wrap slds-grid_align-space slds-box">
            <div class="slds-col slds-size_1-of-2 slds-p-horizontal_medium">
                <lightning:select label="Salutation" value="{!v.feedbackname.Salutation__c}">
                    <aura:iteration items="{!v.SalutationPicklist}" var="val">
                        <option value="{!val}"> {!val}</option>
                    </aura:iteration>
                </lightning:select>
            </div>
            
            <div class="slds-col slds-size_1-of-2 slds-p-horizontal_medium">
                <lightning:input label="FirstName"  value="{!v.feedbackname.Name}"/> 
            </div>
            <div class="slds-col slds-size_1-of-1 slds-p-horizontal_medium">
                <lightning:select label="Occupation" value="{!v.feedbackname.Occupation__c}">
                    <aura:iteration items="{!v.OccupationPicklist}" var="val">
                        <option value="{!val}"> {!val}</option>
                    </aura:iteration>
                </lightning:select>
            </div>
            <div class="slds-col slds-size_1-of-1 slds-p-horizontal_medium">
                <lightning:input label="PhoneNumber" value="{!v.feedbackname.Phone_Number__c}" />
            </div>
            <div class="slds-col slds-size_1-of-2 slds-p-horizontal_medium">
                <lightning:input label="Email" value="{!v.feedbackname.Email__c}"/>
            </div>
            <div class="slds-col slds-size_1-of-2 slds-p-horizontal_medium">
                <lightning:select label="" value="{!v.feedbackname.mail_Provider__c}">
                    <aura:iteration items="{!v.mailproviderPicklist}" var="val">
                        <option value="{!val}"> {!val}</option>
                    </aura:iteration>
                </lightning:select>
            </div>
            <div class="slds-col slds-size_1-of-1 slds-p-horizontal_medium">
                <lightning:textarea  label="Suggestions" value ="{!v.feedbackname.Suggestions__c}" placeholder="type here..." required="true"/>
            </div>
            <div>
                <lightning:button variant="success" label="Submit" onclick="{!c.customerCreation }"/>
            </div> 
        </div>       
    </div>
</aura:component>

FeedBackComponentController:
({
    doInit : function(component, event, helper) {
        helper.SalutationPicklist(component); // fetches PickList Values of Salutation Field
        helper.OccupationPicklist(component); // fetches PickList Values of Occupation Field
        helper.mailproviderPicklist(component); // fetches PickList Values of mailprovider Field
        
    },
    customerCreation: function(component,event) {
        var accvar = component.get("v.feedbackname");
        var action = component.get("c.customerInsertion");
        var cmpEvent = component.getEvent("getId");
        //setting Apex Parameters.
        action.setParams({customer : accvar});
        //setting the Callback
        action.setCallback(this,function(a){
            //get the response state
             var res = a.getState();
                if(res === 'SUCCESS'){
                    var name = a.getReturnValue();
                    component.set('v.idholder',name)
                    console.log('show message' + name);
                    alert('Record is Created Successfully'+ name);
                }
            else if(res === 'ERROR'){
                alert('Error in calling ');
            }
                    
        cmpEvent.setParams({
           "holdid"  : component.get('v.idholder')
             });
            console.log('mike'+component.get('v.idholder'));
        cmpEvent.fire();

        });
        $A.enqueueAction(action);
    }
   
})

<---------------------------SECOND COMPONENT------------------------------>

FiveStarRating.cmp

<aura:component controller="OpportunityRatingController">
    <ltng:require styles="/resource/RatingPlugin/css/jquery.raty.css, 
                          /resource/RatingPlugin/css/salesforce-lightning-design-system-ltng.css"
                  scripts="/resource/RatingPlugin/js/jquery.js, /resource/RatingPlugin/js/jquery.raty.js"
                  afterScriptsLoaded="{!c.change}"/>
      <aura:attribute type="ID" name="recordId"/>
    <aura:attribute type="Integer" name="currentRating"/>
    <aura:attribute type="Integer" name="newRating" default="0"/>
    <aura:handler name="getid" event="c:GetIdFromCustomerReview" action="{!c.handleComponentEvent}"/>
    <div class="slds">
        <div class="slds-card">
            <div class="slds-card__header slds-grid">
                <div class="slds-media slds-media--center slds-has-flexi-truncate">
                    <div class="slds-media__figure">
                        <div class="slds-icon__container">
                            <img src="/resource/RatingPlugin/images/custom9_60.png" class="slds-icon  slds-icon--small"/>
                        </div>
                    </div>
                    <div class="slds-media__body">
                        <h2 class="slds-text-heading--small slds-truncate">How much do you rate this Opportunity?</h2>
                    </div>
                </div>
            </div>
            <div class="slds-card__body">
                <div class="loading-div">
                    <div class="slds-spinner--small">
                       <img src="/resource/RatingPlugin/images/slds_spinner_brand.gif" alt="Loading..."/>
                    </div>
                </div> 
                <div aura:id="starRating" class="star-rating"></div> 
            </div> 
            <div class="slds-card__footer">
                <div class="footer-contents">
                    <div style="display: inline-block;">
                        Current Rating: <span aura:id="rating">{!v.currentRating}&nbsp;star</span>
                    </div>
                </div>
            </div>
        </div>
    </div>
</aura:component>

js:
({
    change : function(component, event, helper) {
        console.log('Testing'+ component.get("v.recordId"));
        // load raty rating plugin.
        var ratingElement = component.find("starRating").getElement();
        helper.loadRatingElement( component, helper, ratingElement );
        
        // Get current rating for Opportunity
        var action = component.get("c.getOpportunityCurrentRating");
        action.setParams({
            recordId : component.get("v.recordId")
        });
        action.setCallback(this, function( response ){
            // update current rating attribute and set raty with current rating.
            component.set("v.currentRating", response.getReturnValue());
            $(ratingElement).raty('set', { score: response.getReturnValue() });
            $(".star-rating, .loading-div, .footer-contents").toggle();
        });
        $A.enqueueAction(action);
    },
    handleComponentEvent : function(component, event, helper) {
        console.log('Testing'+ component.get("v.recordId"));
        var getcaseid = event.getParam("holdid");
       component.set("v.recordId" , getcaseid); 
   
        
    }
})

helper:
({
    loadRatingElement: function(component, helper, ratingElement){
        $( ratingElement ).raty({
            starOff  : '/resource/RatingPlugin/images/star_off_darkgray.png',
            starOn   : '/resource/RatingPlugin/images/star_on.png',
            click: function(score, evt) {
                if(score == null ) score = 0;
                if(component.get("v.currentRating") != score ){
                    var result = confirm('Click OK button to confirm update Rating.');
                    if( result ){
                        component.set("v.newRating", score);
                        $(".star-rating, .loading-div, .footer-contents").toggle();
                        helper.updateRating( component,event );
                    }else{
                        return false;
                    }
                } 
            }
        });
    },
    updateRating : function( component,event ){
        console.log('Processing'+component.get("v.recordId"));
        // update Opportunity record with new rating.
        var action = component.get("c.updateOpportunityRating");
        action.setParams({
            recordId : component.get("v.recordId"),
            rating : component.get("v.newRating")
        });
        action.setCallback(this, function( response ){
            alert('Great! You have given new rating to this Opportunity.');
            component.set( "v.currentRating", component.get("v.newRating") );
            $(".star-rating, .loading-div, .footer-contents").toggle();
        });
        $A.enqueueAction(action);
    }
})

Server Controller:

public class OpportunityRatingController {
    // Used to get Opportunity's current rating.
    // Params: recordId - Opportunity record id.
    @AuraEnabled
    public static Integer getOpportunityCurrentRating( Id recordId ){
        Customer_Review__c oppRecord = [SELECT Id,Review__c from Customer_Review__c WHERE Id=:recordId];
        return oppRecord.Review__c != null ? Integer.valueOf( oppRecord.Review__c )  : 0;
    }
 
    // Used to update Opportunity record with new rating.
    // Params: { recordId: Opportunity record id, rating: new rating for this opportunity }
    @AuraEnabled
    public static String updateOpportunityRating(Id recordId, Decimal rating ){
        update new Customer_Review__c( id=recordId, Review__c= rating);
        return 'SUCCESS';
    }
}
Raj VakatiRaj Vakati
There are multiple ways you can do it  .. 
  1.  By using the events 
  2. By Using Navigation API 
  3.  

Refer this link

https://developer.salesforce.com/docs/component-library/bundle/lightning:navigation/documentation
https://developer.salesforce.com/docs/atlas.en-us.lightning.meta/lightning/events_intro.htm
abu saleh khan 20abu saleh khan 20
Hi Raj Vakati, 

Lightning:navigation can't be used with lightning app. As per my requirement i have to go with lightning app. 
I used component event to pass data from one component to other but data wasn't passing.