Tag: Wire Adapter

Usage Of getPicklistValues wire adapter

By Raj Vakati January 28, 2019 Lightning Web Components 0 Comments

Let us discuss here how to use the getPicklistValues wire adapter to get the picklist values for a specific field. Here is the sample code that explains how to use the getPicklistValues values.

Syntax

import { LightningElement, wire } from 'lwc';
import { getPicklistValues } from 'lightning/uiObjectInfoApi';
import INDUSTRY_FIELD from '@salesforce/schema/Account.Industry';

export default class Example extends LightningElement {
    @wire(getPicklistValues, { recordTypeId: '012000000000000AAA', fieldApiName: INDUSTRY_FIELD })
    propertyOrFunction;
}

import { LightningElement, wire } from 'lwc';

import { getPicklistValues } from 'lightning/uiObjectInfoApi';

import INDUSTRY_FIELD from '@salesforce/schema/Account.Industry';

export default class Example extends LightningElement {

@wire(getPicklistValues, { recordTypeId: '012000000000000AAA', fieldApiName: INDUSTRY_FIELD })

propertyOrFunction;

}

recordTypeId—(Required) The ID of the record type. Use the Object Info defaultRecordTypeId property, which is returned from getObjectInfo or getRecordUi.
fieldApiName—(Required) The API name of the picklist field on a supported object.
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 Lightning web component

create a lightning web component using the following SFDX command. In this component, we will be showing the picklist values as a checkbox and as a dropdown using select

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

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

here is the picklistvalues.html code

<template>
    <lightning-card title="Pick List Values as Checkbox" icon-name="custom:custom57">
        <template if:true={picklistValues.data}>
            <div class="slds-m-around_medium">
                <template for:each={picklistValues.data.values} for:item="item">
                    <lightning-input key={item.value} label={item.label} data-value={item.value} type="checkbox"></lightning-input>
                </template>
            </div>
        </template>
    </lightning-card>
    <lightning-card title="Select List " icon-name="custom:custom19">
        <template if:true={picklistValues.data}>
            <div class="slds-m-around_medium">

                <select>
                    <template for:each={picklistValues.data.values} for:item="item">
                        <option key={item.value}>{item.label}</option>
                    </template>
                </select>
            </div>
        </template>
    </lightning-card>
</template>

<lightning-card title="Pick List Values as Checkbox" icon-name="custom:custom57">

<lightning-input key={item.value} label={item.label} data-value={item.value} type="checkbox"></lightning-input>

</template>

</div>

</template>

</lightning-card>

<lightning-card title="Select List " icon-name="custom:custom19">

<option key={item.value}>{item.label}</option>

</template>

</select>

</div>

</template>

</lightning-card>

</template>

here is the picklistvalues.js code

import {
    LightningElement,
    wire
} from 'lwc';
import {
    getPicklistValues
} from 'lightning/uiObjectInfoApi';
import TYPE_FIELD from '@salesforce/schema/Account.Type';


export default class Picklistvalues extends LightningElement {
    @wire(getPicklistValues, {
        recordTypeId: '012000000000000AAA',
        fieldApiName: TYPE_FIELD,
    })
    picklistValues;
}

import {

LightningElement,

wire

} from 'lwc';

import {

getPicklistValues

} from 'lightning/uiObjectInfoApi';

import TYPE_FIELD from '@salesforce/schema/Account.Type';

export default class Picklistvalues extends LightningElement {

@wire(getPicklistValues, {

recordTypeId: '012000000000000AAA',

fieldApiName: TYPE_FIELD,

})

picklistValues;

}

here is the picklistvalues.js-meta.xml code

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

<?xml version="1.0" encoding="UTF-8"?>

<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

And you can able to see the output as shown below.

Understand the Code

The following code will return the picklist values as a JavaScript object.

 @wire(getPicklistValues, {
        recordTypeId: '012000000000000AAA',
        fieldApiName: TYPE_FIELD,
    })
    picklistValues;

@wire(getPicklistValues, {

recordTypeId: '012000000000000AAA',

fieldApiName: TYPE_FIELD,

})

picklistValues;

The following code will show the picklist values as an input checkboxes

<template if:true={picklistValues.data}>
            <div class="slds-m-around_medium">
                <template for:each={picklistValues.data.values} for:item="item">
                    <lightning-input key={item.value} label={item.label} data-value={item.value} type="checkbox"></lightning-input>
                </template>
            </div>
        </template>

<lightning-input key={item.value} label={item.label} data-value={item.value} type="checkbox"></lightning-input>

</template>

</div>

</template>

The following code will show the values as a select list

 <select>
                    <template for:each={picklistValues.data.values} for:item="item">
                        <option key={item.value}>{item.label}</option>
                    </template>
                </select>

<option key={item.value}>{item.label}</option>

</template>

</select>

getObjectInfo Wire Adapter

By Raj Vakati January 28, 2019 Lightning Web Components 0 Comments

Let us discuss here how to use this wire adapter getObjectInfo wire adaptor to get metadata about a specific object. The response includes metadata describing fields, child relationships, record type, and theme. Here is the sample Syntax on how to invoke the getObjectInfo wire adapter.

Syntax

import { LightningElement, wire } from 'lwc';
import { getObjectInfo } from 'lightning/uiObjectInfoApi';
import ACCOUNT_OBJECT from '@salesforce/schema/Account';

export default class Example extends LightningElement {
    @wire(getObjectInfo, { objectApiName: ACCOUNT_OBJECT })
    propertyOrFunction;
}

import { LightningElement, wire } from 'lwc';

import { getObjectInfo } from 'lightning/uiObjectInfoApi';

import ACCOUNT_OBJECT from '@salesforce/schema/Account';

export default class Example extends LightningElement {

@wire(getObjectInfo, { objectApiName: ACCOUNT_OBJECT })

propertyOrFunction;

}

objectApiName—(Required) A supported object.
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 Lightning web component

create a lightning web component using the following SFDX command.

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

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

Use this ObjectInfo.html markup code

<template>
    <lightning-card title="Wire Get Object Info" icon-name="custom:custom67">
    <div class="slds-m-horizontal_medium">
        <template if:true={objectInfo.data}>
                <div class="scroller">
                    <pre>{objectInfoStr}</pre>
                </div>
            </template>
        </div>
        <template if:true={objectInfo.error}>
            Error .Please COntact your Admin .
        </template>
    </lightning-card>
</template>

<lightning-card title="Wire Get Object Info" icon-name="custom:custom67">

<pre>{objectInfoStr}</pre>

</div>

</template>

</div>

Error .Please COntact your Admin .

</template>

</lightning-card>

</template>

Use this ObjectInfo.js code

import {
    LightningElement,
    api,
    track,
    wire
} from 'lwc';
import {
    getObjectInfo
} from 'lightning/uiObjectInfoApi';
import ACCOUNT_OBJECT from '@salesforce/schema/Account';

export default class ObjectInfo extends LightningElement {
    @api objectApiName;
    @track objectInfo;

    @wire(getObjectInfo, {
        objectApiName: '$objectApiName'
    })
    objectInfo;
    get objectInfoStr() {
        return this.objectInfo ?
            JSON.stringify(this.objectInfo.data, null, 2) :
            '';
    }
}

import {

LightningElement,

api,

track,

wire

} from 'lwc';

import {

getObjectInfo

} from 'lightning/uiObjectInfoApi';

import ACCOUNT_OBJECT from '@salesforce/schema/Account';

export default class ObjectInfo extends LightningElement {

@api objectApiName;

@track objectInfo;

@wire(getObjectInfo, {

objectApiName: '$objectApiName'

})

objectInfo;

get objectInfoStr() {

return this.objectInfo ?

JSON.stringify(this.objectInfo.data, null, 2) :

'';

}

Use this ObjectInfo.js-meta.xml code

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

<?xml version="1.0" encoding="UTF-8"?>

<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

After adding the lightning web component to record page using the app builder. you can able to see the output as shown below

Understand the code

The following code returns the sobject data using the getObjectInfo wired adapter

 @api objectApiName;
    @track objectInfo;

    @wire(getObjectInfo, {
        objectApiName: '$objectApiName'
    })
    objectInfo;

@api objectApiName;

@track objectInfo;

@wire(getObjectInfo, {

objectApiName: '$objectApiName'

})

objectInfo;

The following markup will show the json data into UI

 <template if:true={objectInfo.data}>
                <div class="scroller">
                    <pre>{objectInfoStr}</pre>
                </div>
            </template>

<pre>{objectInfoStr}</pre>

</div>

</template>

getRecordUi wire adapter

By Raj Vakati 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;
}

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

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

Use this code in recorduiex.html

<template>
{objectInfoStr}
</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):
            '';
    }
}

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>

<?xml version="1.0" encoding="UTF-8"?>

<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

1	sfdx force:source:push

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

Usage Of getListUi Wire adapter

By Raj Vakati January 28, 2019 Lightning Web Components 0 Comments

Let’s discuss here how to use the lightning/uiListApi Adapter to get the list view details. In Salesforce, we do have a different way to get the listview data using apex, soap API, rest API ext .. but in lightning, web component its makes more easy to access the Listview data using the getListUi wired adaptor. Wire adapters and JavaScript functions in these modules are built on top of Lightning Data Service (LDS) and User Interface API. Use these wire adapters and functions to work with Salesforce data and metadata.

getListUi

Get the records and metadata for a list view. Use this wire adapter to get the records and metadata for a list view. The following example gets the list view records and metadata for a list view by API name.

    @wire(getListUi, { objectApiName: ACCOUNT_OBJECT, listViewApiName: 'AllAccounts' })

1	@wire(getListUi, { objectApiName: ACCOUNT_OBJECT, listViewApiName: 'AllAccounts' })

objectApiName—(Required) The API name of a supported object.
listViewApiName—(Required) The API name of a list view, such as AllAccounts.
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.

The flowing example will get the list view records and metadata for a list view by ID

import { LightningElement, wire } from 'lwc';
import { getListUi } from 'lightning/uiListApi';
export default class Example extends LightningElement {
    @wire(getListUi, { listViewId: '00BT0000001TONQMA4'})
    propertyOrFunction;
}

import { LightningElement, wire } from 'lwc';

import { getListUi } from 'lightning/uiListApi';

export default class Example extends LightningElement {

@wire(getListUi, { listViewId: '00BT0000001TONQMA4'})

propertyOrFunction;

}

The Following example Get list view records and metadata for an MRU list view by object

import { LightningElement, wire } from 'lwc';
import { getListUi, MRU } from 'lightning/uiListApi';
import ACCOUNT_OBJECT from '@salesforce/schema/Account';

export default class Example extends LightningElement {
    @wire(getListUi, { objectApiName: ACCOUNT_OBJECT, listViewApiName: MRU })
    propertyOrFunction;
}

import { LightningElement, wire } from 'lwc';

import { getListUi, MRU } from 'lightning/uiListApi';

import ACCOUNT_OBJECT from '@salesforce/schema/Account';

export default class Example extends LightningElement {

@wire(getListUi, { objectApiName: ACCOUNT_OBJECT, listViewApiName: MRU })

propertyOrFunction;

}

The Following example Get list views for an object

import { LightningElement, wire } from 'lwc';
import { getListUi } from 'lightning/uiListApi';
import ACCOUNT_OBJECT from '@salesforce/schema/Account';

export default class Example extends LightningElement {
    @wire(getListUi, { objectApiName: ACCOUNT_OBJECT })
    propertyOrFunction;
}

import { LightningElement, wire } from 'lwc';

import { getListUi } from 'lightning/uiListApi';

import ACCOUNT_OBJECT from '@salesforce/schema/Account';

export default class Example extends LightningElement {

@wire(getListUi, { objectApiName: ACCOUNT_OBJECT })

propertyOrFunction;

}

Create Lightning web Component

create a lightning web component using the following SFDX command

sfdx force:lightning:component:create --type lwc --ListUI --outputdir force-app\main\default\lwc

1	sfdx force:lightning:component:create --type lwc --ListUI --outputdir force-app\main\default\lwc

Use the below ListUI.html markup code

<template>
    <lightning-card title=" List View Example" icon-name="standard:action_list_component">

        <table class="slds-table slds-table_cell-buffer slds-table_bordered">
            <thead>
                <tr class="slds-line-height_reset">
                    <th class="" scope="col">
                        <div class="slds-truncate" title="Id">Account Id</div>
                    </th>
                    <th class="" scope="col">
                        <div class="slds-truncate" title="Account Name">Account Name</div>
                    </th>
                    <th class="" scope="col">
                        <div class="slds-truncate" title="Type">Type</div>
                    </th>
                    <th class="" scope="col">
                        <div class="slds-truncate" title="Phone">Phone</div>
                    </th>
                </tr>
            </thead>
            <tbody>
                <template if:true={sobjectResult}>
                    <template for:each={sobjectResult} for:item="so">
                        <tr class="slds-hint-parent" key={so.id}>
                            <td data-label="id">{so.id}</td>
                            <td data-label="Name"> {so.fields.Name.value}</td>
                            <td data-label="Type"> {so.fields.Type.value}</td>
                            <td data-label="Phone"> {so.fields.Phone.value}</td>
                        </tr>
                    </template>
                </template>
                <template if:false={sobjectResult}>
                    List View is not contains any data
                </template>
            </tbody>
        </table>
    </lightning-card>
</template>

<lightning-card title=" List View Example" icon-name="standard:action_list_component">

<thead>

<div class="slds-truncate" title="Id">Account Id</div>

</th>

<div class="slds-truncate" title="Account Name">Account Name</div>

</th>

</th>

<div class="slds-truncate" title="Phone">Phone</div>

</th>

</tr>

</thead>

<tbody>

<td data-label="Name"> {so.fields.Name.value}</td>

<td data-label="Type"> {so.fields.Type.value}</td>

<td data-label="Phone"> {so.fields.Phone.value}</td>

</tr>

</template>

List View is not contains any data

</template>

</tbody>

</table>

</lightning-card>

</template>

Use the below ListUI.js code

import {
    LightningElement,
    wire,
    track
} from 'lwc';
import {
    getListUi
} from 'lightning/uiListApi';
import ACCOUNT_OBJECT from '@salesforce/schema/Account';

export default class ListUI extends LightningElement {
    @track sobjectResult;
    @wire(getListUi, {
        objectApiName: ACCOUNT_OBJECT,
        listViewApiName: 'All'
    })
    wiredlistView({
        error,
        data
    }) {
        if (data) {
            this.sobjectResult = data.records.records;
        } else if (error) {
            this.error = error;
        }
    }

   
}

import {

LightningElement,

wire,

track

} from 'lwc';

import {

getListUi

} from 'lightning/uiListApi';

import ACCOUNT_OBJECT from '@salesforce/schema/Account';

export default class ListUI extends LightningElement {

@track sobjectResult;

@wire(getListUi, {

objectApiName: ACCOUNT_OBJECT,

listViewApiName: 'All'

})

wiredlistView({

error,

data

}) {

if (data) {

this.sobjectResult = data.records.records;

} else if (error) {

this.error = error;

}

use this ListUI.js-meta.xml mark up for configuration

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

<?xml version="1.0" encoding="UTF-8"?>

<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

Understand the code

The Following code is used to get the list view data using the wired adaptor in JavaScript controller

 @wire(getListUi, {
        objectApiName: ACCOUNT_OBJECT,
        listViewApiName: 'All'
    })
    wiredlistView({
        error,
        data
    }) {
        if (data) {
            this.sobjectResult = data.records.records;
        } else if (error) {
            this.error = error;
        }
    }

@wire(getListUi, {

objectApiName: ACCOUNT_OBJECT,

listViewApiName: 'All'

})

wiredlistView({

error,

data

}) {

if (data) {

this.sobjectResult = data.records.records;

} else if (error) {

this.error = error;

}

You will be able to iterate the return result using the below template directives.

<template if:true={sobjectResult}>
                    <template for:each={sobjectResult} for:item="so">
                        <tr class="slds-hint-parent" key={so.id}>
                            <td data-label="id">{so.id}</td>
                            <td data-label="Name"> {so.fields.Name.value}</td>
                            <td data-label="Type"> {so.fields.Type.value}</td>
                            <td data-label="Phone"> {so.fields.Phone.value}</td>
                        </tr>
                    </template>

<td data-label="Name"> {so.fields.Name.value}</td>

<td data-label="Type"> {so.fields.Type.value}</td>

<td data-label="Phone"> {so.fields.Phone.value}</td>

</tr>

</template>

Usage Of getRecord wire adapter

By Raj Vakati January 28, 2019 Lightning Web Components 0 Comments

Let us discuss here how to use lightning/uiRecordApi module adaptors. 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’s discuss here how to use the getRecord wire adapter to get the Salesforce data without writing the apex class.

Syntax :

import { LightningElement, wire } from 'lwc';
import { getRecord } from 'lightning/uiRecordApi';
import NAME_FIELD from '@salesforce/schema/Account.Name';

export default class Example extends LightningElement {
    @wire(getRecord, { recordId: '001456789012345678', fields: [NAME_FIELD] })
    propertyOrFunction;
}

import { LightningElement, wire } from 'lwc';

import { getRecord } from 'lightning/uiRecordApi';

import NAME_FIELD from '@salesforce/schema/Account.Name';

export default class Example extends LightningElement {

@wire(getRecord, { recordId: '001456789012345678', fields: [NAME_FIELD] })

propertyOrFunction;

}

recordId—(Required) The ID of a record from a supported object.
fields—(Required) An array of fields to return. If the context user doesn’t have access to a field, an error is returned. If you’re not sure whether the context user has access to a field and you don’t want the request to fail if they don’t, use the optionalFields parameter.
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. For both the fields and optionalFields parameters, specify field names in the format ObjectApiName.FieldName or ObjectApiName.JunctionIdListName.

Error Handling

Use a Promise with then() and catch() blocks. You can display errors using toasts provided by the lightning/platformShowToastEvent module.

import { LightningElement, api, track, wire } from 'lwc';
import { ShowToastEvent } from 'lightning/platformShowToastEvent';
import { getRecord } from 'lightning/uiRecordApi';

const FIELDS = ['Contact.Name', 'Contact.Phone'];

export default class LoadContact extends LightningElement {
    @api recordId;
    @track contact;
    @track name;
    @track phone;
    @wire(getRecord, { recordId: '$recordId', FIELDS })
    wiredRecord({ error, data }) {
        if (error) {
            this.dispatchEvent(
                new ShowToastEvent({
                    title: 'Error loading contact',
                    message: error.message,
                    variant: 'error',
                }),
            );
        } else if (data) {
            this.contact = data;
            this.name = this.contact.fields.Name.value;
            this.phone = this.contact.fields.Phone.value;
        }
    }
}

import { LightningElement, api, track, wire } from 'lwc';

import { ShowToastEvent } from 'lightning/platformShowToastEvent';

import { getRecord } from 'lightning/uiRecordApi';

const FIELDS = ['Contact.Name', 'Contact.Phone'];

export default class LoadContact extends LightningElement {

@api recordId;

@track contact;

@track name;

@track phone;

@wire(getRecord, { recordId: '$recordId', FIELDS })

wiredRecord({ error, data }) {

if (error) {

this.dispatchEvent(

new ShowToastEvent({

title: 'Error loading contact',

message: error.message,

variant: 'error',

}),

);

} else if (data) {

this.contact = data;

this.name = this.contact.fields.Name.value;

this.phone = this.contact.fields.Phone.value;

}

Create a lightning web component

create a Lightning web Component using this SFDX command

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

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

Use this code in recordex.html

<template>
    <template if:true={contact.data}>

        <div class="slds-m-around_medium">
            <p>{name}</p>
            <p>{title}</p>
            <p>
                <lightning-formatted-phone value={phone}></lightning-formatted-phone>
            </p>
            <p>
                <lightning-formatted-email value={email}></lightning-formatted-email>
            </p>
        </div>
    </template>
</template>

<p>{title}</p>

<p>

<lightning-formatted-phone value={phone}></lightning-formatted-phone>

</p>

<p>

<lightning-formatted-email value={email}></lightning-formatted-email>

</p>

</div>

</template>

use this code in recordex.js controller which will get the data from the Salesforce contact record and show on the UI.

import {
    LightningElement,
    api,track,
    wire
} from 'lwc';
import {
    getRecord
} from 'lightning/uiRecordApi';

const fields = [
    'Contact.Name',
    'Contact.Title',
    'Contact.Phone',
    'Contact.Email',
];

export default class Recordex extends LightningElement {
    @api recordId;
@track contact;
    @wire(getRecord, {
        recordId: '$recordId',
        fields
    })
    contact;

    get name() {
        return this.contact.data.fields.Name.value;
    }

    get title() {
        return this.contact.data.fields.Title.value;
    }

    get phone() {
        return this.contact.data.fields.Phone.value;
    }

    get email() {
        return this.contact.data.fields.Email.value;
    }
}

import {

LightningElement,

api,track,

wire

} from 'lwc';

import {

getRecord

} from 'lightning/uiRecordApi';

const fields = [

'Contact.Name',

'Contact.Title',

'Contact.Phone',

'Contact.Email',

];

export default class Recordex extends LightningElement {

@api recordId;

@track contact;

@wire(getRecord, {

recordId: '$recordId',

fields

})

contact;

get name() {

return this.contact.data.fields.Name.value;

}

get title() {

return this.contact.data.fields.Title.value;

}

get phone() {

return this.contact.data.fields.Phone.value;

}

get email() {

return this.contact.data.fields.Email.value;

}

Use this code in recordex.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>

<?xml version="1.0" encoding="UTF-8"?>

<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

1	sfdx force:source:push

You can able to see the contact information as shown in below image.

Understand the code

The following code shows how to use the getRecord wire adapter to get the contact data based on the record id and we store the result in the contact property.

@wire(getRecord, {
        recordId: '$recordId',
        fields
    })
    contact;

@wire(getRecord, {

recordId: '$recordId',

fields

})

contact;

The below code shows how to get each field value from the contact property which contains a json array of data. This below code show how to refer the name field value and same get methods are defined for all field values in the code .

get name() {
        return this.contact.data.fields.Name.value;
   }

get name() {

return this.contact.data.fields.Name.value;

}

the below template syntax shows how to the call this method is the template.

{name}

{name}

M	T	W	T	F	S	S
« Mar
			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

Tag: Wire Adapter

Usage Of getPicklistValues wire adapter

Create Lightning web component

Push changes to scratch org

Like this:

getObjectInfo Wire Adapter

Create Lightning web component

Push changes to scratch org.

Like this:

getRecordUi wire adapter

Push changes to scratch org

Like this:

Usage Of getListUi Wire adapter

getListUi

Create Lightning web Component

Push changes to scratch org.

Understand the code

Like this:

Usage Of getRecord wire adapter

Create a lightning web component

Push changes to scratch org

Like this:

Tag: Wire Adapter

Create Lightning web component

Push changes to scratch org

Share this:

Like this:

Create Lightning web component

Push changes to scratch org.

Share this:

Like this:

Push changes to scratch org

Share this:

Like this:

getListUi

Create Lightning web Component

Push changes to scratch org.

Understand the code

Share this:

Like this:

Create a lightning web component

Push changes to scratch org

Share this:

Like this: