Documentationkeyboard_arrow_rightSalesforce

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 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 Bundle.
  2. Log into your Salesforce development account.
  3. Click on the icon gear on the right side them Setup
  4. Search for Static Resources.
  5. Create a new resource.
  6. Upload the downloaded Jspreadsheet Bundle.

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, then click on the extension.
lightning-studio-extension
  1. Click on create a new web component.
create-web-component
  1. Fill the form with the following information.
create-web-component-2
  1. 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.

sales-force session settings

Lightning App Builder

  1. Search for Lightning App Builder;
  2. Create New View
lightning-studio-extension

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