In my Lightning App Page I have an LWC with a data table of related Child Records. For the Child records I have built a custom Record Page.
I have embedded the Child Record Page on my Parent App Page and I would like to pass the record Id of the selected row.
How can I configure the Child Record Page so that it accepts the id from the parent and works as a Record Page?
Parent HTML
<template>
<div class="slds-grid slds-gutters">
<div class="slds-col slds-size_1-of-12"></div>
<div class="slds-col slds-size_10-of-12">
<lightning-card title="Recent Career">
<template if:true={werData}>
<lightning-datatable
key-field="Id"
data={werData}
columns={werColumns}
onsave={handleSave}
max-row-selection="1"
onrowselection={handleRowSelection}
>
</lightning-datatable>
</template>
</lightning-card>
</div>
</div>
<div class="slds-grid slds-gutters">
<div class="slds-col slds-size_1-of-12"></div>
<div class="slds-col slds-size_10-of-12">
<div class="slds-box" if:true={werSelectedRow}>
<c-test-record-edit></c-test-record-edit>
</div>
</div>
</div>
Parent JS
import { LightningElement, wire, track} from 'lwc';
import { CurrentPageReference } from 'lightning/navigation';
import getWerList from '@salesforce/apex/candidateWriteUp_Helper.getWorkExperienceRecentList';
const werColumns = [
{
label: 'Job Title',
fieldName: 'werName',
type: 'url',
typeAttributes: {
label: {
fieldName: 'Name'
},
target: '_self'
}
},
{
label: 'Company',
fieldName: 'werCompany',
type: 'text',
sortable: true
},
{
label: 'Date From',
fieldName: 'werDateFrom',
type: 'date',
sortable: true,
typeAttributes: {
year: "numeric",
month: "2-digit",
day: "2-digit"
}
},
{
label: 'Date To',
fieldName: 'werDateTo',
type: 'date',
sortable: true,
typeAttributes: {
year: "numeric",
month: "2-digit",
day: "2-digit"
}
},
{
label: 'Industry',
fieldName: 'werIndustry',
type: 'picklistColumn',
sortable: true,
type: 'text',
sortable: true
},
{
label: 'Approximate Revenue',
fieldName: 'werApproximateRevenue',
type: 'picklistColumn',
sortable: true,
type: 'text',
sortable: true
}
];
export default class TestParetnPage extends LightningElement {
@track recordId='';
@wire(CurrentPageReference)
currentPageReference;
get recordIdFromState(){
return this.currentPageReference &&
this.currentPageReference.state.c__recordId;
}
renderedCallback(){
if(this.recordId===''){
this.recordId=this.recordIdFromState;
console.log(this.recordId);
}
}
werData = [];
werColumns = werColumns;
werDraftValues = [];
werWiredList;
werSelectedRow = false;
@wire(getWerList, { searchKey: '$recordId' })
wiredWer(werResponse) {
this.werWiredList = werResponse;
const data = werResponse.data;
const error = werResponse.error;
if (data) {
let werTempList = [];
data.forEach((record) => {
let werTempRec = Object.assign({}, record);
werTempRec.werName = '/' + werTempRec.Id;
werTempRec.werCompany = werTempRec.Company_Name__c;
werTempRec.werDateTo = werTempRec.Date_To__c;
werTempRec.werDateFrom = werTempRec.Date_From__c;
werTempRec.werIndustry = werTempRec.Industry__c;
werTempRec.werApproximateRevenue = werTempRec.Approximate_Revenue__c;
werTempList.push(werTempRec);
});
this.werData = werTempList;
this.error = undefined;
console.table(this.werData);
} else if (error) {
this.error = result.error;
}
}
handleRowSelection = event => {
var selectedRows=event.detail.selectedRows;
if(selectedRows.length>1)
{
var el = this.template.querySelector('lightning-datatable');
selectedRows=el.selectedRows=el.selectedRows.slice(1);
event.preventDefault();
return;
}
this.werSelectedRow=true;
}
}
Record Edit HTML
<template>
<lightning-record-edit-form record-id={recordId} object-api-name="Work_Experience__c"
onsuccess={handleSuccess} onsubmit ={handleSubmit}>
<lightning-messages></lightning-messages>
<lightning-card title="Overview">
<div class="slds-grid slds-gutters">
<div class="slds-col slds-size_1-of-4">
<lightning-input-field field-name="Name" onchange={handleChange}></lightning-input-field>
</div>
<div class="slds-col slds-size_1-of-4">
<lightning-input-field field-name="Date_From__c" onchange={handleChange}></lightning-input-field>
</div>
<div class="slds-col slds-size_1-of-4">
<lightning-input-field field-name="Date_To__c" onchange={handleChange}></lightning-input-field>
</div>
<div class="slds-col slds-size_1-of-4">
<lightning-input-field field-name="Company_Name__c" onchange={handleChange}></lightning-input-field>
</div>
</div>
</lightning-card>
</lightning-record-edit-form>
Record Edit JS
import { LightningElement, api, wire} from 'lwc';
export default class TestRecordEdit extends LightningElement {
@api recordId;
}