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

Fetching and Displaying Data in Salesforce Lightning Web Components: A Step-by-Step Guide Salesforce
by: Nayan
blow post content copied from  Forcetalks
click here to view original post

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

The post Fetching and Displaying Data in Salesforce Lightning Web Components: A Step-by-Step Guide Salesforce appeared first on Forcetalks.

September 27, 2023 at 04:34PM
Click here for more details...

=============================
The original post is available in Forcetalks by Nayan
this post has been published as it is through automation. Automation script brings all the top bloggers post under a single umbrella.
The purpose of this blog, Follow the top Salesforce bloggers and collect all blogs in a single place through automation.
============================