Work with Salesforce Data -- Base Component built on Lightning Data Service (LDS)

 

In this topic, we will cover how Lightning Data Service (LDS) are work with salesforce Data in LWC Component.

Discussion about

1. lightning-record-form with demonstration.
2. lightining-record-edit-form with demonstration.
3. lightning-record-view-form with demonstration.

The base component of Lightning Data Service are 

• lightning-record-edit-form—Displays an editable form.
• lightning-record-view-form—Displays a read-only form.
• lightning-record-form— Supports edit, view, and read-only modes.

lightning-record-form

Use the lightning-record-form component to quickly create forms to add, view, or update a record.
Using this component to create record forms is easier than building forms manually with lightning-record-edit-form or lightning-record-view-form.

features:

• Switches between view and edit modes automatically when the user begins editing a field in a view form
• Provides Cancel and Save buttons automatically in edit forms
• Uses the object’s default record layout with support for multiple columns
• Loads all fields in the object’s compact or full layout, or only the fields you specify

Modes:

1. view : Its a default mode when record-id provided, The record fields each have an edit button.
2. edit: Creates an editable form to add a record or update an existing one.
3. readonly: Creates a form to display a record without enabling edits.

Layout type:

1. Full: The full layout corresponds to the fields on the record detail page.

2. Compact: The compact layout corresponds to the fields on the highlights panel at the top of the record.

Create Record

Load Record

Edit Record

To edit record, change mode = ‘edit’ 

lightning-record-edit-form

Use the lightning-record-edit-form component to create a form that's used to add a Salesforce record or update fields in an existing record on an object.

If you want to apply customization on custom fields layout then you can use lightning-record-edit-form.

Features:

• Editing a record’s specified fields, given the record ID.
• Creating a record using specified fields.
• Customizing the form layout
• Custom rendering of record data

To specify editable fields, use lightning-input-field components inside lightning-record-edit-form component.

To display record fields as read-only in lightning-record-edit-form, use lightning-output-field components to specify those fields.

lightning-record-view-form

Use the lightning-record-view-form component to create a form that displays Salesforce record data for specified fields associated with that record. The fields are rendered with their labels and current values as read-only.

You can customize the form layout or provide custom rendering of record data. If you don’t require customizations, use lightning-record-form instead.

To specify read-only fields, use lightning-output-field components inside lightning-record-view-form. It requires a record ID to display the fields on the record.

Follow me on linkedIn and Twitter for such more related post