0

As its my first time working with Lightning Web Components, please help me fetching data from the custom object, I didn't understand what's going wrong in this. Below is my code Thanks in advance!!

Controller -

public with sharing class LightningProjectController {
@AuraEnabled(cacheable=true)
public static List<Beat_Plan__c> beatPlanRecords() {
    return [SELECT Id, Name, Start_time__c, End_Time__c from Beat_Plan__c limit 1];
} }

html -

<template>
<lightning-card title="End Day" icon-name="custom:custom9">
    <lightning-layout>
        <lightning-layout-item>
                <div class="slds-grid slds-gutters">
                    <div class="slds-col"><h2>Start Time </h2>
                        <template if:true={value.data}>
                            <template for:each={value.data} for:item="BeatPlan">
                                <p key={BeatPlan.Id}>{BeatPlan.Start_Time__c}</p>
                            </template>
                        </template>
                    </div>
                    <div class="slds-col"><h2>End Time</h2>
                        <template if:true={value.data}>
                            <template for:each={value.data} for:item="BeatPlan">
                                <p key={BeatPlan.Id}>{BeatPlan.End_Time__c}</p>
                            </template>
                        </template>
                    </div>
                </div>
        </lightning-layout-item>
    </lightning-layout>
    <lightning-button variant="brand" label="OK" class="button"></lightning-button>
</lightning-card>


js -

    import { LightningElement, wire } from 'lwc';
import beatPlanRecords from '@salesforce/apex/LightningProjectController.beatPlanRecords';
export default class BeatPlanApplication extends LightningElement {
    @wire(beatPlanRecords) value;
}
  • as is, its unclear what you are asking, what is the problem you are facing, do you have any errors? if you are new to LWC, the best palce to start are Trailheads, they have very good introductory modules on the subject – glls Apr 6 at 12:29
  • Data is not displaying on my component. – Varsha Apr 6 at 12:33
  • as mentioned bellow, you will want to refactor your code, is your apex controller returning a value? is value undefined ? – glls Apr 6 at 12:44
  • These are all things covered in the Trailhead: Lightning Web Component Modules – Vivek Makkar Apr 8 at 7:05
0

There are several things you can do to better structure your lwc,

1.- use a Function, instead of a property for fetching your data

2.- add error handling

3.- in your template - use if:true & if:false statements to cross check agains a getter that your data is actually returning something, (or not)

These things will help you determine Why there is no data displayed in your template, be it that the controller returns an empty array, there is an error OR something wrong with your logic.

These are all things covered in the Trailhead: Lightning Web Component Modules

  • No MODULE named markup://c:errorPanel found : [markup://c:beatPlanApplication] I am getting this error. – Varsha Apr 6 at 13:07
  • once you have refactored your code and run into another issue, i would suggest you open a new post. the forum is designed to have 1 question - 1 answer, in order to avoid extended discussions and constantly updated questions. =) – glls Apr 6 at 13:10
0

there are a few things you might consider. From your example it seems (limit 1) that you only have one record. On the other hand your method signature List,Beat_Plan_c indicates that it might be more and you will amend the SOQL later to return more and/or having a parameter.

Let's consider option 1: there will only be one record ever. My strong suggestion here is to fetch the Id only and hand over the handling of the record to the Lightning Data Service. So your Apex would look like this:

public with sharing class LightningProjectController {
    @AuraEnabled(cacheable=true)
    public static String beatPlanRecordsId() {
        return [SELECT Id from Beat_Plan__c limit 1];
    } 
}

Then your JS class would look like this (Using a function to call, not a wire):

import { LightningElement, track } from 'lwc';
import beatPlanRecordId from '@salesforce/apex/LightningProjectController.beatPlanRecordsId';

export default class BeatPlanApplication extends LightningElement {

    @track beatPlanId = null;

    connectedCallBack() {

        beatPlanRecordId()
          .then(result => {this.beatPlanId = result})
          .catch(error => {this.beatPlanId = null; console.log(JSON.stringify(error,null,2))})
          // You want better error handling, like showing a toast here
    }

}

Finally the html template

<template>
    <lightning-card title="End Day" icon-name="custom:custom9">
        <template if:true={beatPlanId}>
            <lightning-record-edit-form
                record-id={beatPlanId}
                object-api-name="Beat_Plan__c"
            >
                <lightning-layout multiple-rows="true">
                    <lightning-layout-item size="12">
                        <lightning-messages></lightning-messages>
                    </lightning-layout-item>
                    <lightning-layout-item size="6">
                        <lightning-input-field
                            field-name="Start_Time__c"
                        ></lightning-input-field>
                    </lightning-layout-item>
                    <lightning-layout-item size="6">
                        <lightning-input-field
                            field-name="End_Time__c"
                        ></lightning-input-field>
                    </lightning-layout-item>
                    <lightning-layout-item size="12">
                        <lightning-button
                            variant="brand"
                            label="OK"
                            class="button"
                            type="Submit"
                        ></lightning-button>
                    </lightning-layout-item>
                </lightning-layout>
            </lightning-record-edit-form>
        </template>
        <template if:false={beatPlanId}>
            <p class="slds-body">
                Sorry no Beat Plan available - you might want to add the error
                here
            </p>
        </template>
    </lightning-card>
</template>

If the idea is to display only use lightning-record-view-form and lightning-output-field you don't need a button or the lightning-messages

The approach is different when you have multiple records. If there are a few only and they might be edited, I would still use Lightning Data Service.

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.