Products

Spreadsheet to form

JSS Forms is a premium extension that enables you to create an HTML form directly from the column definitions in your JSS spreadsheet. With this tool, you can send form data to a remote server, create new spreadsheet rows, or define custom behaviour using the onbeforesave function.

Documentation

Settings

The following options are available to customize the plugin's behavior.

Method	Description
url?: String	The URL where the data should be sent.
logo?: String	The URL of the form logo.
instructions?: String	Text with the instructions for the user. `Default: 'Please fill the form below'`
completeMessage?: String	Text the users after submitting the form. Default: `Default: 'Thank you for your time'`
columns?: Array	Form field definitions, extracted from a valid JSS spreadsheet.
onbeforesave?: Function	Intercept the save to change or cancel the user action.
onsave?: Function	Will trigger the method after the form is submitted by the user.

Installation

Please choose one of the following options

Using NPM

npm install @jspreadsheet/forms

Using a CDN

<script src="https://cdn.jsdelivr.net/npm/@jspreadsheet/forms/dist/index.min.js"></script>

Example

The following example creates an HTML form from the JSS spreadsheet and the data will be added to a spreadsheet. But, you can send this data to a server for example.

Create a new row in the spreadsheet with the form data

JavaScript example

<html>
<script src="https://jspreadsheet.com/v10/jspreadsheet.js"></script>
<link rel="stylesheet" href="https://jspreadsheet.com/v10/jspreadsheet.css" type="text/css" />
<script src="https://jsuites.net/v5/jsuites.js"></script>
<link rel="stylesheet" href="https://jsuites.net/v5/jsuites.css" type="text/css" />
<link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Material+Icons" />

<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@jsuites/css/dist/style.min.css" type="text/css" />
<script src="https://cdn.jsdelivr.net/npm/@jspreadsheet/forms/dist/index.min.js"></script>

<div id="spreadsheet"></div>

<input type='button' value='Create form' onclick='create()'>

<div id="form-1"></div>

<script>
var create = function() {
    // Spreadsheet instance of the first worksheet
    var worksheet = document.getElementById('spreadsheet').jspreadsheet[0];
    // Create form from the spreadsheet
    jspreadsheet.forms(document.getElementById('form-1'), {
        logo: 'https://jspreadsheet.com/jspreadsheet/logo.png',
        columns: worksheet.options.columns,
        onbeforesave: function(el, data) {
            // Get the values
            worksheet.insertRow([{ data: Object.values(data) }]);
            // Stop default behavior
            return false;
        }
    });
}

// Set the license for both plugin and the spreadsheet
jspreadsheet.setLicense('Nzg5NzUzMmNkN2I4MGQ2NDhkMjFkZjg2MTk3NzM1NThhN2JhZDlmYTQyYWUzMzhlYjdhMDdiNzUyNGRkNjQ5OTNlZDE4ZDU5NjQ4OGQwNDg2YzY3MzMwOGMwNGExODMwMWQyNTUyNzRlNGE2NmEyYmQzOGExYmFmNjNmNDJmOWYsZXlKdVlXMWxJam9pU25Od2NtVmhaSE5vWldWMElpd2laR0YwWlNJNk1UWTVOakkwTURBek9Dd2laRzl0WVdsdUlqcGJJbXB6Y0hKbFlXUnphR1ZsZEM1amIyMGlMQ0pqYjJSbGMyRnVaR0p2ZUM1cGJ5SXNJbXB6YUdWc2JDNXVaWFFpTENKamMySXVZWEJ3SWl3aWQyVmlJaXdpYkc5allXeG9iM04wSWwwc0luQnNZVzRpT2lJek5DSXNJbk5qYjNCbElqcGJJblkzSWl3aWRqZ2lMQ0oyT1NJc0luWXhNQ0lzSW1Ob1lYSjBjeUlzSW1admNtMXpJaXdpWm05eWJYVnNZU0lzSW5CaGNuTmxjaUlzSW5KbGJtUmxjaUlzSW1OdmJXMWxiblJ6SWl3aWFXMXdiM0owSWl3aVltRnlJaXdpZG1Gc2FXUmhkR2x2Ym5NaUxDSnpaV0Z5WTJnaUxDSndjbWx1ZENJc0luTm9aV1YwY3lKZExDSmtaVzF2SWpwMGNuVmxmUT09');

// Set the extensions
jspreadsheet.setExtensions({ forms });

// Create the spreadsheet
jspreadsheet(document.getElementById('spreadsheet'), {
    worksheets: [{
        minDimensions: [ 6, 8 ],
        columns: [
            {
                title: 'Name'
            },
            {
                title: 'Birthday',
                type: 'calendar'
            },
            {
                title: 'Team color',
                type: 'color'
            },
            {
                title: 'Department',
                type: 'dropdown',
                source: ['Accounts','IT','Marketing'],
                width: '150px',
            },
            {
                title: 'Rating',
                type: 'rating',
            },
            {
                title: 'Reviewed',
                type: 'checkbox',
            },
        ]
    }],
});
</script>
</html>

React example

import React, { useRef } from "react";
import { Spreadsheet, Worksheet, jspreadsheet } from "@jspreadsheet/react";
import forms from "@jspreadsheet/forms";

import "/node_modules/@jsuites/css/dist/style.css";

// Define the grid license
const license = 'Nzg5NzUzMmNkN2I4MGQ2NDhkMjFkZjg2MTk3NzM1NThhN2JhZDlmYTQyYWUzMzhlYjdhMDdiNzUyNGRkNjQ5OTNlZDE4ZDU5NjQ4OGQwNDg2YzY3MzMwOGMwNGExODMwMWQyNTUyNzRlNGE2NmEyYmQzOGExYmFmNjNmNDJmOWYsZXlKdVlXMWxJam9pU25Od2NtVmhaSE5vWldWMElpd2laR0YwWlNJNk1UWTVOakkwTURBek9Dd2laRzl0WVdsdUlqcGJJbXB6Y0hKbFlXUnphR1ZsZEM1amIyMGlMQ0pqYjJSbGMyRnVaR0p2ZUM1cGJ5SXNJbXB6YUdWc2JDNXVaWFFpTENKamMySXVZWEJ3SWl3aWQyVmlJaXdpYkc5allXeG9iM04wSWwwc0luQnNZVzRpT2lJek5DSXNJbk5qYjNCbElqcGJJblkzSWl3aWRqZ2lMQ0oyT1NJc0luWXhNQ0lzSW1Ob1lYSjBjeUlzSW1admNtMXpJaXdpWm05eWJYVnNZU0lzSW5CaGNuTmxjaUlzSW5KbGJtUmxjaUlzSW1OdmJXMWxiblJ6SWl3aWFXMXdiM0owSWl3aVltRnlJaXdpZG1Gc2FXUmhkR2x2Ym5NaUxDSnpaV0Z5WTJnaUxDSndjbWx1ZENJc0luTm9aV1YwY3lKZExDSmtaVzF2SWpwMGNuVmxmUT09';

// Define the grid extensions
const extensions = { forms };

export default function App() {
    // Spreadsheet array of worksheets
    const spreadsheet = useRef();
    // Form
    const form = useRef();
    // Columns
    const columns = [
        { title: 'Name' },
        { title: 'Birthday', type: 'calendar' },
        { title: 'Team color', type: 'color' },
        { title: 'Department', type: 'dropdown', source: ['Accounts','IT','Marketing'] },
        { title: 'Rating', type: 'rating', }, { title: 'Reviewed', type: 'checkbox', }
    ];
    // Create form
    const create = () => {
        // First worksheet instance
        let worksheet = spreadsheet.current[0];
        // Create form from the spreadsheet
        jspreadsheet.forms(form.current, {
            logo: 'https://jspreadsheet.com/jspreadsheet/logo.png',
            columns: worksheet.options.columns,
            onbeforesave: function(el, data) {
                // Get the values
                worksheet.insertRow([{ data: Object.values(data) }]);
                // Stop default behavior
                return false;
            }
        });
    }
    // Render component
    return (
        <>
            <Spreadsheet ref={spreadsheet} license={license} extensions={extensions}>
                <Worksheet columns={columns} />
            </Spreadsheet>
            <div ref={form}></div>
            <input type="button" value="Create form" onClick={() => create()} />
        </>
    );
}

Vue example

<template>
    <Spreadsheet ref="spreadsheet" :license="license" :extensions="extensions">
        <Worksheet :minDimensions="[10,10]" />
    </Spreadsheet>
    <div ref="form"></div>
    <input type="button" value="Create form" @click="create" />
</template>

<script>
import { Spreadsheet, Worksheet, jspreadsheet } from "@jspreadsheet/vue";
import forms from "@jspreadsheet/forms";

import "/node_modules/@jsuites/css/dist/style.css";

// Define the grid license
const license = 'Nzg5NzUzMmNkN2I4MGQ2NDhkMjFkZjg2MTk3NzM1NThhN2JhZDlmYTQyYWUzMzhlYjdhMDdiNzUyNGRkNjQ5OTNlZDE4ZDU5NjQ4OGQwNDg2YzY3MzMwOGMwNGExODMwMWQyNTUyNzRlNGE2NmEyYmQzOGExYmFmNjNmNDJmOWYsZXlKdVlXMWxJam9pU25Od2NtVmhaSE5vWldWMElpd2laR0YwWlNJNk1UWTVOakkwTURBek9Dd2laRzl0WVdsdUlqcGJJbXB6Y0hKbFlXUnphR1ZsZEM1amIyMGlMQ0pqYjJSbGMyRnVaR0p2ZUM1cGJ5SXNJbXB6YUdWc2JDNXVaWFFpTENKamMySXVZWEJ3SWl3aWQyVmlJaXdpYkc5allXeG9iM04wSWwwc0luQnNZVzRpT2lJek5DSXNJbk5qYjNCbElqcGJJblkzSWl3aWRqZ2lMQ0oyT1NJc0luWXhNQ0lzSW1Ob1lYSjBjeUlzSW1admNtMXpJaXdpWm05eWJYVnNZU0lzSW5CaGNuTmxjaUlzSW5KbGJtUmxjaUlzSW1OdmJXMWxiblJ6SWl3aWFXMXdiM0owSWl3aVltRnlJaXdpZG1Gc2FXUmhkR2x2Ym5NaUxDSnpaV0Z5WTJnaUxDSndjbWx1ZENJc0luTm9aV1YwY3lKZExDSmtaVzF2SWpwMGNuVmxmUT09';

// Define the grid extensions
const extensions = { forms };

export default {
    components: {
        Spreadsheet,
        Worksheet,
    },
    methods: {
        create() {
            // First worksheet instance
            let worksheet = this.$refs.spreadsheet.current[0]);
            // Create form from the spreadsheet
            jspreadsheet.forms(this.$refs.form.current, {
                logo: 'https://jspreadsheet.com/jspreadsheet/logo.png',
                columns: worksheet.options.columns,
                onbeforesave: function(el, data) {
                    // Get the values
                    worksheet.insertRow([{ data: Object.values(data) }]);
                    // Stop default behavior
                    return false;
                }
            });
        }
    },
    data() {
        const spreadsheet = ref(null);
        const form = ref(null);

        // Columns
        const columns = [
            { title: 'Name' },
            { title: 'Birthday', type: 'calendar' },
            { title: 'Team color', type: 'color' },
            { title: 'Department', type: 'dropdown', source: ['Accounts','IT','Marketing'] },
            { title: 'Rating', type: 'rating', }, { title: 'Reviewed', type: 'checkbox', }
        ];

        return {
            spreadsheet,
            columns,
            license,
            extensions,
        };
    }
}
</script>

Angular example

import { Component, ViewChild, ElementRef } from "@angular/core";
import * as jspreadsheet from "jspreadsheet";
import * as form from "@jspreadsheet/form";

import "/node_modules/jsuites/dist/jsuites.css";
import "/node_modules/@jsuites/css/dist/style.css";
import "/node_modules/jspreadsheet/dist/jspreadsheet.css";

// Set your JSS license key (The following key only works for one day)
jspreadsheet.setLicense('Nzg5NzUzMmNkN2I4MGQ2NDhkMjFkZjg2MTk3NzM1NThhN2JhZDlmYTQyYWUzMzhlYjdhMDdiNzUyNGRkNjQ5OTNlZDE4ZDU5NjQ4OGQwNDg2YzY3MzMwOGMwNGExODMwMWQyNTUyNzRlNGE2NmEyYmQzOGExYmFmNjNmNDJmOWYsZXlKdVlXMWxJam9pU25Od2NtVmhaSE5vWldWMElpd2laR0YwWlNJNk1UWTVOakkwTURBek9Dd2laRzl0WVdsdUlqcGJJbXB6Y0hKbFlXUnphR1ZsZEM1amIyMGlMQ0pqYjJSbGMyRnVaR0p2ZUM1cGJ5SXNJbXB6YUdWc2JDNXVaWFFpTENKamMySXVZWEJ3SWl3aWQyVmlJaXdpYkc5allXeG9iM04wSWwwc0luQnNZVzRpT2lJek5DSXNJbk5qYjNCbElqcGJJblkzSWl3aWRqZ2lMQ0oyT1NJc0luWXhNQ0lzSW1Ob1lYSjBjeUlzSW1admNtMXpJaXdpWm05eWJYVnNZU0lzSW5CaGNuTmxjaUlzSW5KbGJtUmxjaUlzSW1OdmJXMWxiblJ6SWl3aWFXMXdiM0owSWl3aVltRnlJaXdpZG1Gc2FXUmhkR2x2Ym5NaUxDSnpaV0Z5WTJnaUxDSndjbWx1ZENJc0luTm9aV1YwY3lKZExDSmtaVzF2SWpwMGNuVmxmUT09');

// Extensions
jspreadsheet.setExtensions({ form });

@Component({
  selector: "app-root",
  template: `<div #spreadsheet></div>
    <div #form></div>
    <input type="button" value="Create form" (click)="create()" />`
})
export class AppComponent {
    @ViewChild("spreadsheet") spreadsheet: ElementRef;
    @ViewChild("form") spreadsheet: ElementRef;
    // Worksheets
    worksheets: jspreadsheet.worksheetInstance[];
    // Create a new data grid
    ngAfterViewInit() {
        // Create spreadsheet
        this.worksheets = jspreadsheet(this.spreadsheet.nativeElement, {
            worksheets: [{
                minDimensions: [ 6, 8 ],
                columns: [
                    {
                        title: 'Name'
                    },
                    {
                        title: 'Birthday',
                        type: 'calendar'
                    },
                    {
                        title: 'Team color',
                        type: 'color'
                    },
                    {
                        title: 'Department',
                        type: 'dropdown',
                        source: ['Accounts','IT','Marketing'],
                        width: '150px',
                    },
                    {
                        title: 'Rating',
                        type: 'rating',
                    },
                    {
                        title: 'Reviewed',
                        type: 'checkbox',
                    },
                ]
            }],
        });
    }
    create() {
        // First worksheet instance
        let worksheet = this.worksheets[0];
        // Create form from the spreadsheet
        jspreadsheet.forms(this.form, {
            logo: 'https://jspreadsheet.com/jspreadsheet/logo.png',
            columns: worksheet.options.columns,
            onbeforesave: function(el, data) {
                // Get the values
                worksheet.insertRow([{ data: Object.values(data) }]);
                // Stop default behavior
                return false;
            }
        });
    }
}