I'm trying to embed a Lightning Web Component inside an aura component (because I need some features only aura components support right now - populating default field values when using force:createRecord
.
My LWC JS file:
/* eslint-disable no-console */
import { LightningElement, wire, api, track } from 'lwc';
import { getRecord } from 'lightning/uiRecordApi';
const FIELDS = [
"Allocated_Resource__c.Duration__c",
"Allocated_Resource__c.Start_Time__c",
"Allocated_Resource__c.End_Time__c",
"Allocated_Resource__c.Start_Date__c",
"Allocated_Resource__c.End_Date__c",
]
export default class Ps_testdriveSlots extends LightningElement {
@api recordId;
@track slots;
@track duration;
@track startTime;
@track endTime;
@track startDate;
@track endDate;
@wire(getRecord, { recordId: '$recordId', fields: FIELDS })
getDuration({ error, data }) {
if (error) {
// TODO
} else if (data) {
this.duration = data.fields.Duration__c.value;
this.startTime = data.fields.Start_Time__c.value.split(".")[0];
this.endTime = data.fields.End_Time__c.value.split(".")[0];
this.startDate = data.fields.Start_Date__c.value;
this.endDate = data.fields.End_Date__c.value;
this.slots = this.getTimeSlots(this.getTimeDate(this.startTime), this.getTimeDate(this.endTime), this.duration)
}
}
getTimeDate(time) {
let timeParts = time.split(":");
let d = new Date();
d.setHours(timeParts[0]);
d.setMinutes(timeParts[1]);
d.setSeconds(timeParts[2]);
return d;
}
getTimeSlots(startDate, endDate, interval) {
let slots = [];
let intervalMillis = interval * 60 * 1000;
while (startDate < endDate) {
let mins = (startDate.getMinutes() + "0").slice(0, 2);
slots.push(startDate.getHours() + ":" + mins);
startDate.setTime(startDate.getTime() + intervalMillis);
}
return slots
}
get getDates() {
const startDate = new Date(this.startDate);
const endDate = new Date(this.endDate);
const interval = 1000 * 60 * 60 * 24;
const duration = endDate - startDate;
const steps = duration / interval;
return Array.from({ length: steps + 1 }, (v, i) => new Date(startDate.valueOf() + (interval * i)).toDateString());
}
}
LWC HTML file:
<template>
<lightning-card>
<lightning-tabset variant="scoped">
<template for:each={getDates} for:item="date">
<lightning-tab label={date} key={date} value={date}>
<template for:each={slots} for:item="slot">
<lightning-button onclick={getTimeSlot} data-index={date} key={slot} label={slot}
value={slot}>
</lightning-button>
</template>
</lightning-tab>
</template>
</lightning-tabset>
</lightning-card>
</template>
Aura component:
<aura:component implements="flexipage:availableForAllPageTypes">
<c:ps_testdriveSlots />
</aura:component>
This is what I see on the record page: http://prntscr.com/o0ff54
Any idea why? If I just empty out my LWC file and type in "Hello" - it renders in the aura component, but with the current code in the LWC, it's like the functionality is not being "translated" for the aura component to be consumed
@api recordId;
is never set. You need to get that in Aura and then pass it down in the markup:<c:ps_testdriveSlots record-id={recordId} />
(or however passing values is done in Aura, i am not confident with it). – zaitsman Jun 17 '19 at 6:50