Monday 27 May 2019

Lightning Web Component : lightning-record-view-form


lightning-record-view-form component is a wrapper component that accepts a record ID and is used to display one or more fields and labels associated with that record using lightning-output-field.

lightning-record-view-form requires a record ID to display the fields on the record. It doesn't require additional Apex controllers or Lightning Data Service to display record data. This component also takes care of field-level security and sharing for you, so users see only the data they have access to.

Displaying Record Fields:
To display the fields on a record, specify the fields using lightning-output-field.


Attributes:
NAME ACCESS DESCRIPTION REQUIRED
record-id global The ID of the record to be displayed. Yes
object-api-name global Api name of object. Yes

Reference: Salesforce Developer Guide, Salesforce Component Library

Lightning Web Component: lightning-record-form


lightning-record-form component enables you 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 and lightning-record-view-form. However, lightning-record-form does not support client-side validation quite the same as lightning-record-edit-form.

The object-api-name attribute is always required, and record-id is required if you are editing a record.

NOTE: this component take cares of field-level security and sharing for you, so users will only see the data that they have access to.

Modes
This component accepts mode value that determines the user interaction determine for them. The values can be one of the following:

a. editCreates an editable form to add a record or update an existing one. When updating an existing record, specify the record-idEdit mode is the default when record-id is not provided, which displays a form to create new records.

b. viewCreates 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.

c. readonlyCreates a form to display a record without enabling edits.

Specifying Record Fields

For all modes component expect the fields attribute or layout-type attribute.
Use the fields attributes to pass record fields as an array of strings. The fields display in the order they pass.

Use the layout-type attribute to specify a Full or Compact layout.

Salesforce don't recommend using the fields with layout-type attribute as the display order of the fields can vary.To display an custom layout use lightning-record-edit-form or lightning-record-view-form. If fields and layout-type are provided, the fields you define in the fields property are displayed before the other fields from the given layout type.


Viewing a Record with Option to Edit Fields:
Use mode="view" and pass the ID of the record and the corresponding object API name to be displayed. Specify the fields using the fields attribute, or layout-type attribute to display all the fields defined on the Full or Compact layout. The view mode loads the form using output fields with inline editing enabled.

below example creates a form for an account record in a view mode.
Adding the component on page layout and save it.
Editing a Record:
To edit a record, pass the ID of the record and the corresponding object API name to be edited. When record-id is passed, edit mode loads the form with input fields displaying the specified record's field values. The form also displays Submit and Cancel buttons.
Add the component on page-layout and save it. 

Creating a Record:
Pass in the object API name for the record to be created. Specify the fields you want using the fieldsattribute, or use the Full layout to load fields.

The compact layout cannot be used for creating records. If you specify layout-type="Compact", the full layout is shown. If you specify the fields attribute, be sure to include any fields that are designated as required for the object's records.
Because no recordId is passed, form load in edit mode with Submit and Cancel buttons.
Add the component on page-layout and save it.


Display Form based on RecordTypes:
If your org uses record types, picklist fields display values according to your record types. You must provide a record type ID using the record-type-id attribute if you have multiple record types on an object and you don't have a default record type. Otherwise, the default record type ID is used.

Client Side Validation:
The lightning-record-form component performs client-side validation on record fields only if you interact with them. For example, if you edit a record that includes a required field and submit the form without interacting with that required field, you see only that an error occurred. The form does not flag the required field as incorrect.

To customize the behaviour of your form when it loads or when data is submitted, use the onload and onsubmit attributes to specify event handlers.


Attributes:
NAME ACCESS DESCRIPTION REQUIRED
record-type-id global The ID of the record type, which is required if you created multiple record
types but don't have a default.
No
mode global displays the form in view, edit and read-only mode. No
layout-type global Possible values: Compact, Full. No
record-id global The ID of the record to be displayed. No
object-api-name global The API name of the object. Yes
columns global Specifies the number of columns for the form. No
fields global List of fields to be displayed. The fields display in the order you list them. No



Reference: Salesforce Developer Guide, Salesforce Component Library