Work with Salesforce Data — Use Wire Adapter and Function in LWC

Welcome to the exciting world of Salesforce development, where harnessing the power of data can make all the difference. In this blog, we're going to dive into one of the coolest tricks up a Lightning Web Component (LWC) developer's sleeve – using the Wire Adapter and JavaScript functions to work with Salesforce data.

Now, if you're new to Salesforce, you might be wondering, "Why is this important?" Well, Salesforce is a heavyweight in the world of Customer Relationship Management (CRM) systems, and it stores a treasure trove of data. As a developer, you need to know how to tap into that data efficiently to create stunning user interfaces and make your applications responsive.

So, what are the Wire Adapter and JavaScript functions? They're your tools for connecting your LWC to Salesforce data seamlessly. Need to fetch a list of leads, update opportunities, or keep your app in sync with real-time data changes? You got it.

This blog is your guide to understanding, using, and mastering the Wire Adapter and JavaScript functions in LWC. We'll break down the concepts, provide you with hands-on code examples, and share the best practices. By the time you finish reading, you'll be the Salesforce superhero who can wield these tools to supercharge your Lightning Web Components and make data work for you.

So, let's jump right in and unlock the full potential of your Salesforce development skills!


Wire Adapter and JavaScript Functions in LWC


Wire Adapter: The Wire Adapter is a powerful mechanism in LWC that simplifies the process of fetching data from Salesforce. It allows you to connect your LWC component to Salesforce and retrieve data with minimal code. By using decorators like `@wire`, you can establish data connections, making your components more efficient and responsive.

JavaScript Functions: JavaScript functions are used in LWC to interact with Salesforce data. By invoking Apex methods from LWC using JavaScript functions, you can query, manipulate, and update data in your Salesforce organization. These functions facilitate bidirectional data flow between your LWC component and Salesforce.

The combination of Wire Adapters and JavaScript functions provides a streamlined approach for working with Salesforce data. It allows developers to create data-driven, responsive, and efficient Lightning Web Components.


How wire adapter and function are work with salesforce data in LWC component.


In this topic, we will get to know how wire adapter and function are work with salesforce data in LWC component.


To read Salesforce data, Lightning web components use a reactive wire service. Use `@wire` in a component’s JavaScript class to specify a Lightning Data Service wire adapter.

The LDS wire adapters are built on User Interface API resources and resides in the `lightning/ui*Api` modules.

The wire service provisions an immutable stream of data to the component. Each value in the stream is a newer version of the value that precedes it.

Syntax:

import { adapterId } from 'adapterModule';
@wire(adapterId, adapterConfig)
propertyOrFunction;

  1. `import { adapterId } from 'adapterModule';`: In this part, you are importing a specific adapter function from an adapter module. An adapter, in the context of LWC, is a utility function that connects your component to Salesforce data using the Wire Service.

    2. adapterId (Identifier) — The identifier of the wire adapter.

    adapterModule (String) — The identifier of the module that contains the wire adapter function, in the format namespace/moduleName. Look at the format! To import a module in JavaScript, use lightning/ui*Api instead of lightning-ui-*-api.


  2. `@wire(adapterId, adapterConfig)`: This is a decorator used in your LWC component. It's called the `@wire` decorator. It connects your component to a specific data source (defined by `adapterId`) and provides configuration options (`adapterConfig`) for the data retrieval.

    3. adapterConfig (Object) — A configuration object specific to the wire adapter. Configuration object property values can be either strings or references to objects and fields imported from @salesforce/schema.


  3. `propertyOrFunction;`: This represents a property or function in your component that will store or handle the data returned by the Wire Service. Depending on the context, it can be a variable or a function that processes the data received from the data source.

Here's an example:

Let's say you want to fetch a list of Salesforce records using the `getRecord` adapter. You would import it like this:

import { getRecord } from 'lightning/uiRecordApi';

Now, you can use the `@wire` decorator to connect your component to this adapter and specify the configuration, like the record Id:

@wire(getRecord, { recordId: 'someRecordId' })
record;

In this case, `record` is a property in your component that will store the data returned by the `getRecord` adapter. It will automatically fetch and update the data based on the `recordId` you provided.

So, the combination of these elements allows you to seamlessly retrieve and manage Salesforce data in your Lightning Web Component. The Wire Service takes care of fetching and updating the data, making your component more efficient and responsive.


Get Record Data

Imports the adapterId `getRecord` wire adapter from the adapterModule `lightning/uiRecordApi` module, which is built on Lightning Data Service, then in adpaterConfig use ‘recordId:’ for particular object and ‘fields:’ property to get fields. Then use function or property to get data and error.

eg. In this example I am getting account record using `getRecord` adapterID

Displaying Data in the Template:

It's used to display Salesforce data retrieved using the Lightning Data Service (LDS) and the Wire Service in LWC.

ldsWithWireAndFunction.html - Markup for the LWC:

`<template lwc:if={accData}>`: This is a conditional rendering template. It checks if the `accData` variable exists and has a value. If `accData` is present, it proceeds to render the content within this template.


ldsWithWireAndFunction.js - JavaScript for the LWC:

// ldsWithWireAndFunction.js
import { LightningElement, wire } from 'lwc';
import { getRecord } from 'lightning/uiRecordApi';
import NAME_FIELD from '@salesforce/schema/Account.Name'
import WEBSITE_FIELD from '@salesforce/schema/Account.Website'
import PHONE_FIELD from '@salesforce/schema/Account.Phone'
import INDUSTRY_FIELD from '@salesforce/schema/Account.Industry'

export default class LdsWithWireAndFunction extends LightningElement {
  dataId = '0012y00000L5R6jAAF'
  accData;

  @wire(getRecord, {
    recordId: '$dataId',
    fields: [NAME_FIELD, WEBSITE_FIELD, PHONE_FIELD, INDUSTRY_FIELD]
  })
  accountObjectData({ data, error }) {
    if (data) {
      console.log(data);
      this.accData = data.fields
      Jelset
      console.log(error);
    }
  }
}

It demonstrates how to use the Wire Service and the `uiRecordApi` module to fetch Salesforce record data and store it in the component. Let's break down the code:

  1. Imports: The code starts with several import statements to bring in the required modules and fields.
    • `LightningElement` and `wire` are imported from the 'lwc' module, allowing the component to use LWC functionality, including the Wire Service.
    • `getRecord` is imported from 'lightning/uiRecordApi' and is used to fetch Salesforce record data.
    • Constants like `NAME_FIELD`, `WEBSITE_FIELD`, `PHONE_FIELD`, and `INDUSTRY_FIELD` are imported from '@salesforce/schema/Account'. These constants represent specific fields on the 'Account' object.

  2. Export Default Class: The `LdsWithWireAndFunction` class is defined, extending `LightningElement`, making it a Lightning Web Component.

  3. Class Properties:
    • `dataId`: This property stores a sample record ID. It's set to '0012y00000L5R6jAAF'.
    • `accData`: This property will store the fetched record data.

  4. Wire Adapter (@wire):
    • The `@wire` decorator is used to invoke the Wire Service. It connects the component to the `getRecord` adapter.
    • `getRecord` requires two parameters: the `recordId` (in this case, it's set to `$dataId`, which is the value of the `dataId` property) and the `fields` parameter, which specifies which fields to retrieve.
    • The `accountObjectData` function receives two parameters: `data` and `error`. These represent the response data and any potential errors from the wire adapter.
    • If `data` is available (i.e., the record data was successfully fetched), it logs the data and assigns it to the `accData` property. The data fields are accessible as `data.fields`.
    • If there's an error, it's logged to the console.

Expected Output:

In summary, the Wire Adapter simplifies data retrieval, error handling, and loading state management in LWC components when working with Salesforce data. It enables you to seamlessly connect your LWC components to Salesforce data, making the development process more efficient and user-friendly.


 MIND IT !

Lightning Data Service (LDS):
LDS is a powerful Salesforce technology that simplifies the interaction between Lightning web components and Salesforce data. It acts as a data layer, allowing components to retrieve, modify, and manipulate records without the need for complex Apex code. It enforces security and sharing rules, making it a secure and efficient way to work with Salesforce data.

Wire Adapters in LDS:
Wire adapters are a crucial part of LDS. They facilitate the communication between LWC components and the Salesforce server to fetch and update data. These wire adapters are based on the User Interface API resources, which are a set of standard APIs provided by Salesforce to interact with UI elements and data. The wire adapters, residing in the `lightning/ui*Api` modules, are specifically designed to work with UI API resources.

User Interface (UI) API:
The UI API is a Salesforce REST API that offers a consistent and unified way to access and manipulate Salesforce data and user interface elements. It provides a set of resources that cover a wide range of functionalities, from retrieving records and metadata to managing user interface elements. These resources are organized in a structured manner, making it easy for developers to work with them.

Residing in `lightning/ui*Api` Modules:
In the context of Lightning Web Components, the wire adapters that connect to the UI API resources can be found in modules starting with `lightning/ui*Api`. For example, you may import wire adapters like `@wire(getRecord)` or `@wire(updateRecord)` from these modules to access the corresponding UI API resources.

In summary, wire adapters based on UI API resources in the `lightning/ui*Api` modules are a fundamental part of LDS, providing a straightforward and secure way for Lightning web components to interact with Salesforce data and user interface elements.


"Stay tuned for more exciting LWC topics, and keep exploring the world of Lightning Web Components to become a Salesforce development pro. Happy coding!"

Share This Post:

About The Author

Hey, my name is Saurabh Samir and I am Salesforce Developer. I have been helping to elevate your Lightning Web Components (LWC) Knowledge. Do comment below if you have any questions or feedback's.