Spreadsheet to HTML form

Spreadsheet to HTML form

JSS Forms is a premium extension that enables you to create an HTML form directly from the spreadsheet 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

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 Form From my Spreadsheet

Create a new row in the spreadsheet with the form data

<html>
<script src="https://jspreadsheet.com/v11/jspreadsheet.js"></script>
<link rel="stylesheet" href="https://jspreadsheet.com/v11/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" />
<script src="https://cdn.jsdelivr.net/npm/@jspreadsheet/forms/dist/index.min.js"></script>

<div id="spreadsheet1"></div>

<p><input type='button' value='Create form' id="btn1"></p>

<div id="spreadsheet2"></div>

<script>
let create = function() {
    // Spreadsheet instance of the first worksheet
    let worksheet = jss[0];

    // Create form from the spreadsheet
    jspreadsheet.forms(document.getElementById('spreadsheet2'), {
        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('YTM0YjdkOTU2Yjc3Yjk5ZTI3MTBjZDczNzEzMzVlMjVhZWMxZGJkNzUzYTEyY2MwNjcwNGJkZjY5ZDAxZDk4Y2JlOGY0ZTViNTU0ZThlYmZlZjk2NTlkMDMyOWRkM2U4OTliYmM2NDMzMzA4M2IxYWExNThlNDZmM2EwYmNiZjgsZXlKamJHbGxiblJKWkNJNklpSXNJbTVoYldVaU9pSktjM0J5WldGa2MyaGxaWFFpTENKa1lYUmxJam94TnpFME1qZzNNemswTENKa2IyMWhhVzRpT2xzaWFuTndjbVZoWkhOb1pXVjBMbU52YlNJc0ltTnZaR1Z6WVc1a1ltOTRMbWx2SWl3aWFuTm9aV3hzTG01bGRDSXNJbU56WWk1aGNIQWlMQ0ozWldJaUxDSnNiMk5oYkdodmMzUWlYU3dpY0d4aGJpSTZJak0wSWl3aWMyTnZjR1VpT2xzaWRqY2lMQ0oyT0NJc0luWTVJaXdpZGpFd0lpd2lkakV4SWl3aVkyaGhjblJ6SWl3aVptOXliWE1pTENKbWIzSnRkV3hoSWl3aWNHRnljMlZ5SWl3aWNtVnVaR1Z5SWl3aVkyOXRiV1Z1ZEhNaUxDSnBiWEJ2Y25SbGNpSXNJbUpoY2lJc0luWmhiR2xrWVhScGIyNXpJaXdpYzJWaGNtTm9JaXdpY0hKcGJuUWlMQ0p6YUdWbGRITWlMQ0pqYkdsbGJuUWlMQ0p6WlhKMlpYSWlMQ0p6YUdGd1pYTWlYU3dpWkdWdGJ5STZkSEoxWlgwPQ==');

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

// Create the spreadsheet
let jss = jspreadsheet(document.getElementById('spreadsheet1'), {
    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',
            },
        ]
    }],
});

document.getElementById("btn1").onclick = create
</script>
</html>

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

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

// 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()} />
        </>
    );
}

<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";

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

// 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>

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

import "jsuites/dist/jsuites.css";
import "jspreadsheet/dist/jspreadsheet.css";

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

// 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;
            }
        });
    }
}

Edit this page on GitHub