Products

Spreadsheet to form

JSS forms is a premium extension to create an HTML form directly from your JSS spreadsheet column definitions. It is possible to send the data from the form to a remote server, create a new row in the spreadsheet, or even define a custom behavior using onbeforesave.

Author

Jspreadsheet Pro Team.

License

Available on the premium or enterprise plan.

Configuration

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.

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

Source code

<html>
<script src="https://jspreadsheet.com/v9/jspreadsheet.js"></script>
<link rel="stylesheet" href="https://jspreadsheet.com/v9/jspreadsheet.css" type="text/css" />
<script src="https://jsuites.net/v4/jsuites.js"></script>
<link rel="stylesheet" href="https://jsuites.net/v4/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(Object.values(data));
            // Stop default behavior
            return false;
        }
    });
}

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

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