
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>