You need to sign in to do that
Don't have an account?
abu 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} 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';
}
}
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} 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';
}
}
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
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.