LWC Components
lightning-record-form component allows you to quickly create forms to add, view, or update a
record.
lightning-record-form implements Lightning
Data Service and doesn’t require additional Apex controllers to
create or edit record data. It also takes care of field-level security and sharing for you,
so users see only the data that they have access to.
The object-api-name attribute is always
required, and the record-id is required only
when you’re editing
or viewing a record.
Modes
The component accepts a mode value that determines
the user interaction allowed for the form. The value for mode can be
one of the following:
- edit – Creates an
editable form to add a record or update an existing one. When updating an
existing record, specify the record-id. Edit mode is the default when
record-id is not provided, and displays a form to create new records.
- view – Creates a form to display a record that the user can also edit. The record fields each have an edit button. View mode is the default when record-id is provided.
- readonly – Creates a form to display a record without enabling edits. The form doesn’t display any buttons.
<template>
<lightning-card title=" Record Form ReadOnly" icon- name="standard:account">
<lightning-record-form record-id={recordId} object- api-name={objectApiName} field s={fields} columns="2" mode=" readonly" onsubmit={ handleSubmit}></lightning- record-form>
</lightning-card>
<!-- Record Edit-->
<lightning-card title=" Record Form Edit" icon-name=" standard:account">
<lightning-record-form record-id={recordId} object- api-name={objectApiName} field s={fields} columns="2" mode=" Edit" onsubmit={handleSubmit}> </lightning-record-form>
</lightning-card>
<!-- Record View-->
<lightning-card title=" Record Form View" icon-name=" standard:account">
<lightning-record-form record-id={recordId} object- api-name={objectApiName} field s={fields} columns="2" mode=" View" onsubmit={handleSubmit}> </lightning-record-form>
</lightning-card>
<!-- Edit form -->
<lightning-card title=" Edit Form" icon-name=" standard:account">
<lightning-record- edit-form object-api-name={ objectApiName}>
<lightning-input- field field-name="Name" requir ed></lightning-input-field>
<lightning-input- field field-name=" AnnualRevenue" required></ lightning-input-field>
<lightning-button type="submit" name="submit" la bel="Create Account" ></ lightning-button>
</lightning-record- edit-form>
</lightning-card>
<!-- View Form-->
<lightning-card title=" View Form" icon-name=" standard:account">
<lightning-record- view-form record-id={recordId} object-api-name={ objectApiName}>
<lightning-output- field field-name="Name"></ lightning-output-field>
<lightning-output- field field-name=" AnnualRevenue"></lightning- output-field>
</lightning-record- view-form>
</lightning-card>
</template>
JS
import { LightningElement,api } from 'lwc';
import Name_Field from '@ salesforce/schema/Account. Name';
import Revenue_Field from '@ salesforce/schema/Account. AnnualRevenue';
import { ShowToastEvent } from 'lightning/ platformShowToastEvent';
export default class RecordForm extends LightningElement {
fields=[Name_Field, Revenue_Field];
@api recordId;
@api objectApiName;
handleSubmit(event){
}
validateFields() {
this.template. querySelectorAll('lightning- input-field').forEach(element => {
element. reportValidity();
});
}
}
XML
<?xml version="1.0" encoding=" UTF-8"?>
<apiVersion>48.0</ apiVersion>
<isExposed>true</ isExposed>
<targets>
<target>lightning__ AppPage</target>
<target>lightning__ RecordPage</target>
<target>lightning__ HomePage</target>
</targets>
</LightningComponentBundle>
No comments:
Post a Comment