Content Header

• Why to create a lightning web component? 
  
• What is difference between lightning component and lightning web component?
• Why Choose Lightning Web Component Over Aura?
• What we will Learn in this Example
• Code
• Reference

Why to create a lightning web component? 😕

Lightning Web Components are an updated web standards-based framework method for creating lightning components on the Salesforce Platform.

What is difference between lightning component and lightning web component?

• Better performance
• Ease of development
• Faster loading sites
• Modern web standards
• Better security, better testing, and better browser compatibility
• Compatible with Aura components
• We can override new button with lightning web component 

1. Create a Lightning Web Component where we will Preview and Download List of Records in Salesforce
2. We will Use Lightning Design System “Modals” / Pop up View
3. We will be Using Custom Selection Pick list
4. We will Use Multi-Component Relationship/ Parent Child Communication
5. We will be Using Lightning Design System Different Types of “Buttons”
6. We will Prepare HTML Table in Javascript
7. Use document.createElement() , This method takes the name of the element as the parameter and creates that element node.

Code Snippet:

Apex Class to Fetch List of Contacts

FetchContactsToDownload.apxc

/*
 * 
 * Created By : Amit Lulla
 * Assignment : To Fetch List of Data and Make it Downloadable in Multiple Format
 * 
 */
public class FetchContactsToDownload {
    @AuraEnabled(cacheable=true)
	public Static List<Contact> fetchContactsMethod()
    {
        List<Contact> contactList = [SELECT Id, FirstName, LastName
                                     FROM Contact
                                     WHERE FirstName = 'Fetch'];
         //Check if Contacts are fetched or not..
        //System.debug('Contacts List::- '+contactList);
        return contactList;
    }
}

First Creating Multiple Components then call it in Single Container Component

1. Preview List

<template>
    <div class="slds-modal__content slds-p-around_medium" id="modal-content-id-1">
        <lightning-datatable
        key-field="Id"
        hide-checkbox-column="true"
        data={contacts.data}
        columns={columns}></lightning-datatable>
      </div>
</template>

import { LightningElement, wire, track } from 'lwc';
import fetchContactsMethod from '@salesforce/apex/FetchContactsToDownload.fetchContactsMethod';

const columns = [
    { label: 'Contact Id', fieldName: 'Id' },
    { label: 'First Name', fieldName: 'FirstName' },
    { label: 'Last Name', fieldName: 'LastName' }
];

export default class PreviewList extends LightningElement 
{
    error;
    columns = columns;

    @wire(fetchContactsMethod)
    contacts;
}

<?xml version="1.0" encoding="UTF-8"?>
<LightningComponentBundle xmlns="<http://soap.sforce.com/2006/04/metadata>">
    <apiVersion>55.0</apiVersion>
<!-- Check your Version Or Paste Code from Below Line -->
    <isExposed>true</isExposed>
    <targets>
        <target>lightning__HomePage</target>
        <target>lightning__AppPage</target>
        <target>lightning__RecordPage</target>
    </targets>
</LightningComponentBundle>

2. Excel Downloadable Data Button LWC

<template>
    <div class="slds-modal__content slds-p-around_medium" id="modal-content-id-1">
      <lightning-button variant="success" label="Excel" title="Export Contact Data" onclick={exportContactData}></lightning-button>
      </div>
</template>

import { LightningElement, wire, track } from 'lwc';
import fetchContactsMethod from '@salesforce/apex/FetchContactsToDownload.fetchContactsMethod';

export default class FetchDownloadableDataList extends LightningElement 
{
    @track conatctData = {}

    columnHeader = ['Id', 'FirstName', 'LastName']

    @wire(fetchContactsMethod)
    wiredData({ error, data }) {
        if (data) {
            console.log('Data', data);
            this.conatctData = data;
        } else if (error) {
            console.error('Error:', error);
        }
    }

    exportContactData(){
        // Prepare a html table
        let doc = '<table>';
        // Add styles for the table
        doc += '<style>';
        doc += 'table, th, td {';
        doc += '    border: 1px solid black;';
        doc += '    border-collapse: collapse;';
        doc += '}';          
        doc += '</style>';
        // Add all the Table Headers
        doc += '<tr>';
        this.columnHeader.forEach(element => {            
            doc += '<th>'+ element +'</th>'           
        });
        doc += '</tr>';
        // Add the data rows
        this.conatctData.forEach(record => {
            doc += '<tr>';
            doc += '<th>'+record.Id+'</th>'; 
            doc += '<th>'+record.FirstName+'</th>'; 
            doc += '<th>'+record.LastName+'</th>';
            doc += '</tr>';
        });
        doc += '</table>';
        var element = 'data:application/vnd.ms-excel,' + encodeURIComponent(doc);
        let downloadElement = document.createElement('a');
        downloadElement.href = element;
        downloadElement.target = '_self';
        // use .csv as extension on below line if you want to export data as csv
        downloadElement.download = 'Contact Data.xls';
        document.body.appendChild(downloadElement);
        downloadElement.click();
    };
}

<?xml version="1.0" encoding="UTF-8"?>
<LightningComponentBundle xmlns="<http://soap.sforce.com/2006/04/metadata>">
    <apiVersion>55.0</apiVersion>
<!-- Check your Version Or Paste Code from Below Line -->
    <isExposed>true</isExposed>
    <targets>
        <target>lightning__HomePage</target>
        <target>lightning__AppPage</target>
        <target>lightning__RecordPage</target>
    </targets>
</LightningComponentBundle>

3. CSV Downloadable Data Button LWC

<template>
    <div class="slds-modal__content slds-p-around_medium" id="modal-content-id-1">
      <lightning-button variant="brand" label="CSV" title="Export Contact Data" onclick={exportContactData}></lightning-button>
      </div>
</template>

import { LightningElement, wire, track } from 'lwc';
import fetchContactsMethod from '@salesforce/apex/FetchContactsToDownload.fetchContactsMethod';

export default class CsvDownlaodableDataList extends LightningElement
{
    @track conatctData = {}

    columnHeader = ['Id', 'FirstName', 'LastName']

    @wire(fetchContactsMethod)
    wiredData({ error, data }) {
        if (data) {
            console.log('Data', data);
            this.conatctData = data;
        } else if (error) {
            console.error('Error:', error);
        }
    }

    exportContactData(){
        // Prepare a html table
        let doc = '<table>';
        // Add styles for the table
        doc += '<style>';
        doc += 'table, th, td {';
        doc += '    border: 1px solid black;';
        doc += '    border-collapse: collapse;';
        doc += '}';          
        doc += '</style>';
        // Add all the Table Headers
        doc += '<tr>';
        this.columnHeader.forEach(element => {            
            doc += '<th>'+ element +'</th>'           
        });
        doc += '</tr>';
        // Add the data rows
        this.conatctData.forEach(record => {
            doc += '<tr>';
            doc += '<th>'+record.Id+'</th>'; 
            doc += '<th>'+record.FirstName+'</th>'; 
            doc += '<th>'+record.LastName+'</th>';
            doc += '</tr>';
        });
        doc += '</table>';
        var element = 'data:text/csv;charset=utf-8,' + encodeURIComponent(doc);
        let downloadElement = document.createElement('a');
        downloadElement.href = element;
        downloadElement.target = '_self';
        // use .csv as extension on below line if you want to export data as csv
        downloadElement.download = 'Contact Data.csv';
        document.body.appendChild(downloadElement);
        downloadElement.click();
    };
}

<?xml version="1.0" encoding="UTF-8"?>
<LightningComponentBundle xmlns="<http://soap.sforce.com/2006/04/metadata>">
    <apiVersion>55.0</apiVersion>
<!-- Check your Version Or Paste Code from Below Line -->
    <isExposed>true</isExposed>
    <targets>
        <target>lightning__HomePage</target>
        <target>lightning__AppPage</target>
        <target>lightning__RecordPage</target>
    </targets>
</LightningComponentBundle>

4. Container Modal with all Components from Above

<template>
    <lightning-button label="Preview List"
                        title="Preview List" onclick={showModalBox}>
    </lightning-button>

   <!-- modal start -->      
   <template if:true={isShowModal}>

            <section role="dialog" tabindex="-1" aria-modal="true" aria-labelledby="modal-heading-01" class="slds-modal slds-fade-in-open slds-modal_large">
               <div class="slds-modal__container">
                  <lightning-button-icon icon-name="utility:close"  alternative-text="Close" title="Close" onclick={hideModalBox}></lightning-button-icon>
                  
                 <div class="slds-modal__header">
                   <h1 id="modal-heading-01" class="slds-modal__title slds-hyphenate">List Preview</h1>
                 </div>
                 <div class="slds-modal__content slds-p-around_medium" id="modal-content-id-1">
                  <lightning-layout multiple-rows>
								<!-- COMPONENT 01 Preview List -->
                    <lightning-layout-item size="12" padding="around-small">
                        
                      <c-preview-List></c-preview-List>
                   
                    </lightning-layout-item>
								
								<!-- Custom PICKLIST -->
                    <lightning-layout-item size="12" padding="around-small">
                      <div class="slds-form-element">
                        <label class="slds-form-element__label" for="select-01">Select Type</label>
                        <div class="slds-form-element__control">
                          <div class="slds-select_container">
                            <select class="slds-select" name = "optionSelect" onchange={changeHandler}>
                              <option value="">Select…</option>
                              <option>Excel</option>
                              <option>CSV</option>
                            </select>
                          </div>
                        </div>
                      </div>
                    </lightning-layout-item>
								<!-- COMPONENT 02 Excel Downloadable Data Button -->
                    <template if:true={show}>
                      <div class="slds-box">
                          <lightning-layout-item size="3" padding="around-small">
                        
                           <c-fetch-Downloadable-Data-List></c-fetch-Downloadable-Data-List>
                        
                     </lightning-layout-item>
                      </div>
                  </template>
                    <!-- COMPONENT 03 CSV Downloadable Data Button -->
                  <template if:true={show1}>
                    <div class="slds-box">
                     <lightning-layout-item size="3" padding="around-small">
                        
                      <c-csv-Downlaodable-Data-List></c-csv-Downlaodable-Data-List>
                   
                </lightning-layout-item>
              </div>
          </template>
                  </lightning-layout>
                 </div>
				<!-- Close / cancel Button -->
                 <div class="slds-modal__footer">
                   <button class="slds-button slds-button_neutral" aria-label="Cancel and close" onclick={hideModalBox}>Cancel</button>
                 </div>
               </div>
             </section>
             <div class="slds-backdrop slds-backdrop_open" role="presentation"></div>
    <div class="slds-backdrop slds-backdrop_open"></div>
 </template>
 
 <!-- modal end -->

</template>

import { LightningElement, track } from 'lwc';

export default class ModalToDisplayAndDownload extends LightningElement 
{
    @track selectedOption;
    @track isShowModal = false;
    show = false;
    show1 = false;
    showModalBox() {  
        this.isShowModal = true;
    }
    hideModalBox() {  
        this.isShowModal = false;
        this.show1 = false;
        this.show = false;
    }
    changeHandler(event) {
        const field = event.target.name;
        if (field === 'optionSelect') {
            this.selectedOption = event.target.value;
            }
            if(this.selectedOption == 'Excel'){
                this.show1 = false;
                this.show = true;
            }else{
                this.show = false;
                this.show1 = true;
            }
        }
        error;
}

<?xml version="1.0" encoding="UTF-8"?>
<LightningComponentBundle xmlns="<http://soap.sforce.com/2006/04/metadata>">
    <apiVersion>55.0</apiVersion>
<!-- Check your Version Or Paste Code from Below Line -->
    <isExposed>true</isExposed>
    <targets>
        <target>lightning__HomePage</target>
        <target>lightning__AppPage</target>
        <target>lightning__RecordPage</target>
    </targets>
</LightningComponentBundle>

Reference :