You need to sign in to do that
Don't have an account?

Getting one variable of a function in another function in JS controller(LWC)
Hi All,
I want to get a text variable value in another function and perform some operation and populate the value in another input variable but I ma not able to do that.
Can anyone guide me with it ?
My LWC and Controller below:-
<template>
<lightning-card>
<div class="c-container">
<lightning-layout>
<lightning-layout-item padding="around-small">
<div class="header-column">
<lightning-button class = "slds-p-around_large" variant="brand" onclick={addNewRow} name="Add" label="Add">
</lightning-button>
</div>
</lightning-layout-item>
<lightning-layout-item padding="around-small">
<div class="header-column">
<p class="field-title" title="Opportunity Amount">Opportunity Amount</p>
<p><lightning-formatted-number
format-style="currency"
value={amount}
currency-code="USD">
</lightning-formatted-number></p>
</div>
</lightning-layout-item>
</lightning-layout>
</div>
<table class="slds-table slds-table_cell-buffer slds-table_bordered"
aria-labelledby="element-with-table-label other-element-with-table-label">
<thead>
<tr class="slds-line-height_reset">
<th class="" scope="col">
<div class="slds-truncate" title="Practice">Practice</div>
</th>
<th class="" scope="col">
<div class="slds-truncate" title="Product">Product</div>
</th>
<th class="" scope="col">
<div class="slds-truncate" title="Percentage">%</div>
</th>
<th class="" scope="col">
<div class="slds-truncate" title="Amount">$</div>
</th>
<th class="" scope="col">
<div class="slds-truncate" title="Support user">Support User</div>
</th>
</tr>
</thead>
<tbody>
<template for:each={listOfBookings} for:item="rec" for:index="index">
<tr class="slds-hint-parent" key={rec}>
<td>
<lightning-input type="text" variant="label-hidden" label="" data-id={rec.index} name="Percentage__c" value={rec.Percentage__c} onchange={handleInputChange}></lightning-input>
</td>
<td>
<lightning-input type="text" variant="label-hidden" label="" data-id={rec.index} name="Amount__c" value={rec.Amount__c} onchange={handleInputAmount}></lightning-input>
</td>
<td data-label="Support">
<c-custom-look-up obj-name="User" search-placeholder="Support"
icon-name="standard:user" index={index} onlookupselected={handleLookupSelectionUser}>
</c-custom-look-up>
</td>
</tr>
</template>
</tbody>
</table>
</br>
<lightning-layout>
<div class="slds-align_absolute-center">
<lightning-button variant="brand" onclick={createBookings} name="submit" label="Save">
</lightning-button>
</div>
</lightning-layout>
</lightning-card>
</template>
________________________
Controller-
import { LightningElement, track, api, wire } from 'lwc';
import { ShowToastEvent } from 'lightning/platformShowToastEvent';
import { getRecord, getFieldValue } from 'lightning/uiRecordApi';
import AMOUNT_FIELD from '@salesforce/schema/Opportunity.Amount';
import insertBookings from '@salesforce/apex/PracticeBookingController.insertBookings'
const fields = [AMOUNT_FIELD];
export default class CreatePracticeBooking extends LightningElement {
@track listOfBookings;
@api recordId;
@wire(getRecord, { recordId: '$recordId', fields })
opp;
get amount() {
return getFieldValue(this.opp.data, AMOUNT_FIELD);
}
connectedCallback() {
this.initData();
}
initData() {
let listOfBookings = [];
this.createRow(listOfBookings);
this.listOfBookings = listOfBookings;
}
handleInputChange(event) {
let index = event.target.dataset.id;
let fieldName = event.target.name;
let value = event.target.value;
for (let i = 0; i < this.listOfBookings.length; i++) {
if (this.listOfBookings[i].index === parseInt(index)) {
this.listOfBookings[i][fieldName] = value;
}
}
handleInputAmount(value);
}
handleInputAmount(val) {
let bookingAmount = amount * (val / 100);
console.log('bookingAmount', bookingAmount);
for (let i = 0; i < this.listOfBookings.length; i++) {
if (this.listOfBookings[i].index === parseInt(index)) {
this.listOfBookings[i][fieldName] = bookingAmount;
}
}
}
createBookings() {
insertBookings({
jsonOfListOfBookings: JSON.stringify(this.listOfBookings)
})
.then(data => {
this.initData();
let event = new ShowToastEvent({
message: "Practice Bookings successfully created!",
variant: "success",
duration: 2000
});
this.dispatchEvent(event);
})
.catch(error => {
console.log(error);
});
}
}
I want to get a text variable value in another function and perform some operation and populate the value in another input variable but I ma not able to do that.
Can anyone guide me with it ?
My LWC and Controller below:-
<template>
<lightning-card>
<div class="c-container">
<lightning-layout>
<lightning-layout-item padding="around-small">
<div class="header-column">
<lightning-button class = "slds-p-around_large" variant="brand" onclick={addNewRow} name="Add" label="Add">
</lightning-button>
</div>
</lightning-layout-item>
<lightning-layout-item padding="around-small">
<div class="header-column">
<p class="field-title" title="Opportunity Amount">Opportunity Amount</p>
<p><lightning-formatted-number
format-style="currency"
value={amount}
currency-code="USD">
</lightning-formatted-number></p>
</div>
</lightning-layout-item>
</lightning-layout>
</div>
<table class="slds-table slds-table_cell-buffer slds-table_bordered"
aria-labelledby="element-with-table-label other-element-with-table-label">
<thead>
<tr class="slds-line-height_reset">
<th class="" scope="col">
<div class="slds-truncate" title="Practice">Practice</div>
</th>
<th class="" scope="col">
<div class="slds-truncate" title="Product">Product</div>
</th>
<th class="" scope="col">
<div class="slds-truncate" title="Percentage">%</div>
</th>
<th class="" scope="col">
<div class="slds-truncate" title="Amount">$</div>
</th>
<th class="" scope="col">
<div class="slds-truncate" title="Support user">Support User</div>
</th>
</tr>
</thead>
<tbody>
<template for:each={listOfBookings} for:item="rec" for:index="index">
<tr class="slds-hint-parent" key={rec}>
<td>
<lightning-input type="text" variant="label-hidden" label="" data-id={rec.index} name="Percentage__c" value={rec.Percentage__c} onchange={handleInputChange}></lightning-input>
</td>
<td>
<lightning-input type="text" variant="label-hidden" label="" data-id={rec.index} name="Amount__c" value={rec.Amount__c} onchange={handleInputAmount}></lightning-input>
</td>
<td data-label="Support">
<c-custom-look-up obj-name="User" search-placeholder="Support"
icon-name="standard:user" index={index} onlookupselected={handleLookupSelectionUser}>
</c-custom-look-up>
</td>
</tr>
</template>
</tbody>
</table>
</br>
<lightning-layout>
<div class="slds-align_absolute-center">
<lightning-button variant="brand" onclick={createBookings} name="submit" label="Save">
</lightning-button>
</div>
</lightning-layout>
</lightning-card>
</template>
________________________
Controller-
import { LightningElement, track, api, wire } from 'lwc';
import { ShowToastEvent } from 'lightning/platformShowToastEvent';
import { getRecord, getFieldValue } from 'lightning/uiRecordApi';
import AMOUNT_FIELD from '@salesforce/schema/Opportunity.Amount';
import insertBookings from '@salesforce/apex/PracticeBookingController.insertBookings'
const fields = [AMOUNT_FIELD];
export default class CreatePracticeBooking extends LightningElement {
@track listOfBookings;
@api recordId;
@wire(getRecord, { recordId: '$recordId', fields })
opp;
get amount() {
return getFieldValue(this.opp.data, AMOUNT_FIELD);
}
connectedCallback() {
this.initData();
}
initData() {
let listOfBookings = [];
this.createRow(listOfBookings);
this.listOfBookings = listOfBookings;
}
handleInputChange(event) {
let index = event.target.dataset.id;
let fieldName = event.target.name;
let value = event.target.value;
for (let i = 0; i < this.listOfBookings.length; i++) {
if (this.listOfBookings[i].index === parseInt(index)) {
this.listOfBookings[i][fieldName] = value;
}
}
handleInputAmount(value);
}
handleInputAmount(val) {
let bookingAmount = amount * (val / 100);
console.log('bookingAmount', bookingAmount);
for (let i = 0; i < this.listOfBookings.length; i++) {
if (this.listOfBookings[i].index === parseInt(index)) {
this.listOfBookings[i][fieldName] = bookingAmount;
}
}
}
createBookings() {
insertBookings({
jsonOfListOfBookings: JSON.stringify(this.listOfBookings)
})
.then(data => {
this.initData();
let event = new ShowToastEvent({
message: "Practice Bookings successfully created!",
variant: "success",
duration: 2000
});
this.dispatchEvent(event);
})
.catch(error => {
console.log(error);
});
}
}