Form Mode
A protected sheet used as a fill-in form: locked layout, one-click editing, placeholder hints, and Enter/Tab walking the input cells — list validation opens from the keyboard too.
How it works
A business app often uses a spreadsheet as a form, not as a spreadsheet: the layout is fixed, most cells are protected, and the user only fills values into a handful of boxes. v1.6.0 covers that shape with four worksheet switches. This demo is an application form — click a box once and type; Enter carries you to the end. Available in both editions.
ws.clickToEdit— a single click opens the editor with the caret at the end, and the pointer shows an I-beam over editable cells. Protected cells and checkbox-style cell types are unaffectedws.formNavigation— Enter and Tab commit and move to the next input cell (Shift reverses), using a reading-order scan that skips protected cells, hidden lines and merge interiors, and wraps at the end of a rowws.layoutLocked— header drag-resize, double-click auto-fit and whole-line reorder are all off. Sizing from the API still works, so your template code is unaffectedsetCellPlaceholder()draws the grey hints. They appear only while the cell is empty and are never part of the value — not in PDF, print, xlsx or JSON- On ご希望プラン, press ↓ while editing or Alt+↓ while selected to open the list from the keyboard; the list opens at the current value, so ↓ then Enter is a two-keystroke pick
- “Custom tab order” installs a
setFormNavigator()that skips the optional Notes field — returning null stops at the end of the form - None of these switches is persisted, so re-apply them after
loadJson()orreset()
Key APIs used
ws.clickToEdit = true A single click opens the editor, caret at the end, with an I-beam cursor over editable cells
ws.formNavigation = true Enter / Tab commit and move to the next input cell in reading order; Shift reverses
ws.layoutLocked = true Stop header drag-resize, double-click auto-fit and line reorder; API sizing still works
ws.setCellPlaceholder(r, c, text) Hint text drawn only while the cell is empty — never in the value, PDF, print, xlsx or JSON
ws.setFormNavigator(fn) A host-defined tab order; return null to stop at the end of the form, or null the fn to restore the scan
ws.range('C4').setLock('unlocked') With ws.protected = true, this is what makes a cell an input cell
Source Code
Related Documentation
Related Demos
Cell Types Dashboard
Progress bars, star ratings, sparkline charts, checkboxes, and hyperlinks — all rendered inside spreadsheet cells.
Data Filter & Sort
Click column header dropdowns to filter and sort rows. Switch between 300, 1K, and 10K rows to test performance.
Cell Styles
Font styles, colors, backgrounds, text alignment, and border options — a showcase of the Cell Style API.