Getting Data Using Wire Service in Lightning Web Component – Facebook Timeline App

Objective
Basic introduction to wire service and a demo app.

In this unit, we will be learning that how can we use wire service to get record’s data into the lightning web component without writing any apex code. We will be having a very basic introduction to the wire service. We will explore more about wire service in upcoming blogs to know the power of it.

App Description:
We will have a demo app using wire service. This app is showing Facebook timeline stream into the record detail page.

Create Lightning Web Component Bundle:
1. Open Visual Studio Code.
2. Press Command+Shift+P (Mac), Ctrl+Shift+P( Windows)
3. Here type SFDX: Create Lightning Web Component
4. It will ask for the desired directory, Just press enter
5. Give the name to your Lightning Web Component as facebooktimeline and press enter.

Create a custom field in Account object.
Label: Facebook Page URL
API: Facebook_Page_URL__c

What is Wire Service in LWC: (Basic)

1. We use wire service to get data from Salesforce server.
2. Wire Service is reactive that means if something changes in parameter then the data will be provided by the wire service. We don’t need to call any helper method to get data.
3. It has a cacheable technique, that means it does not always look for the server to get data. Let’s say we have parameter recId. If we pass the recId = ‘test1’ then it goes the server and fetches the data. Now for recId = ‘test2’, It will go to the server as the parameter has been changed. Now if use again recId = ‘test1’ or recId = ‘test2’ then it will not go to server and data will be served from the cache.
4. Wire Service has the adapter. We use the adapter to get data from Salesforce.
5. Wire Service can be used with the standard salesforce adapters and custom adapter(Apex Methods).

Code Time:

Code Explanation:
We are using lightning/uiRecordApi adapter and we have given the unique adapterId (getRecord).
import { getRecord } from ‘lightning/uiRecordApi‘;

We have a property named Account with the decorator called @wire. Also, Here we are passing the configuration to the adapter.

We are creating facebook timeline src inside the facebookSrc getter.

It has FBURL, that is keeping the field reference using @salesforce/schema module.

Deploy the Code to Scratch Org:
Open Visual Studio Code’s Integrated Terminal.
Type below command and hit the enter.
sfdx force:source:push

Add Lightning Web Component to Lightning Home Layout:
1. Click on Setup Icon (top-right) and then Setup.
2. Here search for Object Manager and click on it.
3. Click on Account.
4. Click on Lightning Record Pages in the sidebar. Then click on Edit button.
5. Here drag and drop the facebooktimeline into the right side.
5. Click on Save and Activate.
6. After successful activation. Go back and open any account record page. (Don’t forget to populate the facebook page URL. Ex: https://www.facebook.com/0to1code/)

Resource:
Use the Wire Service to Get Data

Read more blogs on Lightning Web Components here…