[SalesForce] Embedding LWC in Aura Component not working

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

Best Answer

You need to set the LWC's 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>

Related Topic