getRecordUi wire adapter
Let us discuss here how to use lightning/uiRecordApi module adapters. This module includes wire adapters to record data and get default values to create records. It also includes JavaScript APIs to create, delete, update, and refresh records. Let us discuss here how to use the getRecordUi wire adapter. Use this wire adapter to get layout information, metadata, and data to build UI for one or more records.
Syntax
|
1 2 3 4 5 6 7 8 9 10 |
import { LightningElement, wire } from 'lwc'; import { getRecordUi } from 'lightning/uiRecordApi'; export default class Example extends LightningElement { @wire(getRecordUi, { recordIds: '001456789012345678', layoutTypes: 'Full', modes: 'View' }) propertyOrFunction; @wire(getRecordUi, { recordIds: ['001456789012345678', '001456789087654321'], layoutTypes: ['Full'], modes: ['View'] }) propertyOrFunction; } |
recordIds— (Required) IDs of records to load. A string or an array of strings. All record IDs must be from a supported object.layoutTypes—(Required) Layout types for the record. A string or array of strings. Each string contains one of these values:Compact—Use this value to get a layout that contains a record’s key fields.Full—Use this value to get a full layout.
modes—(Required) The access mode for the record. This value determines which fields to get from a layout. Layouts have different fields for create, edit, and view modes. For example, formula fields are rendered in view mode, but not in create mode because they’re calculated at run time, like formulas in a spreadsheet. A string or array of strings. Each string contains one of these values::Create—Use this mode if you intend to build UI that lets a user create a record. This mode is used by therecord-create-defaultswire adapter.Edit—Use this mode if you intend to build UI that lets a user edit a record. This mode is used by therecord-clone-defaultswire adapter.View—Use this mode if you intend to build UI that displays a record.
optionalFields—(Optional) An array of optional field names. If a field is accessible to the context user, it’s included in the response. If a field isn’t accessible to the context user, it isn’t included in the response, but it doesn’t cause an error.propertyOrFunction—A private property or function that receives the stream of data from the wire service. If a property is decorated with@wire, the results are returned to the property’sdataproperty orerrorproperty. If a function is decorated with@wire, the results are returned in an object with adataproperty and anerrorproperty.
Create a lightning web component
create a lightning web component using this SFDX command
|
1 |
sfdx force:lightning:component:create --type lwc -n recorduiex -d force-app/main/default/lwc |
Use this code in recorduiex.html
|
1 2 3 |
<template> {objectInfoStr} </template> |
Use this code in recorduiex.js code
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 |
import { LightningElement, api, track, wire } from 'lwc'; import { ShowToastEvent } from 'lightning/platformShowToastEvent'; import { getRecord } from 'lightning/uiRecordApi'; import { getRecordUi } from 'lightning/uiRecordApi'; export default class Recorduiex extends LightningElement { @api recordId; @track objectInfo; @wire(getRecordUi, { recordIds: '$recordId', layoutTypes: 'Full', modes: 'View' }) objectInfo; get objectInfoStr() { return this.objectInfo ? JSON.stringify(this.objectInfo.data, null, 2): ''; } } |
Use this recorduiex.js-meta.xml
|
1 2 3 4 5 6 7 8 |
<?xml version="1.0" encoding="UTF-8"?> <LightningComponentBundle xmlns="http://soap.sforce.com/2006/04/metadata" fqn="helloWorld"> <apiVersion>45.0</apiVersion> <isExposed>true</isExposed> <targets> <target>lightning__RecordPage</target> </targets> </LightningComponentBundle> |
Push changes to scratch org
Push changes to scratch using this command and add this component to record page using lighting app builder
|
1 |
sfdx force:source:push |
You can able to see the output as shown below which contains the information of the record metadata.
