Home
getRecordUi wire adapter

getRecordUi wire adapter

By January 28, 2019 Lightning Web Components 0 Comments

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 

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-defaults wire adapter.
    • Edit—Use this mode if you intend to build UI that lets a user edit a record. This mode is used by the record-clone-defaults wire 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’s data property or error property. If a function is decorated with @wire, the results are returned in an object with a data property and an error property.

 

Create a lightning web component

create a lightning web component using this SFDX command

sfdx force:lightning:component:create --type lwc -n recorduiex -d force-app/main/default/lwc

Use this code in recorduiex.html

<template>
{objectInfoStr}
</template>

Use this code in recorduiex.js code

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

<?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

sfdx force:source:push

You can able to see the output as shown below which contains the information of the record metadata.

 

 

 

Tags:

Related Posts