You need to sign in to do that
Don't have an account?
SFDC12
lwc help2
Hi every am able to open a custom model form when click on a button when click on save it should save in the particular object ,please help.
html:
<template>
<lightning-card title="Display a Custom Popup/Modal In Salesforce Lightning Web Component -- LWC" icon-name="custom:custom20">
<!-- lightning button for open custom modal window -->
<lightning-button variant="brand"
label="Open Custom Modal Popup in LWC"
title="Open Modal"
onclick={customShowModalPopup}
class="slds-m-left_x-small"></lightning-button>
<!-- modal start -->
<template if:true={customFormModal}>
<section role="dialog" tabindex="-1" aria-labelledby="modal-heading-01" aria-modal="true" aria-describedby="modal-content-id-1" class="slds-modal slds-fade-in-open">
<div class="slds-modal__container">
<!-- modal header start -->
<header class="slds-modal__header">
<button class="slds-button slds-button_icon slds-modal__close slds-button_icon-inverse" title="Close" onclick={customHideModalPopup}>
<lightning-icon icon-name="utility:close"
alternative-text="close"
variant="inverse"
size="small" ></lightning-icon>
<span class="slds-assistive-text">Close</span>
</button>
<h2 class="slds-text-heading_medium slds-hyphenate">Custom Modal Popup in LWC</h2>
</header>
<!-- modal body start -->
<div class="slds-modal__content slds-p-around_medium">
<div class="slds-grid slds-wrap">
<div class="slds-col slds-size_6-of-12 slds-p-horizontal--medium slds-m-bottom_medium">
<lightning-input label="Name"></lightning-input>
</div>
<div class="slds-col slds-size_6-of-12 slds-p-horizontal--medium slds-m-bottom_medium">
<lightning-input label="Phone" ></lightning-input>
</div>
<div class="slds-col slds-size_6-of-12 slds-p-horizontal--medium slds-m-bottom_medium">
<lightning-input label="Email"></lightning-input>
</div>
<div class="slds-col slds-size_6-of-12 slds-p-horizontal--medium slds-m-bottom_medium">
<lightning-input label="Designation"></lightning-input>
</div>
</div>
<!-- modal footer start-->
<footer class="slds-modal__footer">
<button class="slds-button slds-button--destructive" onclick={customHideModalPopup}>Cancel</button>
<button class="slds-button slds-button_brand">Save</button>
</footer>
</div>
</div>
</section>
<div class="slds-backdrop slds-backdrop_open">
</div>
</template>
<!-- modal end -->
<br/> <br/>
</lightning-card>
</template>
js:
import { LightningElement, api,track } from 'lwc';
export default class LightningRecordFormEditExampleLWC extends LightningElement {
@track customFormModal = false;
customShowModalPopup() {
this.customFormModal = true;
}
customHideModalPopup() {
this.customFormModal = false;
}
}
thanks in Advance.
html:
<template>
<lightning-card title="Display a Custom Popup/Modal In Salesforce Lightning Web Component -- LWC" icon-name="custom:custom20">
<!-- lightning button for open custom modal window -->
<lightning-button variant="brand"
label="Open Custom Modal Popup in LWC"
title="Open Modal"
onclick={customShowModalPopup}
class="slds-m-left_x-small"></lightning-button>
<!-- modal start -->
<template if:true={customFormModal}>
<section role="dialog" tabindex="-1" aria-labelledby="modal-heading-01" aria-modal="true" aria-describedby="modal-content-id-1" class="slds-modal slds-fade-in-open">
<div class="slds-modal__container">
<!-- modal header start -->
<header class="slds-modal__header">
<button class="slds-button slds-button_icon slds-modal__close slds-button_icon-inverse" title="Close" onclick={customHideModalPopup}>
<lightning-icon icon-name="utility:close"
alternative-text="close"
variant="inverse"
size="small" ></lightning-icon>
<span class="slds-assistive-text">Close</span>
</button>
<h2 class="slds-text-heading_medium slds-hyphenate">Custom Modal Popup in LWC</h2>
</header>
<!-- modal body start -->
<div class="slds-modal__content slds-p-around_medium">
<div class="slds-grid slds-wrap">
<div class="slds-col slds-size_6-of-12 slds-p-horizontal--medium slds-m-bottom_medium">
<lightning-input label="Name"></lightning-input>
</div>
<div class="slds-col slds-size_6-of-12 slds-p-horizontal--medium slds-m-bottom_medium">
<lightning-input label="Phone" ></lightning-input>
</div>
<div class="slds-col slds-size_6-of-12 slds-p-horizontal--medium slds-m-bottom_medium">
<lightning-input label="Email"></lightning-input>
</div>
<div class="slds-col slds-size_6-of-12 slds-p-horizontal--medium slds-m-bottom_medium">
<lightning-input label="Designation"></lightning-input>
</div>
</div>
<!-- modal footer start-->
<footer class="slds-modal__footer">
<button class="slds-button slds-button--destructive" onclick={customHideModalPopup}>Cancel</button>
<button class="slds-button slds-button_brand">Save</button>
</footer>
</div>
</div>
</section>
<div class="slds-backdrop slds-backdrop_open">
</div>
</template>
<!-- modal end -->
<br/> <br/>
</lightning-card>
</template>
js:
import { LightningElement, api,track } from 'lwc';
export default class LightningRecordFormEditExampleLWC extends LightningElement {
@track customFormModal = false;
customShowModalPopup() {
this.customFormModal = true;
}
customHideModalPopup() {
this.customFormModal = false;
}
}
thanks in Advance.
You can use Lightning Data Service(LDS)
Example:-
if you need any assistanse, Please let me know!!
Kindly mark my solution as the best answer if it helps you.
Thanks
Mukesh