Context:
I'm fairly new to Salesforce development so I decided to make a pet project in which the client can create users by clicking 'Create Account' button near the empty users data table. Inside a modal window there are 2 input fields 'Name' and 'Type'. When the user enters the data they need to press the 'Save' button and the entered data should transfer inside the data table.
The problem is that I cannot properly understand how exactly should I transfer the text from these 2 input fields inside a separate LWC, the @api decorator doesn't seem to work, so I'm quite confused.
For the modal I'm using Lightning Modal.
modalPopup.js
// import { api } from 'lwc';
import LightningModal from 'lightning/modal';
export default class ModalPopup extends LightningModal {
accountName;
accountType;
handleClose() {
this.close();
}
}
modalPopup.html
<template>
<lightning-modal-header label="Create Account"></lightning-modal-header>
<lightning-modal-body>
<lightning-input onchange={handleChange} label="Name" value={accountName}></lightning-input>
<h1>Name: {accountName}</h1>
<lightning-input onchange={handleChange} label="Type" value={accountType}></lightning-input>
<h1>Type: {accountType}</h1>
</lightning-modal-body>
<lightning-modal-footer>
<lightning-button label="Save" onclick={handleSave}></lightning-button>
<lightning-button label="Cancel" onclick={handleClose}></lightning-button>
</lightning-modal-footer>
</template>
And here's how the accounts table looks like where I need to pass the data to
accountsTable.js
import { LightningElement, api } from 'lwc';
import ModalPopup from 'c/modalPopup';
import generateData from './generateData'
// import Type from '@salesforce/schema/Account.Type';
// Create the column names
const columns = [
{ label: 'Name', fieldName: 'name' },
{ label: 'Type', fieldName: 'type', type: 'text' },
{ label: 'Owner', fieldName: 'owner', type: 'text' },
{ label: 'Created Date', fieldName: 'createdDate', type: 'date' },
];
export default class AccountTable extends LightningElement {
@api accounts = []
connectedCallback() {
const accounts = generateData()
this.accounts = accounts
}
handleAccountData(event) {
const { name, type } = event.detail
this.accounts.push({Name: name, Type: type})
}
// Open a modal window
async handleClick() {
const result = await ModalPopup.open({
size: 'large',
description: 'Test Desc',
})
console.log(result)
}
columns = columns;
accounts = []
}
accountsTable.html
<template>
<div style="height: 300px;">
<lightning-datatable
key-field="id"
data={accounts}
columns={columns}>
</lightning-datatable>
</div>
<div>
<lightning-button label="Create Account" aria-haspopup="dialog" onclick={handleClick}></lightning-button>
</div>
<div>
Accounts Array: {accounts}
</div>
</template>
