function readOnly(count){ }
Starting November 20, the site will be set to read-only. On December 4, 2023,
forum discussions will move to the Trailblazer Community.
+ Start a Discussion
SFDC12SFDC12 

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.
mukesh guptamukesh gupta
Hi,
You can use Lightning Data Service(LDS)

Example:-
 
<lightning-record-form
    object-api-name="{objectApiName}"
    fields="{fields}"
    onsuccess="{handleSuccess}"
>
</lightning-record-form>
 
import { LightningElement, api } from 'lwc';
import { ShowToastEvent } from 'lightning/platformShowToastEvent';

import NAME_FIELD from '@salesforce/schema/Account.Name';
import REVENUE_FIELD from '@salesforce/schema/Account.AnnualRevenue';
import INDUSTRY_FIELD from '@salesforce/schema/Account.Industry';

export default class RecordFormCreateExample extends LightningElement {
    // objectApiName is "Account" when this component is placed on an account record page
    @api objectApiName;

    fields = [NAME_FIELD, REVENUE_FIELD, INDUSTRY_FIELD];

    handleSuccess(event) {
        const evt = new ShowToastEvent({
            title: 'Account created',
            message: 'Record ID: ' + event.detail.id,
            variant: 'success',
        });
        this.dispatchEvent(evt);
    }
}

 

if you need any assistanse, Please let me know!!

Kindly mark my solution as the best answer if it helps you.

Thanks
Mukesh 

SFDC12SFDC12
Thanks for your response @mukesh but when i click on button it should open like record form ,i dont want the textboxes.