Embedding LWC in Aura Component not working?

Question

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

Answer 1

You need to set the public property recordId from the aura component. Change your aura component to

<aura:component implements="flexipage:availableForAllPageTypes,force:hasRecordId"> <c:ps_testdriveSlots recordId="{!v.recordId}"/> </aura:component>