Tag: Wire Adapter

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.

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

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>

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;
}

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>

 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

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;

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>

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>

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;
}

• 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

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>

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) :
            '';
    }
}

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>

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

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;

The following markup will show the json data into UI

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

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;
}

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.

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.

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' })

• 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;
}

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

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>

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;
        }
    }

   
}

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>

 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

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;
        }
    }

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>

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;
}

• 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;
        }
    }
}

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

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>

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;
    }
}

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>

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

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;
   }

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

{name}