Intrasheets
This section explores Intrasheets' flexibility for building and customizing the front end, including custom layouts, interactive controls, and integration of spreadsheets with applications and custom functions.
Documentation
Install
NPM
npm install intrasheets;
CDN
To use the CDN, load Intrasheets and its dependencies as shown below.
<!-- Dependencies -->
<link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet" />
<link href="https://cdn.jsdelivr.net/npm/jspreadsheet@11/dist/jspreadsheet.min.css" rel="stylesheet" />
<link href="https://cdn.jsdelivr.net/npm/jsuites@5/dist/jsuites.min.css" rel="stylesheet" />
<script type="text/javascript" src="https://cdn.jsdelivr.net/npm/socket.io-client@4.7.5/dist/socket.io.min.js"></script>
<script type="text/javascript" src="https://cdn.jsdelivr.net/npm/pdf-lib/dist/pdf-lib.js"></script>
<script type="text/javascript" src="https://cdn.jsdelivr.net/npm/jspreadsheet@11/dist/index.min.js"></script>
<script type="text/javascript" src="https://cdn.jsdelivr.net/npm/jsuites@5/dist/index.min.js"></script>
<!-- Intrasheets -->
<link href="https://cdn.jsdelivr.net/npm/intrasheets@3/dist/style.min.css" rel="stylesheet" />
<script type="text/javascript" src="https://cdn.jsdelivr.net/npm/intrasheets@3/dist/index.min.js"></script>
Intrasheets Methods
The following properties are available:
| Property | Description |
|---|---|
load |
Alias for jspreadsheet(DOM, options). |
list |
Calls the API to retrieve a list of spreadsheets created by the user defined in the JWT token. |
Settings
The following properties can be configured to customize your Intrasheets interface.
| Property | Description |
|---|---|
client: object |
Configuration settings for the server connection |
bar?: object |
Settings for the edition bar extension |
comments?: object |
Settings for the comments extension |
google? object |
Settings for google sheets importer |
Client
| Property | Description |
|---|---|
url: string |
URL of your Intrasheets server. |
auth?: object |
Authentication attributes shared with the server, typically including token, invitation, and any custom attributes. |
onerror?: function |
Function to handle error messages displayed to the user. |
onbeforeloadimage?: function |
Event for customizing image loading behavior. |
Google Sheets API
| Method | Description |
|---|---|
clientId?: string |
Google Sheets API Client ID |
apiKey?: string |
Google Sheets API key |
errorUri?: string |
URI for handling API errors |
redirectUri?: string |
Redirect URI for the API |
Examples
Using NPM
A simple example using
<link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet" />
<link href="https://cdn.jsdelivr.net/npm/jspreadsheet@11/dist/jspreadsheet.min.css" rel="stylesheet" />
<link href="https://cdn.jsdelivr.net/npm/jsuites@5/dist/jsuites.min.css" rel="stylesheet" />
<script type="text/javascript" src="https://cdn.jsdelivr.net/npm/socket.io-client@4.7.5/dist/socket.io.min.js"></script>
<script type="text/javascript" src="https://cdn.jsdelivr.net/npm/pdf-lib/dist/pdf-lib.js"></script>
<script type="text/javascript" src="https://cdn.jsdelivr.net/npm/jspreadsheet@11/dist/index.min.js"></script>
<script type="text/javascript" src="https://cdn.jsdelivr.net/npm/jsuites@5/dist/jsuites.min.js"></script>
<!-- Intrasheets -->
<link href="https://cdn.jsdelivr.net/npm/intrasheets@3/dist/style.min.css" rel="stylesheet" />
<script type="text/javascript" src="https://cdn.jsdelivr.net/npm/intrasheets@3/dist/index.min.js"></script>
<div id="root"></div>
<script>
function Sheets(token, invitation) {
// Set your JSS license key (The following key only works for one day)
jspreadsheet.setLicense(license);
// Register the extension
jspreadsheet.setExtensions({ intrasheets });
// Start intrasheets
intrasheets({
google: {
clientId: 'yourClientId.apps.googleusercontent.com',
apiKey: 'yourApiKey',
redirectUri: 'http://localhost:8000/sheets',
errorUri: 'http://localhost:8000/sheets/error',
},
bar: {
suggestions: true
},
client: {
url: 'http://localhost:3009',
auth: {
token: token,
invitation: invitation
},
onerror: function (e) {
console.error(e);
},
onbeforeloadimage: function (worksheet, img, options) {
// Image should be loaded from the API
if (options.src.includes('/api')) {
// Intercept the images load to get those from the S3
fetch('http://localhost:3009' + options.src, {
headers: {
'Authorization': `Bearer ${token},${invitation}`
}
})
.then(response => {
// Convert the response to a blob
return response.blob();
})
.then(blob => {
// Create and return a URL for the blob
img.src = URL.createObjectURL(blob);
});
// Do not load images until the download is ready
return false;
}
},
}
})
// Start application
if (guid && guid.length === 36) {
// Open the spreadsheet
jspreadsheet(document.getElementById('root'), {
guid: guid
});
} else {
// List all spreadsheets save for one user
intrasheets.list(document.getElementById('root'));
}
}
</script>
Using the CDN
const jspreadsheet = require('jspreadsheet');
const intrasheets = require('intrasheets');
require('jsuites/dist/jsuites.css');
require('jspreadsheet/dist/jspreadsheet.css');
require('intrasheets/dist/style.css');
const license = 'yourLicenseKey';
function Sheets(token, invitation) {
// Set your JSS license key (The following key only works for one day)
jspreadsheet.setLicense(license);
// Register the extension
jspreadsheet.setExtensions({ intrasheets });
// Start intrasheets
intrasheets({
google: {
clientId: 'yourClientId.apps.googleusercontent.com',
apiKey: 'yourApiKey',
redirectUri: 'http://localhost:8000/sheets',
errorUri: 'http://localhost:8000/sheets/error',
},
bar: {
suggestions: true
},
client: {
url: 'http://localhost:3009',
auth: {
token: token,
invitation: invitation
},
onerror: function (e) {
console.error(e);
},
onbeforeloadimage: function (worksheet, img, options) {
// Image should be loaded from the API
if (options.src.includes('/api')) {
// Intercept the images load to get those from the S3
fetch('http://localhost:3009' + options.src, {
headers: {
'Authorization': `Bearer ${token},${invitation}`
}
})
.then(response => {
// Convert the response to a blob
return response.blob();
})
.then(blob => {
// Create and return a URL for the blob
img.src = URL.createObjectURL(blob);
});
// Do not load images until the download is ready
return false;
}
},
}
})
// Start application
if (guid && guid.length === 36) {
// Open the spreadsheet
jspreadsheet(document.getElementById('root'), {
guid: guid
});
} else {
// List all spreadsheets save for one user
intrasheets.list(document.getElementById('root'));
}
}
More information
Authorization
Intrasheets Server allows full customization of authorization by passing properties to the server through the client.auth object. The standard setup uses tokens and invitations, but developers can adapt this to handle any authentication data processed through server-side events for complete flexibility.
More about the server authentication
Custom image loader
The example above uses the client.onbeforeloadimage event to load images stored externally, such as on S3, ensuring they are loaded correctly.