Salesforce

Overview

This section guides developers in 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 used within any Salesforce environment, including the following distribution scenarios:

Internal use within a customer's own Salesforce organization.
Distribution via the Salesforce AppExchange, including under software-as-a-service (SaaS) deployment models.
Embedded distribution in customer-deployed applications, including bespoke or customised deployments delivered by Salesforce consulting partners as part of their professional services.

A valid Ultimate license is required for distribution scenarios. End customers of a licensee do not require a separate Jspreadsheet license, provided that Jspreadsheet is embedded as a component of the licensee's application and is not made available to end customers as a standalone product.

For compliance reviews or formal written confirmation, contact contact@jspreadsheet.com.

Useful References

Tutorial

Upload the Static Files

Download the Jspreadsheet Bundle.
Log into your Salesforce development account.
Click on the icon gear on the right side them Setup
Search for Static Resources.
Create a new resource.
Upload the downloaded Jspreadsheet Bundle.

Lightning Web Component

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

Click on create a new web component.

Fill the form with the following information.

Your web component will have four files, and you will need to update the content of those files as follows:

spreadsheet.js
spreadsheet.css
spreadsheet.html
spreadsheet.js-meta.xml

HTML Web Component File

Your basic HTML file should contain the following properties including your clientId and licenseKey.

<template lwc:render-mode="shadow">
    <div lwc:dom="manual" data-client-id="356a...428ab" data-license="NjUyOTZj...hYMD0="></div>
</template>

JavaScript Web Component File

Create your main JavaScript LWC component.

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

export default class Spreadsheet extends LightningElement {
    isCmptInitialized = false;

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

        // Start loading in sequence
        loadStyle(this, `${bundle}/style.css`)
            .then(() => loadScript(this, `${bundle}/index.js`))
            .then(() => {
                this.create();
            })
            .catch((error) => {
                console.error('Error loading Jspreadsheet resources:', error.message);
            });
    }

    create() {
        // Extract the package you need ({ jspreadsheet, bar, comments, format, charts, formula, parser, render, search, shapes, validations })
        const { jspreadsheet, render, bar } = packages;        
        // Read from data attributes and apply the license
        const container = this.template.firstChild;
        // License information from the HTML
        const licenseKey = container.dataset.license;
        const clientId = container.dataset.clientId;
        // Define the license
        jspreadsheet.setLicense({ licenseKey, clientId });
        // Declare the render extension
        jspreadsheet.setExtensions({ render, bar });
        // Create the spreadsheet
        this.spreadsheet = jspreadsheet(this.template.firstChild, {
            bar: true,
            toolbar: true,
            tableOverflow: true,
            tableWidth: 600,
            tableHeight: 300,
            worksheets: [
                {
                    minDimensions: [10,10],
                    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.

Lightning App Builder

Search for Lightning App Builder;
Create New View

Final steps

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