Skip to main content

LWC Show Records In Table

Requirement :


Create a LWC component which will show the most recently created 10 Opportunity from the org and show them in table having Name , Close Date , Stage Name , Type and Create .

or in other words

Show Opportunity data in table format.

cmpOpportunityRecords.html

<template>
    <lightning-card title="Opportunity Records" icon-name="standard:opportunity">       
        <lightning-datatable             
            data={data} 
            columns={columns} 
            key-field="Id">
        </lightning-datatable>
    </lightning-card>
</template>

cmpOpportunityRecords.js

import { LightningElement ,api,wire,track } from 'lwc';
import getOpportunity from '@salesforce/apex/cmpOpportunityRecordsCls.getOpportunity';
export default class DevCmpShowRecords extends LightningElement {
    @track columns =[
        {
            label: 'Opportunity name',
            fieldName: 'Name',
            type: 'text',
            sortable: true
        },
        {
            label : 'Stage Name',
            fieldName : 'StageName',
            type : 'text',
            sortable : true
        },
        {
            label : 'Close Date',
            fieldName : 'CloseDate',
            type : 'date',
            sortable : true
        },
        {
            label : 'Type',
            fieldName : 'Type',
            type : 'Picklist',
            sortable : true
        },
        {
            label : 'Create Date',
            fieldName : 'CreatedDate',
            type : 'date',
            sortable : true
        }
    ];
    @track data;
    @track error; 
    @wire(getOpportunity)    
    wiredOpps({
        error,
        data
    }) {
        if (data) {
            this.data = data;
            console.log(data);
            console.log(JSON.stringify(data, null, '\t'));
        } else if (error) {
            this.error = error;
        }
    }
}

cmpOpportunityRecords.js-meta.xml

<?xml version="1.0" encoding="UTF-8"?>
<LightningComponentBundle xmlns="http://soap.sforce.com/2006/04/metadata">
    <apiVersion>48.0</apiVersion>
    <isExposed>true</isExposed>
    <targets>
        <target>lightning__AppPage</target>
        <target>lightning__RecordPage</target>
        <target>lightning__HomePage</target>
        <target>lightning__Tab</target>
      </targets>
</LightningComponentBundle>

cmpOpportunityRecordsCls.cls

public with sharing class cmpOpportunityRecordsCls {
    @AuraEnabled(cacheable=true)    
    public static List<Opportunity> getOpportunity(){
        return[
            SELECT ID,Name,StageName,CloseDate,Type,Account.Name,CreatedDate 
            FROM Opportunity 
            ORDER BY createdDate DESC
            LIMIT 10
        ];
    }
}

Output


Other Useful Blog

Lightning Component

Happy Learning !!

Comments

Post a Comment

Popular posts from this blog

LWC Create Record

Requirement : ‹ › Create a LWC which will take information like Name, Phone and Industry and on click of Save button , record should be saved to the org as Account. or in other words Create account record LWC. cmpAccountRecord.html < template >      < lightning-card   title = "New Account"   icon-name = "standard:account" >          < lightning-input                label =  "Name"                value = {objAccount.Name}                onchange = {handleNameChange} >                      </ lightning-input >          < lightning-input ...
1 comment
Read more

LWC Decorators

Decorators : ‹ › In LWC decorators are used to add functionality to a property or function. There are three types of decorators : 1. @track 2. @api 3. @wire @track : It is used to make properties or methods in LWC is private. This properties is not accessible outside the LWC in which it is declared. @api : It is used to make properties or methods in LWC is public. This way they are accessible outside of the component in which they are declared. For ex : parent component can set the value of the properties in the child component. @wire : It is used to read the Salesforce data from apex class into LWC. It is generally used while making the server call to apex class. LWC Properties : There are two type of LWC properties. 1. Reactive Properties 2. Non-Reactive Properties Reactive Properties : In case of reactive properties , value of the properties change when the component re-render. There are two types of Reactive Properties. 1. Public properties...
Post a Comment
Read more