Tag: Wire Adapter

Usage Of getPicklistValues 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.

Syntax 

 

  • 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

 

here is the picklistvalues.html  code

here is the picklistvalues.js code

here is the picklistvalues.js-meta.xml code

 

 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.

 

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

The following code will show the values as a select list

 

 

 

getObjectInfo Wire Adapter

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 

 

  • 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.

Use this ObjectInfo.html markup code

Use this ObjectInfo.js code

Use this ObjectInfo.js-meta.xml code

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

 

The following markup will show the json data into UI

 

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 

  • 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

Use this code in recorduiex.html

Use this code in recorduiex.js code

Use this recorduiex.js-meta.xml

Push changes to scratch org

Push changes to scratch using this command and add this component to record page using lighting app builder

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

 

 

 

Usage Of getListUi Wire adapter

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.

  • 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

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

The Following example Get list views for an object

Create Lightning web Component 

create a lightning web component using the following SFDX command

Use the below ListUI.html markup code

 

Use the below ListUI.js code

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

 

 Push changes to scratch org.

Push changes to scratch using this command and add this component to record page using lighting app builder


You can able to see the output as shown below

 

Understand the code 

 

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

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

 

 

Usage Of getRecord wire adapter

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 :

 

  • 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.

 

 

Create a lightning web component

create a Lightning web Component using this SFDX command

Use this code in recordex.html

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

Use this code in recordex.js-meta.xml

 

Push changes to scratch org

Push changes to scratch using this command and add this component to record page using lighting app builder

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.

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 .

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