Apex Code Development You need to sign in to do that
Don't have an account?
Pass Selected Case Record Id from Aura to lwc Component
I have Lightning Aura Component Name as caseList3
not passing selected case record id in js controller
below is the code (YOU CAN CHECK IN BROWSER BY CLTR+SHIFT+i) so it show selected record Id
as below line
console.log("Selected Case Id: " + selectedCaseId);
Now i want an lwc component which will take this Selected record Id as Input and display case and associated product details
My lightning components working perfectly
you can copy and test in your org
only issue i am getting with lwc
My Linghtning component code
APEX
public with sharing class CaseListController {
public CaseListController() {
}
@AuraEnabled
public static List<Case> getCases() {
return [SELECT Id, Subject FROM Case Order By createdDate DESC LIMIT 5];
}}
COMPONENT
caseList3.cmp
<aura:component controller="CaseListController"
implements="force:appHostable,flexipage:availableForAllPageTypes,flexipage:availableForRecordHome,forceCommunity:availableForAllPageTypes,force:lightningQuickAction"
access="global">
<aura:attribute name="caseList" type="Case[]" />
<aura:attribute name="selectedCaseId" type="String" />
<aura:attribute name="selectedRecordId" type="String" />
<aura:handler name="init" value="{!this}" action="{!c.loadCases}" />
<div class="slds-card">
<div class="slds-card__header slds-grid">
<h2 class="slds-text-heading_medium slds-col">Case Information</h2>
</div>
<div class="slds-card__body">
<ul class="slds-list_dotted">
<aura:iteration items="{!v.caseList}" var="caseRecord">
<li class="slds-p-around_small slds-box slds-box_small">
<p class="slds-text-title"><strong>Case Number:</strong> {!caseRecord.CaseNumber}</p>
<p class="slds-text-title"><strong>Subject:</strong> {!caseRecord.Subject}</p>
<p><strong>Description:</strong> {!caseRecord.Description}</p>
<!-- Add more case fields here -->
<button class="slds-button slds-button_brand select-case-button" data-caseid="{!caseRecord.Id}" onclick="{!c.selectCase}">Select Case😀</button>
</li>
</aura:iteration>
</ul>
</div>
</div>
<lightning:workspaceAPI aura:id="workspace" />
</aura:component>
caseList3Controller.js
({
selectCase: function (component, event, helper) {
var selectedCaseId = event.currentTarget.getAttribute("data-caseid");
component.set("v.selectedCaseId", selectedCaseId);
console.log("Selected Case Id: " + selectedCaseId);
var messagePayload = {
selectedCaseId: selectedCaseId
};
var messageContext = component.find("workspace").getMessageContext();
var message = {
recordId: component.get("v.recordId"),
messageBody: JSON.stringify(messagePayload)
};
messageContext
.publishMessage(CASE_SELECTION_CHANNEL, message)
.then(response => {
console.log("Message published successfully");
})
.catch(error => {
console.error("Error publishing message: " + error);
});
},
loadCases: function (component, event, helper) {
var action = component.get("c.getCases");
action.setCallback(this, function (response) {
var state = response.getState();
if (state === "SUCCESS") {
var caseRecords = response.getReturnValue();
component.set("v.caseList", caseRecords);
} else {
console.error("Error fetching case data: " + state);
}
});
$A.enqueueAction(action);
},
handleRecordSelection: function(component, event, helper) {
var selectedRecordId = event.getParam("recordId");
component.set("v.selectedRecordId", selectedRecordId);
}
})
Can you please share the LWC code where you are trying to pass the case id value for better understanding.
Thanks,
What is the main goal of passing the selected case record ID to the LWC, and which component will receive this ID?
In your caseList3Controller.js JavaScript controller, you are correctly setting the selectedCaseId attribute when a case is selected. Have you verified that this attribute is being set correctly when you click the "Select Case" button?
Thanks
@Sachin
Below is my Lwc component (caseDetailsLWC)
.js
import { LightningElement, wire, api, track } from 'lwc';
import { getRecord } from 'lightning/uiRecordApi';
// Define the fields to retrieve from the Case object
const FIELDS = [
'Case.Id',
'Case.CaseNumber',
'Case.Subject',
'Case.Description',
'Case.Product__r.IsActive',
'Case.Product__r.Name',
'Case.Product__r.ProductCode'
];
export default class CaseDetailsLWC extends LightningElement {
@api selectedCaseId; // Property to receive the selected Case ID
@track selectedCase = {}; // Initialize selectedCase as an empty object
error;
// Getter method to check if selectedCaseId is valid
get isValidCaseId() {
return this.selectedCaseId && this.selectedCaseId.length === 18;
}
// Wire method to fetch the Case record
@wire(getRecord, { recordId: '$selectedCaseId', fields: FIELDS })
wiredCase({ error, data }) {
if (data) {
console.log('Data:', data);
// Update the selectedCase property with the retrieved data
this.selectedCase = {
Id: data.fields.Id.value,
CaseNumber: data.fields.CaseNumber.value,
Subject: data.fields.Subject.value,
Description: data.fields.Description.value,
IsActive: data.fields.Product__r.value.IsActive,
ProductName: data.fields.Product__r.value.Name,
ProductCode: data.fields.Product__r.value.ProductCode
};
this.error = null; // Reset any previous error
} else if (error) {
console.log('Error:', error);
this.error = error; // Set the error property
console.error('Error loading case data:', error);
}
}
}
.html
<template>
<div class="slds-card">
<div class="slds-card__header slds-grid">
<h2 class="slds-text-heading_medium slds-col">Case Details</h2>
</div>
<div class="slds-card__body">
<template if:true={selectedCase.Id}>
<p class="slds-text-title"><strong>Case Number:</strong> {selectedCase.CaseNumber}</p>
<p class="slds-text-title"><strong>Subject:</strong> {selectedCase.Subject}</p>
<p><strong>Description:</strong> {selectedCase.Description}</p>
<template if:true={selectedCase.ProductName}>
<p class="slds-text-title"><strong>Product Name:</strong> {selectedCase.ProductName}</p>
</template>
<template if:true={selectedCase.ProductCode}>
<p class="slds-text-title"><strong>Product Code:</strong> {selectedCase.ProductCode}</p>
</template>
</template>
<template if:false={selectedCase.Id}>
<p class="slds-text-title">No case selected.</p>
</template>
</div>
</div>
</template>
@Swetha
The main goal of passing the selected case record ID to the Lightning Web Component (LWC) is to let the LWC show detailed information about that specific case. This ID helps the LWC find the right case and display its data.
To make sure the selectedCaseId is set correctly when you click the "Select Case" button i added below line
console.log("Selected Case ID: " + this.selectedCaseId);
I think the problem is being that there is no connection btw Aura and LWC.
Try below resource : https://codingwiththeforce.com/salesforce-development-lwc-how-to-communicate-between-aura-components-and-lightning-web-components-using-custom-events-and-the-api-decorator/
Or Use aura PubSub for the same.
Or pass your selected data to event and call that event in LWC.
Please mark as best answer.
Thanks,
@Sachin
I already gone throgh this link but it didn't worked for me
Can I know why are you using WorkspaceAPI for communication? Where did you get that knowledge?
Regards,
Abdul Aziz Khatri
Are you still looking for a solution, please let me, would like to help.
Regards,
Hi Abdul,
Yes i am looking for solution.
My lightning Aura component is displaying selected record id (you can check in browser console)
only issue is how to pass it to LWC as input parameter so that lwc can show that record details