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/[email protected]/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/[email protected]/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.

More about image managment