1040 Tax Form

The following sample shows how you can use SpreadJS spreadsheet to easily create complex interactive data entry and input forms for your JavaScript applications, such as the US Form 1040 Individual Income Tax Return. Typical forms could be from the medical, legal, insurance, education, or financial industries.

The example highlights the locking of cells to prevent editing, vertical text alignment, as well as loading a predefined template using fromJSON.
import { Component, NgModule, enableProdMode } from '@angular/core'; import { BrowserModule } from '@angular/platform-browser'; import { platformBrowserDynamic } from '@angular/platform-browser-dynamic'; import { SpreadSheetsModule } from '@grapecity/spread-sheets-angular'; import GC from '@grapecity/spread-sheets'; import './styles.css'; @Component({ selector: 'app-component', templateUrl: 'src/app.component.html' }) export class AppComponent { hostStyle = { width: '100%', height: '100%', overflow: 'hidden', float: 'left' }; constructor() { } initSpread($event: any) { let spread = $event.spread; let sd = data; if (sd.length > 0) { if (!spread) { return; } spread.suspendPaint(); spread.fromJSON(sd[0]); spread.options.tabStripVisible = false; let sheet = spread.getSheet(0); sheet.options.isProtected = true; sheet.options.gridline = { showHorizontalGridline: false, showVerticalGridline: false }; sheet.getRange(-1, 0, -1, sheet.getColumnCount(GC.Spread.Sheets.SheetArea.rowHeader), GC.Spread.Sheets.SheetArea.rowHeader).visible(false); sheet.getRange(0, -1, sheet.getRowCount(GC.Spread.Sheets.SheetArea.colHeader), -1, GC.Spread.Sheets.SheetArea.colHeader).visible(false); let style = sheet.getStyle(1, 1, GC.Spread.Sheets.SheetArea.viewport); if (style) { style.wordWrap = true; sheet.setStyle(1, 1, style); } style = sheet.getStyle(3, 3, GC.Spread.Sheets.SheetArea.viewport); if (style) { style.wordWrap = true; sheet.setStyle(3, 3, style); } style = sheet.getStyle(7, 1, GC.Spread.Sheets.SheetArea.viewport); if (style) { style.wordWrap = true; sheet.setStyle(7, 1, style); } style = sheet.getStyle(5, 1, GC.Spread.Sheets.SheetArea.viewport); if (style) { style.wordWrap = true; sheet.setStyle(5, 1, style); } style = sheet.getStyle(9, 1, GC.Spread.Sheets.SheetArea.viewport); if (style) { style.wordWrap = true; sheet.setStyle(9, 1, style); } style = sheet.getStyle(15, 1, GC.Spread.Sheets.SheetArea.viewport); if (style) { style.wordWrap = true; sheet.setStyle(15, 1, style); sheet.setStyle(21, 1, style); } style = sheet.getStyle(31, 1, GC.Spread.Sheets.SheetArea.viewport); if (style) { style.wordWrap = true; sheet.setStyle(31, 1, style); } style = sheet.getStyle(37, 1, GC.Spread.Sheets.SheetArea.viewport); if (style) { style.wordWrap = true; sheet.setStyle(37, 1, style); } style = sheet.getStyle(41, 1, GC.Spread.Sheets.SheetArea.viewport); if (style) { style.wordWrap = true; sheet.setStyle(41, 1, style); } style = sheet.getStyle(46, 1, GC.Spread.Sheets.SheetArea.viewport); if (style) { style.wordWrap = true; sheet.setStyle(46, 1, style); } style = sheet.getStyle(17, 22, GC.Spread.Sheets.SheetArea.viewport); if (style) { style.wordWrap = true; sheet.setStyle(17, 22, style); } style = sheet.getStyle(19, 12, GC.Spread.Sheets.SheetArea.viewport); if (style) { style.wordWrap = true; sheet.setStyle(19, 12, style); sheet.setStyle(19, 16, style); sheet.setStyle(19, 18, style); } style = sheet.getStyle(8, 21, GC.Spread.Sheets.SheetArea.viewport); if (style) { style.wordWrap = true; sheet.setStyle(8, 21, style); } style = sheet.getStyle(10, 21, GC.Spread.Sheets.SheetArea.viewport); if (style) { style.wordWrap = true; sheet.setStyle(10, 21, style); } style = sheet.getStyle(13, 1, GC.Spread.Sheets.SheetArea.viewport); if (style) { style.font = "normal bold 14px Calibri"; sheet.setStyle(13, 1, style); sheet.setStyle(17, 1, style); sheet.setStyle(28, 1, style); } style = sheet.getStyle(46, 1, GC.Spread.Sheets.SheetArea.viewport); if (style) { style.font = "normal bold 14px Calibri"; style.wordWrap = true; sheet.setStyle(46, 1, style); } spread.resumePaint(); } } } @NgModule({ imports: [BrowserModule, SpreadSheetsModule], declarations: [AppComponent], exports: [AppComponent], bootstrap: [AppComponent] }) export class AppModule {} enableProdMode(); // Bootstrap application with hash style navigation and global services. platformBrowserDynamic().bootstrapModule(AppModule);
<!doctype html> <html style="height:100%;font-size:14px;"> <head> <meta charset="utf-8" /> <meta name="viewport" content="width=device-width, initial-scale=1.0" /> <link rel="stylesheet" type="text/css" href="$DEMOROOT$/en/angular/node_modules/@grapecity/spread-sheets/styles/gc.spread.sheets.excel2013white.css"> <!-- Polyfills --> <script src="$DEMOROOT$/en/angular/node_modules/core-js/client/shim.min.js"></script> <script src="$DEMOROOT$/en/angular/node_modules/zone.js/dist/zone.min.js"></script> <!-- SystemJS --> <script src="$DEMOROOT$/en/angular/node_modules/systemjs/dist/system.js"></script> <script src="$DEMOROOT$/spread/source/data/taxform.js" type="text/javascript"></script> <script src="systemjs.config.js"></script> <script> // workaround to load 'rxjs/operators' from the rxjs bundle System.import('rxjs').then(function (m) { System.set(SystemJS.resolveSync('rxjs/operators'), System.newModule(m.operators)); System.import('$DEMOROOT$/en/lib/angular/license.ts'); System.import('./src/app.component'); }); </script> </head> <body> <app-component></app-component> </body> </html>
<div class="sample-tutorial"> <gc-spread-sheets [hostStyle]="hostStyle" (workbookInitialized)="initSpread($event)"> <gc-worksheet></gc-worksheet> </gc-spread-sheets> </div>
.sample-tutorial { position: relative; height: 100%; overflow: hidden; } body { position: absolute; top: 0; bottom: 0; left: 0; right: 0; }
(function (global) { System.config({ transpiler: 'ts', typescriptOptions: { tsconfig: true }, meta: { 'typescript': { "exports": "ts" }, '*.css': { loader: 'css' } }, paths: { // paths serve as alias 'npm:': 'node_modules/' }, // map tells the System loader where to look for things map: { 'core-js': 'npm:core-js/client/shim.min.js', 'zone': 'npm:zone.js/dist/zone.min.js', 'rxjs': 'npm:rxjs/bundles/rxjs.umd.min.js', '@angular/core': 'npm:@angular/core/bundles/core.umd.min.js', '@angular/common': 'npm:@angular/common/bundles/common.umd.min.js', '@angular/compiler': 'npm:@angular/compiler/bundles/compiler.umd.min.js', '@angular/platform-browser': 'npm:@angular/platform-browser/bundles/platform-browser.umd.min.js', '@angular/platform-browser-dynamic': 'npm:@angular/platform-browser-dynamic/bundles/platform-browser-dynamic.umd.min.js', '@angular/http': 'npm:@angular/http/bundles/http.umd.min.js', '@angular/common/http': 'npm:@angular/common/bundles/common-http.umd.min.js', '@angular/router': 'npm:@angular/router/bundles/router.umd.min.js', '@angular/forms': 'npm:@angular/forms/bundles/forms.umd.min.js', 'jszip': 'npm:jszip/dist/jszip.min.js', 'typescript': 'npm:typescript/lib/typescript.js', 'ts': 'npm:plugin-typescript/lib/plugin.js', 'css': 'npm:systemjs-plugin-css/css.js', 'plugin-babel': 'npm:systemjs-plugin-babel/plugin-babel.js', 'systemjs-babel-build':'npm:systemjs-plugin-babel/systemjs-babel-browser.js', '@grapecity/spread-sheets': 'npm:@grapecity/spread-sheets/index.js', '@grapecity/spread-sheets-angular': 'npm:@grapecity/spread-sheets-angular/index.js', '@grapecity/jsob-test-dependency-package/react-components': 'npm:@grapecity/jsob-test-dependency-package/react-components/index.js' }, // packages tells the System loader how to load when no filename and/or no extension packages: { src: { defaultExtension: 'ts' }, rxjs: { defaultExtension: 'js' }, "node_modules": { defaultExtension: 'js' }, } }); })(this);