To create a button in a Lightning Web Component (LWC) that opens a modal window with columns A, B, C, D
<template>
<!-- Button to open modal -->
<lightning-button label="Open Modal" onclick={openModal}></lightning-button>
<!-- Modal Window -->
<template if:true={isModalOpen}>
<section role="dialog" tabindex="-1" class="slds-modal slds-fade-in-open">
<div class="slds-modal__container">
<!-- Modal/Popup Header -->
<header class="slds-modal__header">
<button class="slds-button slds-button_icon slds-modal__close slds-button_icon-inverse"
title="Close" onclick={closeModal}>
<lightning-icon icon-name="utility:close" alternative-text="close" size="small"></lightning-icon>
<span class="slds-assistive-text">Close</span>
</button>
<h2 class="slds-text-heading_medium">Enter Data</h2>
</header>
<!-- Modal/Popup Body -->
<div class="slds-modal__content slds-p-around_medium">
<div class="slds-grid slds-gutters">
<!-- Column A -->
<div class="slds-col">
<lightning-input label="Column A" value={columnA} onchange={handleInputChange} data-id="A"></lightning-input>
</div>
<!-- Column B -->
<div class="slds-col">
<lightning-input label="Column B" value={columnB} onchange={handleInputChange} data-id="B"></lightning-input>
</div>
<!-- Column C -->
<div class="slds-col">
<lightning-input label="Column C" value={columnC} onchange={handleInputChange} data-id="C"></lightning-input>
</div>
<!-- Column D -->
<div class="slds-col">
<lightning-input label="Column D" value={columnD} onchange={handleInputChange} data-id="D"></lightning-input>
</div>
</div>
</div>
<!-- Modal/Popup Footer -->
<footer class="slds-modal__footer">
<lightning-button variant="neutral" label="Cancel" onclick={closeModal}></lightning-button>
<lightning-button variant="brand" label="Save" onclick={handleSave}></lightning-button>
</footer>
</div>
</section>
<div class="slds-backdrop slds-backdrop_open"></div>
</template>
</template>
<script>
import { LightningElement, track } from 'lwc';
export default class ModalComponent extends LightningElement {
@track isModalOpen = false; // Track modal open/close state
@track columnA = ''; // Track column A input
@track columnB = ''; // Track column B input
@track columnC = ''; // Track column C input
@track columnD = ''; // Track column D input
// Function to open modal
openModal() {
this.isModalOpen = true;
}
// Function to close modal
closeModal() {
this.isModalOpen = false;
}
// Function to handle input change
handleInputChange(event) {
const field = event.target.dataset.id;
if (field === 'A') {
this.columnA = event.target.value;
} else if (field === 'B') {
this.columnB = event.target.value;
} else if (field === 'C') {
this.columnC = event.target.value;
} else if (field === 'D') {
this.columnD = event.target.value;
}
}
// Function to handle save button click
handleSave() {
// Perform your save logic here, e.g., call Apex or store the data
console.log('Column A:', this.columnA);
console.log('Column B:', this.columnB);
console.log('Column C:', this.columnC);
console.log('Column D:', this.columnD);
// After saving, close the modal
this.closeModal();
}
}
</script>
<style>
.slds-modal__container {
width: 40rem; /* Adjust the width of the modal */
}
</style>
To create a button in a Lightning Web Component (LWC) that opens a modal window with columns A, B, C, D
Reviewed by dasfrogpractice
on
10:27
Rating:
No comments: