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 theonbeforesave
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 optionsUsing 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; } }); } }