Skip to main content

I have a custom data table which is used in Flow and bellow is the js-meta.xml file

 

<?xml version="1.0" encoding="UTF-8"?><LightningComponentBundle xmlns="http://soap.sforce.com/2006/04/metadata">    <apiVersion>58.0</apiVersion>    <isExposed>true</isExposed>    <description>Asset Search Table</description>    <masterLabel>Asset Search Table</masterLabel>    <targets>        <target>lightning__FlowScreen</target>    </targets>    <targetConfigs>        <targetConfig targets="lightning__FlowScreen">            <propertyType name="T" extends="sObject" label="Select SObject Type" description="Generic sObject" />            <property name="sobjects" type="{T[]}" label="sObject Collection"/>            <property name="selectedAssets" type="{T[]}" label="Selected sObject Collection"/>        </targetConfig>    </targetConfigs></LightningComponentBundle>

 

Unable to perform array filter in LWC JS

 

B.png

this feature allows search multiple items from the table and go to next step which is not possible in standard datatable but when doing search table is not retendering. This is occurring only in production and working in a UAT(partial copy sandbox)

<template>    <article class="slds-card">        <div class="slds-card__header slds-grid">            <lightning-input type="search" label={label} onchange={search} placeholder="Manufacturer Serial"> </lightning-input>        </div>        <footer class="slds-card__footer">            <lightning-datatable data={filteredData} columns={columns} key-field="Id" selected-rows={selectedIDs} onrowselection={handleRowSelection}>            </lightning-datatable>        </footer>    </article></template> import { LightningElement, api} from 'lwc';const columns = [    { label: 'Asset Name', fieldName: 'Name', type: 'text' },    { label: 'Manufacturer Serial', fieldName: 'Manufacturer_Serial__c', type: 'text' },    { label: 'Product Code', fieldName: 'ProductCode', type: 'text' }];/** * Developer:Sameera De Silva * Description: Allow user to select multiple sObject records and with search function */export default class AssetSearchTable extends LightningElement {    @api selectedAssets = [];    @api sobjects = [];    filteredData = [];    searchKeyWord;    recordCount = 0;    selectedRecordCount = 0;    columns = columns;    label;    selectedIDs=[];    //label displayed near search field    renderedCallback(){        this.label = `Total Assets : ${this.recordCount} | Selected Assets : ${this.selectedIDs.length}`;    }    connectedCallback() {        this.filteredData = [...this.sobjects];        this.recordCount = this.sobjects.length;    }    handleRowSelection(event) {        this.selectedRecordCount =0;        switch (event.detail.config.action) {            case 'selectAllRows':                this.selectedAssets = [...event.detail.selectedRows];                this.selectedAssets.forEach(record=>{                    let idFound = this.selectedIDs.includes(record.Id);                    if(!idFound){                        this.selectedIDs.push(record.Id);                    }                })                this.selectedRecordCount = this.selectedIDs.length;                break;            case 'deselectAllRows':                this.selectedAssets = [];                this.selectedIDs = [];                this.selectedRecordCount = 0;                break;            case 'rowSelect':                let selectId = event.detail.config.value;                let idFound = this.selectedIDs.includes(selectId);                if(!idFound){                    this.selectedIDs.push(selectId);                }                if(this.selectedAssets.length>0){                    event.detail.selectedRows.forEach(record=>{                        if(!this.selectedAssets.find(element=>element.Id==record.Id)){                            this.selectedAssets.push(record);                        }                    })                }else{                    this.selectedAssets = [...event.detail.selectedRows];                }                this.selectedRecordCount = this.selectedIDs.length;                break;            case 'rowDeselect':                let deselectId = event.detail.config.value;                this.selectedIDs.splice(this.selectedIDs.indexOf(deselectId),1);                this.selectedAssets = [...event.detail.selectedRows];                this.selectedRecordCount = this.selectedIDs.length;                break;            default:                break;        }        this.label = `Total Assets : ${this.recordCount} | Selected Assets : ${this.selectedRecordCount}`;    }    search(event) {        this.searchKeyWord = event.detail.value;        this.filteredData =  [...this.sobjects].filter(record => record.Manufacturer_Serial__c.includes(this.searchKeyWord));        console.log(this.filteredData);        let arr = [...this.selectedIDs];        this.selectedIDs = [];        this.selectedIDs = arr;        this.label = `Total Assets : ${this.recordCount} | Selected Assets : ${arr.length}`;    }}

"search" method used in the input box. Also sobject array is a proxy with readonly. Need help on this . Flowing is the way how input sobject collection is showing in console

 

c.png

Bellow is how UAT shows 

 

D.png

 

#LWC #Flow @Amnon Kruvi @lwc developer group @Amit Singh

5 Antworten
0/9000