Fetching and Displaying Data in Salesforce Lightning Web Components: A Step-by-Step Guide Salesforce

Salesforce Lightning Web Components (LWC) is a framework provided by Salesforce to develop web applications easily. You know how to build cool things with building blocks? LWC is like those blocks for websites and apps.

I have found a way to represent real-time information from Objects to UI easily. To achieve this, I followed a three-step flow. I’ll help you walk through these steps in an easy manner so that even a beginner can fetch and display data from Objects to UI.

The scenario that is followed for the below example is that we want to fetch feeds from Custom Feed Object and display on UI.

The Three-step Guide is:

Create Apex Controller

a. Apex Controller is like a middleman between Object (Salesforce’s Database) and LWC component. We have created a controller named FeedController.

b.Include a method (in our case getFeeds()) in order to fetch data.

c. Don’t forget to add `@AuraEnabled(cacheable=true)` to enable Lightning component access and caching.

public with sharing class FeedController {
     @AuraEnabled(cacheable=true)
     public static List<Feed__c> getFeeds() {
          return [SELECT Id, Name, Post_Content__c, Post_Image__c, 
          CreatedDate FROM Feed__c];
     }
}

Don't forget to check out: Introduction to Lightning Web Components (LWC): A Beginner’s Guide to Building Dynamic Salesforce User Interfaces

Create LWC Component

a. Let’s create LWC component (feedPage in our case).

b.Import getFeeds method in our feedPage.js file.

import getFeeds from 
`@salesforce/apex/FeedController.getFeeds`;

c. Use @wire decorator to establish connection between Apex Controller and our component.

import { LightningElement, track, wire } from 'lwc';
import getFeeds from '@salesforce/apex/FeedController.getFeeds';
export default class FeedPage extends LightningElement {
     @track feeds;
     @wire(getFeeds)
     wiredFeeds({ error, data }) {
          if (data) {
               this.feeds = data;
          } 
          else if (error) {
               console.error('Error fetching feeds:', error);
          }
     }
}

Display on UI

With the data being fetched, now it’s time that we finally display it on our UI. This part will be handled by the feedPage.html file in our case. Show all feeds by using a for loop.

<template>
<ul if:true={feeds}>
<template for:each={feeds} for:item="dataItem">
<li key={dataItem.Id}>
<!-- Display data item details here -->
</li>
</template>
</ul>
<p if:false={feeds}>No data found.</p>
</template>

Important Admin configurations that are needed for your component to work properly on Builder of Digital Experience are listed below:

1. Enable Guest User Access.

2. Add a Sharing Rule in Sharing Settings.

3. Go to Profile < Settings < Builder and enable FeedController class.

4. Drag your component on the Builder’s Page.

5. Check your component, it will be fetching data and displaying the same.

You have learned how to fetch and display data from Object to UI in Experience Cloud using Builder.

Check out another amazing blog by Nayan here: Decorators in Salesforce

Conclusion

In this guide, all the concepts related to fetching the data and displaying the data on UI webpages are shown with practical examples. In the above example we have a custom Feed Object ( Feed___c ) which in return has different fields like Name, Post_Content__c, Post_Image__c, Creator etc. Our objective was to fetch Feeds from Feeds Object and show it on our UI using LWC Component.

Author – Nayan Kaslikar