[SalesForce] How to pass lightning-input-field value as a parameter to controller class method in Lightning Web Component

Requirements:

I am building a Custom Mass Transfer Records functionality where Based on Object Name and Owner, I want to display List of Sobject Records owned by user.
Once List is displayed, I want to assign all selected records to New Owner.

I have created generic object Transfer_SObject_Record__c where I have added 2 fields Type(Picklist) contains Sobject name that I want to define and Owner(Lookup:user)
fields. based on these 2 field's value I want to display SObject records with Name field and Owner as a column in the List.

Problem is I am not able to pass lightning-input-field value of both fields to my controller class method.

Error Message that I see on Screen : objType & owner is undefined

Can someone please suggest how to pass lightning-input-field values as a parameter to controller class method?

Below is the code that I have written:

transferRecords.html

<template>
    <lightning-card>
        <div class="slds slds-p-around--medium">
            <lightning-card>
                <div class="app slds-p-around_x-large">
                    <div class="slds-p-top--small slds-text-title">This screen allows you to transfer the records
                     </div>
                    <div class="slds-card__header slds-grid">
                        <div class="slds-card slds-m-around--medium">
                            <lightning-card variant="narrow" icon-name="standard:topic">
                                <h1 slot="title">Find records that match the following criteria</h1>
                            </lightning-card>
                        </div>
                    </div>
                </div>
            </lightning-card>
            <lightning-card>
                <lightning-record-edit-form object-api-name="Transfer_SObject_Record__c" onsuccess={handleSuccess}>
                    <div class="slds-m-around_medium">
                        <div class="slds-form-element">
                            <lightning-input-field field-name='Type__c' value={objType} onchange={handlePickChange}
                                required>
                            </lightning-input-field>
                        </div>
                        <div class="slds-form-element">
                            <lightning-input-field field-name='Owner__c' value={owner} onchange={handleChange} required>
                            </lightning-input-field>
                        </div>
                        <div class="slds-m-top_medium">
                            <lightning-button variant="brand" label="Search" title="Search" onclick={handleSearchClick}
                                class="slds-m-left_x-small">
                            </lightning-button>
                            <lightning-button variant="brand" label="Reset" title="Reset" onclick={handleResetClick}
                                class="slds-m-left_x-small">
                            </lightning-button>
                        </div>
                    </div>
                </lightning-record-edit-form>
            </lightning-card>
            <lightning-card>
                <template if:true={sObjects}>
                    <template for:each={sObjects} for:item="sObj">
                        <p key={sObj.Id}>{sObj.OwnerId}</p>
                    </template>
                </template>
                <template if:true={error}>
                    <!--   <c-error-panel errors={error}></c-error-panel> -->
                    {error}
                </template>
            </lightning-card>
        </div>
    </lightning-card>
</template>

transferRecords.js

 import {
        LightningElement,
        wire,
        track,
        api
    } from 'lwc';
    import {
        ShowToastEvent
    } from 'lightning/platformShowToastEvent';
    import refreshObjList from '@salesforce/apex/ReassignSObjectHelper.refreshObjList';
    
    export default class MassReassignSObjectParent extends LightningElement {
    
    
        @track sObjects;
        @track error;
        objType = '';
        owner = '';
    
        handlePickChange(event) {
            this.objType = event.target.value;
            console.log('objType:' + objType);
        }
        handleChange(event) {
            this.owner = event.target.value[0];
            console.log('owner:' + owner);
        }
        //this method is fired when retrieve records button is clicked
        handleSearchClick(event) {
    
            console.log('Clicikng on Search:');
            const val = event.detail.value;
            console.log('Search Val is:' + val);
            this.template.querySelectorAll('lightning-input-field').forEach(element => {
                console.log('Element is:' + element.detail);
                element.reportValidity();
            });
            refreshObjList({
                    objType: objType,
                    owner: owner
                })
                .then(result => {
                    this.sObjects = result;
                })
                .catch(error => {
                    this.error = error;
                });
    
    
    
            handleResetClick(event) {
                const inputFields = this.template.querySelectorAll(
                    'lightning-input-field'
                );
                if (inputFields) {
                    inputFields.forEach(field => {
                        field.reset();
                    });
                }
            }
        }

transferRecords.js-meta.xml

<?xml version="1.0" encoding="UTF-8"?>
<LightningComponentBundle xmlns="http://soap.sforce.com/2006/04/metadata">
    <apiVersion>48.0</apiVersion>
    <isExposed>true</isExposed>
    <targets>
    <target>lightning__AppPage</target>
    </targets>
   
</LightningComponentBundle>

Controller Class:

public with sharing class ReassignSObjectHelper {
    
    @AuraEnabled(cacheable = true)
    public static List < SObject > refreshObjList(String objType,String owner) {
        system.debug('calling refreshObjList');
        String sObjQueryString;
        String objName = objType;
        system.debug('Object Name is:' + objName);
        String ownerId = owner;
        system.debug('Owner is:' + ownerId);
        String fieldToRetrieve = sObjectField(objName);
        system.debug('fieldToRetrieve' + fieldToRetrieve);
        if (isSObjectAccessible(objName)) {
            sObjQueryString = 'SELECT ' + fieldToRetrieve + '  from ' + objName + ' where Ownerid=:ownerId limit 10';
        } else {
            sObjQueryString = '';
        }
        return database.query(sObjQueryString);
    }
    
    
    
    public static boolean isSObjectAccessible(String sObjectType) {
        system.debug('Calling isAccessible:');
        SObjectType schemaType = Schema.getGlobalDescribe().get(sObjectType);
        system.debug('schemaType is:' + schemaType);
        Schema.DescribeSObjectResult objResult = schemaType.getDescribe();
        system.debug('objResult:' + objResult.isAccessible());
        if (objResult.isAccessible()) {
            return true;
        } else {
            return false;
        }
    }
    public static boolean isSObjectUpdateable(String sObjectType) {
        system.debug('Calling isSObjectUpdateable:');
        SObjectType schemaType = Schema.getGlobalDescribe().get(sObjectType);
        system.debug('schemaType is:' + schemaType);
        Schema.DescribeSObjectResult objResult = schemaType.getDescribe();
        system.debug('objResult:' + objResult.isUpdateable());
        if (objResult.isUpdateable()) {
            return true;
        } else {
            return false;
        }
    }
    public static string sObjectField(String sObjectType) {
        system.debug('Calling sObjectField');
        List<String> objectFields =  new List<String>();
        String query;
        SObjectType schemaType = Schema.getGlobalDescribe().get(sObjectType);
        system.debug('schemaType is:' + schemaType);
        Schema.DescribeSObjectResult objResult = schemaType.getDescribe();
        
        Map < String, Schema.SObjectField > fields = objResult.fields.getMap();
        
        for (String field: fields.keyset()) {
            Schema.DescribeFieldResult describeResult = fields.get(field).getDescribe();
            if (field == 'Id') {
                system.debug('Id');
                objectFields.add(describeResult.getName());
                query += field;
            } else if (describeResult.isNameField()) {
                objectFields.add(describeResult.getName());
                System.debug(field);
                query = field + ',';
            } else if (field == 'OwnerId') {
                system.debug('OwnerId');
                objectFields.add(describeResult.getName());
                query += field;
            }
        }
        return query;
    }
    
    
}

Best Answer

Use event.detail.value to get the value updated value inside the change handler.

handlePickChange(event) {
    this.objType = event.detail.value;
    console.log('objType:' + this.objType);
}

Also,

handleChange(event) {
    this.owner = event.detail.value[0];
    console.log('owner:' + this.owner);
}

You need to use this to refer to the member attributes or reactive properties of Lwc.

Like this.objType and this.owner.

refreshObjList({
        objType: this.objType,
        owner: this.owner
    })
    .then(result => {
        this.sObjects = result;
    })
    .catch(error => {
        this.error = error;
    });

Also, if you are passing these attributes as parameters to the wired method, then use '$objType' or '$owner'.


I think there is another problem in your code, it seems like you are just reporting the validity of the input components but actually not checking if the values are valid or not.

Related Topic