Day: January 28, 2019

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.

 

 

Lightning web component deleteRecord function

Let us discuss here how to use lightning/uiRecordApi modules. 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. one of the most of important function is deleteRecord that will be used to delete a record in the database without using apex class.

Syntax 

  • recordId—(Required) The ID of the record to delete.
Create a lightning web component
create a lightning web component using the flowing sfdx command

Use this markup in deleterecord.html

Use this deleterecord.js code

 

Use this deleterecord.js-meta.xml file

 

Push changes to scratch org.

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

Add the Delete Record component to Salesforce record page using app builder and you can able to see the delete button as shown below.

 

 

Understand the code 

Import deleteRecord function from lightning/uiRecordApi modules .

invoke the deleteRecord function on the button click as shown below. This method will show the Toast message once the record is deleted or fail to delete.