1

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

  • Any ideas on how to proceed with this? – erikvm Jun 15 at 16:48
  • 2
    My guess is since you're wrapped in Aura, @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 at 6:50
  • Thanks man, that solved it! I just needed to pass the recordId to the Aura component! If you wish to provide an answer post I'll mark it – erikvm Jun 18 at 13:01
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>

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.