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
- Download the Jspreadsheet Package.
- Log into your Salesforce development account.
- Search for Static Resources.
- Create a new resource.
- Upload the downloaded Jspreadsheet Package.
Lightning Web Component
To create a new web component we will use the Lightning Studio Chrome Extension, following the steps:
- Login to your salesforce developer account them click on the extension.
- 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 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 = 'ZWY0ODY5ZjIzMGYyZTAzMzdmODkwMWY1MGI4YTE3MDhhMzczNjk4YThlMTcxMDZkNWRiZTlkNTM2MzllOTM3ZWJiMmFkNDRjZmQzOTU5MmJiZTgwMjZhOGM4YTZmYTYzYTYzNDAxNDlmMDA2OGRjZDRhNDI5NDc2MmY5MDliZjgsZXlKamJHbGxiblJKWkNJNklpSXNJbTVoYldVaU9pSktjM0J5WldGa2MyaGxaWFFpTENKa1lYUmxJam94TnpJNE1qazJPVFV4TENKa2IyMWhhVzRpT2xzaWFuTndjbVZoWkhOb1pXVjBMbU52YlNJc0ltTnZaR1Z6WVc1a1ltOTRMbWx2SWl3aWFuTm9aV3hzTG01bGRDSXNJbU56WWk1aGNIQWlMQ0ozWldJaUxDSnNiMk5oYkdodmMzUWlYU3dpY0d4aGJpSTZJak0wSWl3aWMyTnZjR1VpT2xzaWRqY2lMQ0oyT0NJc0luWTVJaXdpZGpFd0lpd2lkakV4SWl3aVkyaGhjblJ6SWl3aVptOXliWE1pTENKbWIzSnRkV3hoSWl3aWNHRnljMlZ5SWl3aWNtVnVaR1Z5SWl3aVkyOXRiV1Z1ZEhNaUxDSnBiWEJ2Y25SbGNpSXNJbUpoY2lJc0luWmhiR2xrWVhScGIyNXpJaXdpYzJWaGNtTm9JaXdpY0hKcGJuUWlMQ0p6YUdWbGRITWlMQ0pqYkdsbGJuUWlMQ0p6WlhKMlpYSWlMQ0p6YUdGd1pYTWlYU3dpWkdWdGJ5STZkSEoxWlgwPQ==';
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')
]).then(() => {
this.create();
})
} catch (error) {
console.log('error',error);
}
}
create() {
// Declare the license
jspreadsheet.setLicense(licenseKey);
// 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.
Final steps
Now, you can create your App
on your Salesforce developer account and embed your web component on a new page.