+ Start a Discussion
Mike Tol 1Mike Tol 1 

Get leads in input fields, not in columns

Hi!
I have leadtable as in the image.

User-added image

I need get leads in input fields to save them automatically, not in columns. Please tell me how can I do that.

My code:
Html

<template>
    <lightning-card title="Leads">
        <lightning-layout multiple-rows="true" vertical-align="end">
           
            <lightning-layout-item size="12" padding="around-small">
                <lightning-datatable key-field="id" data={leads} columns={columns}>
                   
                </lightning-datatable>
                <lightning-input class="slds-p-around_medium" label="Name" name="leadName"
                    onchange={nameChangedHandler}></lightning-input>
                    <lightning-input class="slds-p-around_medium" label="Title" name="leadTitle"
                    onchange={titleChangedHandler}></lightning-input>
                <lightning-input class="slds-p-around_medium" label="Phone" type="phone" name="leadPhone"
                    onchange={phoneChangedHandler}></lightning-input>
                <br/>
            </lightning-layout-item>
           
        </lightning-layout>
    </lightning-card>
</template>

Js
import { LightningElement, wire } from 'lwc';
import getLeads from '@salesforce/apex/ProjectThree.getLeads';
import LEAD_OBJECT from '@salesforce/schema/Lead';
import NAME_FIELD from '@salesforce/schema/Lead.Title';
import TITLE_FIELD from '@salesforce/schema/Lead.Title';
import PHONE_FIELD from '@salesforce/schema/Lead.Phone';
const columns = [
    { label: 'Name', fieldName: 'recordLink', type: 'url',
        typeAttributes: {label: {fieldName: "LeadName"}, tooltip: "Name", linkify: true} },
    { label: 'Title', fieldName: 'Title', type: 'text', editable: true },
    { label: 'Phone', fieldName: 'Phone', type: 'text', editable: true }    
];
export default class LdsCreateRecord extends LightningElement {
    columns = columns;
    leads;
    lead = LEAD_OBJECT;
    myFields = [NAME_FIELD, TITLE_FIELD, PHONE_FIELD];
    strName;
    strTitle;
    strPhone;
    // Change Handlers.
    nameChangedHandler(event){
        this.strName = event.target.value;
    }
    titleChangedHandler(event){
        this.strAccountNumber = event.target.value;
    }
    phoneChangedHandler(event){
        this.strPhone = event.target.value;
    }
 
    @wire(getLeads)
    wiredLeads(value) {
        const {error, data} = value;
        if (data) {
            let leadData = JSON.parse(JSON.stringify(data));  
            leadData.forEach(record => {
                record.recordLink = "/" + record.Id;  
                record.LeadName = record.Name;
            });  
            this.leads = leadData;
        } else if (error) {
            this.error = error;
        }
    }
}

public with sharing class ProjectThree {
    @AuraEnabled(cacheable=true)
    public static List<Lead> getLeads() {
        List<Lead> leads = [
            SELECT Id, Name, Title, Phone
            FROM Lead         
            //WHERE Name Like 'Lisa%'
            Limit 3
        ];
        System.debug('leads = ' + leads);
        return leads;                
    }  
}   
Best Answer chosen by Mike Tol 1
ravi soniravi soni
hi Mike,
I changed something in code. I saw your 3 days ago requirment too but due to some reason I couldn't give the reply but your requirment was you need to save Title and Phone fileds without click any button autosave. It is possible but for achieve this requirment you need to use custom table. you can't do it in lightning-datatable due to some limitation.

Here is entire code.
import { LightningElement , wire} from 'lwc';
//import getLeads from '@salesforce/apex/Qqq.getLeads';

import getLeads from '@salesforce/apex/fetchLead.getLeads';
import { updateRecord } from 'lightning/uiRecordApi';
// const columns = [
//     { label: 'Name', fieldName: 'recordLink', type: 'url',
//     typeAttributes: {label: {fieldName: "LeadName"}, tooltip: "Name", linkify: true} },
//     { label: 'Title', fieldName: 'Title', type: 'text', editable: true },
//     { label: 'Phone', fieldName: 'Phone', type: 'text', editable: true }    
// ];
export default class LeadTable extends LightningElement {
    // columns = columns;
    leads;
leadDetails=[];   
    @wire(getLeads)
    wiredLeads(value) {
        this.leadDetails = value;
        const {error, data} = value;
        if (data) {
            let leadData = JSON.parse(JSON.stringify(data));  
            leadData.forEach(record => {
                                record.recordLink = "/" + record.Id;  
                                record.LeadName = record.Name;
                        });  
            this.leads = leadData;
        } else if (error) {
            this.error = error;
        }
    }

    handleBlur(event){
     let getValue =  event.target.value;
     let fieldLable = event.target.label;
     let sId = event.target.name;
     this.handleInputChange(event,sId,getValue,fieldLable);

    }
    handleInputChange(event,sId,getValue,fieldLable){
         const fields = {};
         fields['Id'] = sId;
         fields[fieldLable] = getValue;
            const recordInput = { fields };
           updateRecord(recordInput)
                .then(() => {
                   console.log('Data Updated Successfuly!');
                })
                .catch(error => {
                    alert('error : ' + JSON.stringify(error));
                });
    }
}
=====================================
<!-- <template>
    <lightning-card title="Leads">
        <lightning-layout multiple-rows="true" vertical-align="end">
           
            <lightning-layout-item size="12" padding="around-small">
                <lightning-datatable key-field="id" data={leads} columns={columns}></lightning-datatable>
            </lightning-layout-item>
           
        </lightning-layout>
    </lightning-card>
</template> -->
<template>
	 <lightning-card title="Leads">
<table class="slds-table slds-table_cell-buffer slds-table_bordered"
	aria-label="Example default base table of Opportunities">
	<thead>
		<tr class="slds-line-height_reset">
			<th class="" scope="col">
				<div class="slds-truncate" title="Name">Name</div>
			</th>
			<th class="" scope="col">
				<div class="slds-truncate" title="Title">Title</div>
			</th>
			<th class="" scope="col">
				<div class="slds-truncate" title="Phone">Phone</div>
			</th>
			
		</tr>
	</thead>
	<tbody>
        <template for:each={leads} for:item="lead">
		<tr class="slds-hint-parent" key={lead.Id}>
			<td >
				<div class="slds-truncate" title={lead.LeadName}>
					<a href={lead.recordLink} >{lead.LeadName}</a>
				</div>
			</td>
			<td >
				<!-- <div class="slds-truncate" title={lead.Title}>{lead.Title}</div> -->
				<lightning-input type="text"  variant="label-hidden" name={lead.Id} label="Title" value={lead.Title}  onblur={handleBlur}></lightning-input>
			</td>
			<td >
				<!-- <div class="slds-truncate" title={lead.Phone}>{lead.Phone}</div> -->
				<lightning-input type="text"  variant="label-hidden" name={lead.Id} label="Phone" value={lead.Phone}  onblur={handleBlur}></lightning-input>
			</td>
			
		</tr>
        </template>
	</tbody>
</table>
   </lightning-card>
</template>
=========================================================


public class fetchLead {
@AuraEnabled(cacheable=true)
public static list<lead> getLeads(){
return [SELECT Id,Name,Title,Phone FROM Lead limit 5];
}

@AuraEnabled(cacheable=true)
    public static List<Contact> getContacts() {
        List<Contact> contacts = [
            SELECT Id, Name
            FROM Contact     
            //WHERE LastName Like 'Apex%'
            Limit 3            
        ];        
        System.debug('contacts = ' + contacts);
        return contacts;    
    }   
}

you don't need apex class for saving the records.
use this code and if you satisfied with my answer, let me know by marking it as best answer.
Thank you​​​​​​​

All Answers

ravi soniravi soni
hi Mike,
I changed something in code. I saw your 3 days ago requirment too but due to some reason I couldn't give the reply but your requirment was you need to save Title and Phone fileds without click any button autosave. It is possible but for achieve this requirment you need to use custom table. you can't do it in lightning-datatable due to some limitation.

Here is entire code.
import { LightningElement , wire} from 'lwc';
//import getLeads from '@salesforce/apex/Qqq.getLeads';

import getLeads from '@salesforce/apex/fetchLead.getLeads';
import { updateRecord } from 'lightning/uiRecordApi';
// const columns = [
//     { label: 'Name', fieldName: 'recordLink', type: 'url',
//     typeAttributes: {label: {fieldName: "LeadName"}, tooltip: "Name", linkify: true} },
//     { label: 'Title', fieldName: 'Title', type: 'text', editable: true },
//     { label: 'Phone', fieldName: 'Phone', type: 'text', editable: true }    
// ];
export default class LeadTable extends LightningElement {
    // columns = columns;
    leads;
leadDetails=[];   
    @wire(getLeads)
    wiredLeads(value) {
        this.leadDetails = value;
        const {error, data} = value;
        if (data) {
            let leadData = JSON.parse(JSON.stringify(data));  
            leadData.forEach(record => {
                                record.recordLink = "/" + record.Id;  
                                record.LeadName = record.Name;
                        });  
            this.leads = leadData;
        } else if (error) {
            this.error = error;
        }
    }

    handleBlur(event){
     let getValue =  event.target.value;
     let fieldLable = event.target.label;
     let sId = event.target.name;
     this.handleInputChange(event,sId,getValue,fieldLable);

    }
    handleInputChange(event,sId,getValue,fieldLable){
         const fields = {};
         fields['Id'] = sId;
         fields[fieldLable] = getValue;
            const recordInput = { fields };
           updateRecord(recordInput)
                .then(() => {
                   console.log('Data Updated Successfuly!');
                })
                .catch(error => {
                    alert('error : ' + JSON.stringify(error));
                });
    }
}
=====================================
<!-- <template>
    <lightning-card title="Leads">
        <lightning-layout multiple-rows="true" vertical-align="end">
           
            <lightning-layout-item size="12" padding="around-small">
                <lightning-datatable key-field="id" data={leads} columns={columns}></lightning-datatable>
            </lightning-layout-item>
           
        </lightning-layout>
    </lightning-card>
</template> -->
<template>
	 <lightning-card title="Leads">
<table class="slds-table slds-table_cell-buffer slds-table_bordered"
	aria-label="Example default base table of Opportunities">
	<thead>
		<tr class="slds-line-height_reset">
			<th class="" scope="col">
				<div class="slds-truncate" title="Name">Name</div>
			</th>
			<th class="" scope="col">
				<div class="slds-truncate" title="Title">Title</div>
			</th>
			<th class="" scope="col">
				<div class="slds-truncate" title="Phone">Phone</div>
			</th>
			
		</tr>
	</thead>
	<tbody>
        <template for:each={leads} for:item="lead">
		<tr class="slds-hint-parent" key={lead.Id}>
			<td >
				<div class="slds-truncate" title={lead.LeadName}>
					<a href={lead.recordLink} >{lead.LeadName}</a>
				</div>
			</td>
			<td >
				<!-- <div class="slds-truncate" title={lead.Title}>{lead.Title}</div> -->
				<lightning-input type="text"  variant="label-hidden" name={lead.Id} label="Title" value={lead.Title}  onblur={handleBlur}></lightning-input>
			</td>
			<td >
				<!-- <div class="slds-truncate" title={lead.Phone}>{lead.Phone}</div> -->
				<lightning-input type="text"  variant="label-hidden" name={lead.Id} label="Phone" value={lead.Phone}  onblur={handleBlur}></lightning-input>
			</td>
			
		</tr>
        </template>
	</tbody>
</table>
   </lightning-card>
</template>
=========================================================


public class fetchLead {
@AuraEnabled(cacheable=true)
public static list<lead> getLeads(){
return [SELECT Id,Name,Title,Phone FROM Lead limit 5];
}

@AuraEnabled(cacheable=true)
    public static List<Contact> getContacts() {
        List<Contact> contacts = [
            SELECT Id, Name
            FROM Contact     
            //WHERE LastName Like 'Apex%'
            Limit 3            
        ];        
        System.debug('contacts = ' + contacts);
        return contacts;    
    }   
}

you don't need apex class for saving the records.
use this code and if you satisfied with my answer, let me know by marking it as best answer.
Thank you​​​​​​​
This was selected as the best answer
Mike Tol 1Mike Tol 1
Thank you Ravi!!!
 
ravi soniravi soni
Most Welcome Mike