Implementing a Salesforce Lightning DataTable with Data Sourced from a Popdock API Endpoint

Creating a Lightning component in your Salesforce environment requires some setup and a few applications. While it involves programming, if you understand code and can customize the sample code provided in this article, you’ll be well-equipped to get started. This guide will help you build a Lightning DataTable component using data retrieved from a Popdock API Endpoint.

The Lightning DataTable Web Component is a more complex integration than our Popdock Widget Visualforce Component, but it offers a streamlined, Salesforce-native view of your data.

Here’s what it looks like:

Before You Get Started

To build your Lightning component, you’ll need to set up a few tools and programs. Follow the steps in this Salesforce Trailhead link to get the necessary programs and extensions:

Once you have these three items, you will be ready to build and publish a Lightning Component to your Salesforce Environment.

Creating a Lightning Web Component

In this section, you’ll work in Visual Studio Code to create a Salesforce Project, connect to your Salesforce environment, and begin writing the JavaScript necessary for building your Lightning component.

Create a Popdock DataTable Project

Authorizing Your Salesforce Environment

The next steps are to authenticate your Salesforce environment.  Here I am using a Dev Hub for my environment.

And then like this in the output in tab in Visual Studio Code:

To authenticate Dev Hub is a precondition for creating a scratch org, which is an ephemeral environment for developing on the Salesforce Platform. We create one in the next step. If you have authorized a Production or Sandbox environment, please skip this section.

Create a Scratch Org

Be patient, creating a scratch org can take a minute. The success message should look like this in the output panel of VS Code:

Create a Lightning Web Component

Creating a Lightning web component is a straightforward process. And Salesforce CLI already created a project structure that helps make getting started even easier. The folder structure looks like this:

The project we created has a special folder, “force-app/main/default”. This folder, called a package directory, contains all the metadata of your current PopdockDataTable project. Because Lightning web components are also metadata, they are stored in a subfolder named “lwc”. In the next step, we add a Lightning web component to this folder.

Adding Code and Metadata to Your First Lightning Web Component

Let’s take a look now at the files that make up a Lightning web component. For that you’re going to copy and paste some HTML, JavaScript, and XML that we’ve prepared for you. We start with the myFirstWebComponent.js-meta.xml file.

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

The file that you just updated is the metadata definition file. It contains several configuration elements that control, for example, where you can add it to the Salesforce user interface using Lightning App Builder (targets). You can read more about the metadata configuration options in the documentation.

Next we create a new Javascript file and update the JavaScript file of your Lightning web component.

export default function getCustomers() {

    const apiUrl = '{Endpoint URL}';
    const apiKey = '{Token}';

    const requestOptions = {
        method: 'GET',
        headers: {
            'Authorization': 'Bearer ${apiKey}',
        },
    };

    return fetch(apiUrl, requestOptions)
        .then((response) => {
            if (!response.ok) {
                throw new Error('Network response was not ok');
            }
            return response.json();
        })

        .catch(error => {
            console.error('Error:', error);
        });

}

import { LightningElement } from 'lwc';
import getCustomers from './generateData';

const columns = [
    { 
        label: 'SOP Type', 
        fieldName: 'SOPtype', 
        sortable: "true",
        hideDefaultActions: true
    },
    { 
        label: 'SOP No.', 
        fieldName: 'SOPnumber', 
        sortable: "true",
        hideDefaultActions: true
    },
    { 
        label: 'Customer ID', 
        fieldName: 'CustomerID', 
        sortable: "true",
        hideDefaultActions: true
    },
    { 
        label: 'Item No.', 
        fieldName: 'Itemnumber', 
        sortable: "true",
        hideDefaultActions: true
    },
    { 
        label: 'Description', 
        fieldName: 'Itemdescription', 
        sortable: "true",
        hideDefaultActions: true
    },
    { 
        label: 'Unit Cost', 
        fieldName: 'Unitcost',
        type: 'currency', 
        sortable: "true",
        hideDefaultActions: true
    },
    { 
        label: 'Unit Price', 
        fieldName: 'Unitprice',
        type: 'currency', 
        sortable: "true",
        hideDefaultActions: true
    },
    { 
        label: 'Qty', 
        fieldName: 'Quantity',
        type: 'quantity', 
        sortable: "true",
        hideDefaultActions: true
    },
    { 
        label: 'Extended Cost',
        fieldName: 'Extendedcost',
        type: 'currency',
        sortable: "true",
        hideDefaultActions: true
    },
    { 
        label: 'Extended Price',
        fieldName: 'Extendedprice',
        type: 'currency',
        sortable: "true",
        hideDefaultActions: true
    }
];

export default class PopdockTable extends LightningElement {
    data = [];
    columns = columns;
    sortBy;
    sortDirection;
    totalRecords;

    connectedCallback() {
        this.load();
    }

    async load(){
        this.data = await getCustomers();
        this.totalRecords = this.data.length;
    }

    doSorting(e) {
        this.sortBy = e.detail.fieldName;
        this.sortDirection = e.detail.sortDirection;
        this.sortData(this.sortBy, this.sortDirection);
    }
    
    sortData(fieldname, direction) {
        let parseData = this.data;
        // Return the value stored in the field
        let keyValue = (a) => {
            return a[fieldname];
        };
        // checking reverse direction
        let isReverse = direction === 'asc' ? 1: -1;
        // sorting data
        parseData.sort((x, y) => {
            x = keyValue(x) ? keyValue(x) : ''; // handling null values
            y = keyValue(y) ? keyValue(y) : '';
            // sorting values based on direction
            return isReverse * ((x > y) - (y > x));
        });
        this.data = [...parseData];
    }
}

<template>
    <h2 id="element-with-table-label" class="slds-text-heading_medium slds-m-bottom_xx-small">Sales Line Items from GP</h2>
    <h3 id="other-element-with-table-label" class="slds-text-title slds-m-bottom_small">Using an API Endpoint to create lightning datatable.</h3>  
    <div style="height: 400px;">
        <lightning-datatable
                key-field="SOPnumber"
                data={data}
                columns={columns}
                column-widths-mode="auto"
                sorted-by={sortBy}
                sorted-direction={sortDirection}
                onsort={doSorting}
                hide-checkbox-column="true">
        </lightning-datatable>
    </div>
    <p style="margin: auto 0 auto 0;"><b>Total Records:</b> {totalRecords}</p>
</template>

Deploying Your Lightning DataTable

Adding Your Lightning DataTable to a Page in Salesforce

In this section we use the deployed Lightning Web Component and apply it to a page in Salesforce.