1

I would like to create table as below with LWC Product | Month 1 | Month 2 | Month 3... the header is coming from an array I created where I read the start date and end date of my opportunity and it will dynamically create the header and add input fields below each Months in the header. The rep can enter a product, put an amount under each month. once he clicks on save, it will create a record for each month that appears in the header with his appropriate amount and the product name of course.

Here is my code to create the header (array) but I am not able to display it. Can someone help?

import { LightningElement, api, wire, track } from 'lwc';
import { getRecord } from 'lightning/uiRecordApi';

const FIELDS = [
    'Opportunity.Name',
    'Opportunity.Start_Date__c',
    'Opportunity.End_Date__c',
];


export default class Schedule extends LightningElement {

    @api recordId;
    @wire(getRecord, { recordId: '$recordId', fields: FIELDS })
    opportunity;
    @track headerArray = [];
    @track startDate;
    @track endDate;
    @track month;
    @track diffMonth;
    @track currentMonth;

    get createHeader(){
        
        this.startDate = new Date(this.opportunity.data.fields.Start_Date__c.value);
        this.startDate = this.startDate.getMonth();
        this.currentMonth = this.startDate;
        this.endDate = new Date(this.opportunity.data.fields.End_Date__c.value);
        this.endDate = this.endDate.getMonth();
        
        var month = new Array();
        month[0] = "January";
        month[1] = "February";
        month[2] = "March";
        month[3] = "April";
        month[4] = "May";
        month[5] = "June";
        month[6] = "July";
        month[7] = "August";
        month[8] = "September";
        month[9] = "October";
        month[10] = "November";
        month[11] = "December";
        
        this.headerArray.push('Product');
        this.headerArray.push('Description');
        
        if(this.endDate - this.startDate < 0){
            this.diffMonth = (this.endDate + 12) - this.startDate;
            while(this.diffMonth >= 0){
                if(this.currentMonth > 11){
                    this.currentMonth = 0;
                }
                this.headerArray.push(month[this.currentMonth]);
                this.currentMonth++;
                this.diffMonth--;
            }
        }else{
            while(this.startDate < (this.endDate + 1)){
                this.headerArray.push(month[this.startDate]);
                this.startDate++;
            }
        }
        
        return this.headerArray;
    }

    get name() {
        return this.opportunity.data.fields.Name.value;
    }

    successHandler(event){
        this.recordId = event.detail.id;

    }

}

Here is the html

<template>
    <lightning-card >
        <lightning-layout>
            <template for:each={headerArray} for:item="field">
                <lightning-layout-item key={field.label} size="6">
                    {field.value}
                </lightning-layout-item>
            </template>
        </lightning-layout>
    </lightning-card>
    
    
</template>

I am new to coding :) and doing my best :p

I Want to precise that it doesn't need to be a datatable, it can be individual fields that I will display as a table.

0

You are populating your array using a getter method but you are not calling this getter method inside your template. Replace the headerArray in your template with createHeader.

<template>
    <lightning-card >
        <lightning-layout>
            <template for:each={createHeader} for:item="field">
                <lightning-layout-item key={field} size="6">
                    {field}
                </lightning-layout-item>
            </template>
        </lightning-layout>
    </lightning-card>
</template>
7
  • Yes, I tried that before and this is the error I get: Error during LWC component connect phase: [this.opportunity.data is undefined] – Eric Feb 15 at 22:51
  • The error is because the getter is trying to access opportunity before the opportunity is set in @wire adapter. Try wrapping the template iterator withing <template if:true={opportunity.data}></template> so that the getter only tries to access opportunity property after it is set. – Naga Feb 16 at 0:33
  • Ok, I see what you mean, the error is no longer there. The array is still not showing, the component is empty. Knowing that the createHeader () returns an array called headerArray, how is the iterator know the name of the array to iterate over? This is another part I am not sure to understand. Thanks! – Eric Feb 16 at 19:16
  • @Eric, the getter returns the headerArray using return this.headerArray; at the end of the getter.The iterator doesn't need to know the name of the array. I don't see that you are constructing an array of objects but you are trying to access like so in the template. Could you have a console.log right before the return statement in the getter and see if your array has what you are trying to access? – Naga Feb 16 at 21:11
  • Hi Naga, I did not create an array of object but an array by itself. Just to give you more details, I have a start date and an end date in the opportunity. I am building an array to display the months as header. If start date is Jan and end date is April I will display Jan, Feb, March and April in the header and under each months an input field to add budgets. once I save it, it will create 1 record for each month showing in the header with the related amount to it. Make sense? – Eric Feb 16 at 21:37

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.