Salesforce Challenge 1 Winner (LWC): Build Opportunity List Component

Challenge 1: Retrieve the list of Opportunity records and display on the page.

Review: Mohit Sharma became winner because he is the only person who went out of the way and attempted this challenge in Lightning Web Component

Hi friends,In this post you will learn how to show the list of records of any object in lwc using the lightning:dataTable web component.

opplwc.js {javascript file}

// import module elements js file of lwc
import {
    LightningElement,
    wire,
    track
} from 'lwc';
//import method from the Apex Class to get the records
import fetchopportunities from '@salesforce/apex/FetchOpportunityList.listOppLwc';
// Declaring the columns in the datatable
const columns = [{
        label: 'View',
        type: 'button-icon',
        initialWidth: 75,
        typeAttributes: {
            iconName: 'action:preview',
            title: 'Preview',
            variant: 'border-filled',
            alternativeText: 'View'
        }
    },
    {
        label: 'Name',
        fieldName: 'Name'
    },
    
    {
        label: 'Amount',
        fieldName: 'Amount'
    }
];
 
// declare class to expose the component
export default class DataTableComponent extends LightningElement {
    @track columns = columns;
    @track record = {};
    @track rowOffset = 0;
    @track data = {};
    @track bShowModal = false;
    @wire(fetchopportunities) parameters;
 
    // Row Action event to show the details of the record
    handleRowAction(event) {
        const row = event.detail.row;
        this.record = row;
        this.bShowModal = true; // display modal window
    }
 
    // to close modal window set 'bShowModal' tarck value as false
    closeModal() {
        this.bShowModal = false;
    }
}

//opplwc.html file of lwc

<template>
    <!--lightning datatable inbuilt lwc to show the records in table format -->
     <lightning-datatable 
           key-field="id"
           data={parameters.data}
           onrowaction={handleRowAction}
           row-number-offset={rowOffset}
           hide-checkbox-column="true"
           columns={columns}></lightning-datatable>
       <!-- Detail view modal start to show the records in a pop-up -->
     <template if:true={bShowModal}>
      <section role="dialog" tabindex="-1"
               aria-labelledby="modal-heading-01"
               aria-modal="true"
               aria-describedby="modal-content-id-1"
              class="slds-modal slds-fade-in-open">
         <div class="slds-modal__container">
            <!-- modal header start -->
            <header class="slds-modal__header">
               <button class="slds-button slds-button_icon slds-modal__close slds-button_icon-inverse" title="Close" onclick={closeModal}>
                  <lightning-icon icon-name="utility:close" alternative-text="close" variant="inverse" size="small" ></lightning-icon>
               </button>
               <h2 id="modal-heading-01" class="slds-text-heading_medium slds-hyphenate">Record Detail</h2>
            </header>
            <!-- modal body start -->
            <div class="slds-modal__content slds-p-around_medium" id="modal-content-id-1">
              <dl class="slds-list_horizontal slds-wrap">
                  <dt class="slds-item_label slds-truncate" title="Name">Name:</dt>
                  <dd class="slds-item_detail slds-truncate">{record.Name}</dd>
                  <dt class="slds-item_label slds-truncate" title="Amount">Amount :</dt>
                  <dd class="slds-item_detail slds-truncate">{record.Amount}</dd>
              </dl>
            </div>
            <!-- modal footer start-->
            <footer class="slds-modal__footer">
                 <lightning-button variant="brand"
                 label="Close"
                 title="Close"
                 onclick={closeModal}
                 ></lightning-button>
            </footer>
         </div>
      </section>
      <div class="slds-backdrop slds-backdrop_open"></div>
   </template>
   <!-- Detail view modal end -->
   
  </template>

opplwc.xml file of lwc

<?xml version="1.0" encoding="UTF-8"?>
<LightningComponentBundle xmlns="http://soap.sforce.com/2006/04/metadata" fqn="dataTableComponent">
   <apiVersion>45.0</apiVersion>
   <isExposed>true</isExposed>
   <!-- With following targets make component available for lightning app page, record page and home page in salesforce -->
   <targets>
       <target>lightning__AppPage</target>
       <target>lightning__RecordPage</target>
       <target>lightning__HomePage</target>
   </targets>
</LightningComponentBundle>

ApexClass for Lwc

public with sharing class FetchOpportunityList{
    @AuraEnabled(cacheable = true)
public static List<opportunity> listOppLwc(){
       return [SELECT Id,Name,Amount FROM opportunity LIMIT 100];
    }
}

Together we can learn faster!