Salesforce

Overview

This section guides developers on creating Salesforce Lightning Web Components (LWC) using Jspreadsheet.

General Considerations

Before you begin integration, consider the following:

  • Upload the Static Resources to your Salesforce Development Platform.
  • Include the Material icons classes in your component.css.
  • You must have a developer account on the Salesforce Development Platform.

License Considerations

  • Jspreadsheet may be utilized within any Salesforce account for internal purposes and should not be distributed on Salesforce Marketplace.
  • It requires a valid Ultimate license

Useful References

Tutorial

Upload the Static Files

  1. Download the Jspreadsheet Package.
  2. Log into your Salesforce development account.
  3. Search for Static Resources.
  4. Create a new resource.
  5. Upload the downloaded Jspreadsheet Package.

LWC Static Resources



Lightning Web Component

To create a new web component we will use the Lightning Studio Chrome Extension, following the steps:

  1. Login to your salesforce developer account them click on the extension.

Lightning Studio Chrome Extension


  1. Click on create a new web component.

Create A Lightning Web Component


  1. Fill the form with the following information.

Lightning Web Component


  1. Your web component will have four files, and you will need to update the content of those files as follow:
  • spreadsheet.js
  • spreadsheet.css
  • spreadsheet.html
  • spreadsheet.js-meta.xml

HTML Web Component File

Your basic HTML file should contain the following properties.

<template lwc:render-mode="shadow">
    <div lwc:dom="manual"></div>
</template>

JavaScript Web Component File

Create your main JavaScript LWC component.

import { LightningElement } from 'lwc';
import { loadScript, loadStyle } from 'lightning/platformResourceLoader';
import jss from "@salesforce/resourceUrl/jss";

// Your Jspreadsheet License
const licenseKey = 'ZDc0MGM3NDdjZWI2NWZmYWFmNTFjOGRlNWFlYzA4ODkzMTk5ZjhmODliZjgyMmU5ZDYxZGUyZjgwNmJhZWRjOWE4MmI3MWFkNTY1ZDU4ZWQ5ZDI1MDBjYTIxNTM2YzhmMjVlNTA4M2FhOTE3ZGExMmEwMzdlZmFmMTY2MGVkMjYsZXlKamJHbGxiblJKWkNJNklpSXNJbTVoYldVaU9pSktjM0J5WldGa2MyaGxaWFFpTENKa1lYUmxJam94TnpNeU1qWTNNVEl6TENKa2IyMWhhVzRpT2xzaWFuTndjbVZoWkhOb1pXVjBMbU52YlNJc0ltTnZaR1Z6WVc1a1ltOTRMbWx2SWl3aWFuTm9aV3hzTG01bGRDSXNJbU56WWk1aGNIQWlMQ0ozWldJaUxDSnNiMk5oYkdodmMzUWlYU3dpY0d4aGJpSTZJak0wSWl3aWMyTnZjR1VpT2xzaWRqY2lMQ0oyT0NJc0luWTVJaXdpZGpFd0lpd2lkakV4SWl3aVkyaGhjblJ6SWl3aVptOXliWE1pTENKbWIzSnRkV3hoSWl3aWNHRnljMlZ5SWl3aWNtVnVaR1Z5SWl3aVkyOXRiV1Z1ZEhNaUxDSnBiWEJ2Y25SbGNpSXNJbUpoY2lJc0luWmhiR2xrWVhScGIyNXpJaXdpYzJWaGNtTm9JaXdpY0hKcGJuUWlMQ0p6YUdWbGRITWlMQ0pqYkdsbGJuUWlMQ0p6WlhKMlpYSWlMQ0p6YUdGd1pYTWlYU3dpWkdWdGJ5STZkSEoxWlgwPQ==';

export default class Spreadsheet extends LightningElement {
    isCmptInitialized = false;

    renderedCallback() {
        if (this.isCmptInitialized) {
            return;
        }
        this.isCmptInitialized = true;

        try {
            Promise.all([
                loadStyle(this, jss + '/jsuites.css'),
                loadStyle(this, jss + '/jspreadsheet.css'),
                loadScript(this, jss + '/jsuites.js'),
                loadScript(this, jss + '/jspreadsheet.js'),
                loadScript(this, jss + '/jszip.js'),
                loadScript(this, jss + '/render.js')
            ]).then(() => {
                this.create();
            })
        } catch (error) {
            console.log('error',error);
        }
    }

    create() {
        // Declare the license
        jspreadsheet.setLicense({
            clientId: 'your-client-id',
            licenseKey: licenseKey,
        });
        // Declare the render extension
        jspreadsheet.setExtensions({ render });

        // Create the spreadsheet
        this.spreadsheet = jspreadsheet(this.template.firstChild, {
            toolbar: true,
            worksheets: [
                {
                    minDimensions: [10,10],
                    tableOverflow: true,
                    tableWidth: 600,
                    tableHeight: 300,
                    data: [[1,2,4]],
                    freezeColumnControl: true,
                    freezeRowControl: true,
                    filters: true
                }
            ],
            root: this.template.firstChild,
        });
    }
}

Style Web Component File

You can use your component CSS file to include Material icons to correctly render the icons on the context menu, filters, and toolbar.

/* fallback */
@font-face {
  font-family: 'Material Icons';
  font-style: normal;
  font-weight: 400;
  src: url(https://fonts.gstatic.com/s/materialicons/v142/flUhRq6tzZclQEJ-Vdg-IuiaDsNc.woff2) format('woff2');
}

.material-icons {
  font-family: 'Material Icons';
  font-weight: normal;
  font-style: normal;
  font-size: 24px;
  line-height: 1;
  letter-spacing: normal;
  text-transform: none;
  display: inline-block;
  white-space: nowrap;
  word-wrap: normal;
  direction: ltr;
  -webkit-font-feature-settings: 'liga';
  -webkit-font-smoothing: antialiased;
}

Meta File

You need to make sure your meta file has the following content.

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



Session Settings

Enabling the Use Lightning Web Security for Lightning Web Components and Aura Components option will ensure your component renders correctly in your Salesforce developer account.

Studio

Final steps

Now, you can create your App on your Salesforce developer account and embed your web component on a new page.

Edit this page on GitHub