Is it possible to pass records into a collection, and then display them, in a lightning web component?

Question

I'm in the midst of creating a lightning web component to visualise salesforce records in the concept of a timeline. I've managed to create my timeline component, styling etc, and retrieve the data using salesforce's fairly recently released API. I've provided a link below, for further information. I'm fairly new to JavaScript so forgive me if there is any poor mistakes.

https://developer.salesforce.com/docs/component-library/documentation/en/lwc/lwc.reference_wire_adapters_get_related_list_records

The problem comes from when I retrieve the data, and attempt to split the records, into different collections based on a fields certain value, it yields no result. I use for:each in my HTML to call my collections and no records are displayed.

I believe the problem lies in the for loop that appends the data to the collections, but I'm not sure. I've changed data[x] to this.records[x] and it yields the same results. I'd appreciate any pointers, and welcome any constructive criticisms.

Note that when I use the records collection provided by the api the records are displayed.

Timeline.js

import { LightningElement,api, wire, track} from 'lwc';
import { getRelatedListRecords } from 'lightning/uiRelatedListApi';
export default class timeline extends LightningElement {
    @api recordId;
    @track CompletedTasks = [];
    @track InProgressTasks = [];
    @track OverdueTasks = [];
    error; 
    records;

    @wire(getRelatedListRecords, {
        parentRecordId: '$recordId',
        relatedListId: 'Tasks__r',
        fields: ['Task__c.Id','Task__c.Name', 'Task__c.Estimated_Completion_Date__c', 'Task__c.Completion_Status__c'],
        sortBy: ['Task__c.Estimated_Completion_Date__c'],
        
    })listInfo({ error, data }) {
        if (data) {
            this.records = data.records;
            this.error = undefined;
            for (let x = 0; x < data.length; x++) {
              if (data[x].Completion_Status__c === "Completed") {
                  this.CompletedTasks.append(data[x]);
              } else if (data[x].Completion_Status__c === "In Progress") {
                  this.InProgressTasks.append(data[x]);
              } else if (data[x].Completion_Status__c === "Overdue") {
                  this.OverdueTasks.append(data[x]);
              }
          }
        } else if (error) {
            this.error = error;
            this.records = undefined;
        }

    }

Timeline.html

<lightning-tab label="All Tasks" value="All Tasks" title = "All Tasks">
   <div style="overflow-x: scroll; height:130px;">
      <div class="tasks-container">
         <template for:each={CompletedTasks} for:item="rec">
            <div key={rec.fields.Id.value}>
               <template if:true={CompletedTasks}>
                  <div class="task-card">
                     <ul class="slds-has-dividers_around-space" draggable="true">
                        <li class="slds-item">
                           <article class="slds-tile slds-tile_board">
                              <h3 class="slds-tile__title slds-truncate" title="Journey Name">
                                 <p style = "font-weight: 600;">Web Development Onboarding</p>
                              </h3>
                              <div class="slds-tile__detail">
                                 <div class="slds-text-heading_small">
                                    <a>
                                    {rec.fields.Name.value}
                                    </a>
                                 </div>
                                 <p class="slds-truncate" title="Esimated Completion Date:">Esimated Completion Date:</p>
                                 <div class = "statusdate">
                                    <p class="slds-truncate" title="Date" style = "width: 200px;">{rec.fields.Estimated_Completion_Date__c.value}</p>
                                    <div class = "statusbuttoncomplete">
                                       <span class="slds-badge slds-theme_success">{rec.fields.Completion_Status__c.value }</span>
                                    </div>
                                 </div>
                              </div>
                           </article>
                        </li>
                     </ul>
                  </div>
               </template>
            </div>
         </template>
      </div>
   </div>
</lightning-tab>

Can you add `this.CompletedTasks = JSON.parse(JSON.stringify(this.CompletedTasks));` at the end of your `if(data)` branch? — eyescream, Oct 11 '22 at 17:01
@eyescream added, and unfortunately achieves the same result. — JWL182, Oct 11 '22 at 21:52

score 0 · Answer 1 · answered Oct 13 '22 at 12:49

You had few syntax errors in the loop.

There's no data.length because data is an object, not an array. You want data.records.length.
And access to field values has to be like what you have in html part (rec.fields.Completion_Status__c.value), if you just go data[x].Completion_Status__c === "Completed" you're comparing string and complex object again. Yes, it is different to when you use data sent from Apex and slightly annoying but that's standard LWC / UI record API for you...
It's array.push(), not append().
And html - either you didn't paste everything or there's something fishy around lightning-tab, nothing was rendering.

Try with this (it's converted to display Account Cases, not everybody will have your custom Task__c)

<template>
    <lightning-card>
        <template for:each={CompletedTasks} for:item="rec">
            <div key={rec.fields.Id.value}>
                <div class="task-card">
                    <ul class="slds-has-dividers_around-space" draggable="true">
                        <li class="slds-item">
                        <article class="slds-tile slds-tile_board">
                            <h3 class="slds-tile__title slds-truncate" title="Journey Name">
                                <p style="font-weight: 600;">Web Development Onboarding</p>
                            </h3>
                            <div class="slds-tile__detail">
                                <div class="slds-text-heading_small">
                                    <a>
                                    {rec.fields.Subject.value}
                                    </a>
                                </div>
                                <p class="slds-truncate" title="Esimated Completion Date:">Esimated Completion Date:</p>
                                <div class = "statusdate">
                                    <p class="slds-truncate" title="Date" style = "width: 200px;">{rec.fields.CreatedDate.value}</p>
                                    <div class = "statusbuttoncomplete">
                                    <span class="slds-badge slds-theme_success">{rec.fields.Status.value }</span>
                                    </div>
                                </div>
                            </div>
                        </article>
                        </li>
                    </ul>
                </div>
            </div>
        </template>
    </lightning-card>
</template>

import { LightningElement,api, wire, track} from 'lwc';
import { getRelatedListRecords } from 'lightning/uiRelatedListApi';

export default class Stack74031191 extends LightningElement {
    @api recordId;
    @track CompletedTasks = [];
    @track InProgressTasks = [];
    @track OverdueTasks = [];
    error; 
    records;

    @wire(getRelatedListRecords, {
        parentRecordId: '$recordId',
        relatedListId: 'Cases',
        fields: ['Case.Id','Case.Subject', 'Case.CreatedDate', 'Case.Status'],
        sortBy: ['Case.CreatedDate'],
        
    })listInfo({ error, data }) {
        if (data) {
            this.records = data.records;
            this.error = undefined;

            for (let i = 0; i < data.records.length; ++i) {
                let r = data.records[i];
                let status = r.fields.Status.value;
                if (status === "Closed") {
                    this.CompletedTasks.push(r);
                } else if (status === "New") {
                    this.InProgressTasks.push(r);
                }
            }
            // this.CompletedTasks = JSON.parse(JSON.stringify(this.CompletedTasks));
            // this.InProgressTasks = JSON.parse(JSON.stringify(this.InProgressTasks));
        } else if (error) {
            this.error = error;
            this.records = undefined;
        }
    }
}

<?xml version="1.0" encoding="UTF-8"?>
<LightningComponentBundle xmlns="http://soap.sforce.com/2006/04/metadata">
    <apiVersion>55.0</apiVersion>
    <isExposed>true</isExposed>
    <targets>
        <target>lightning__RecordPage</target>
    </targets>
    <targetConfigs>
        <targetConfig targets="lightning__RecordPage">
            <objects>
                <object>Account</object>
            </objects>
        </targetConfig>
    </targetConfigs>
</LightningComponentBundle>

Is it possible to pass records into a collection, and then display them, in a lightning web component?

1 Answers1