# SpreadJS Designer Template with Cell Binding
## Content
You can use the SpreadJS designer to create a binding relationship to the data with a template. This saves time by reducing the amount of coding.
The **Template** option in the designer is used to design the cell-binding template. The **Template** option is located under the **Data** tab. Use the template to create field nodes that match the actual data fields. You can also set cell types for the data ( **Home** tab and **CellType** option). Use the **AutoGenerateLabel** option to automatically create the binding path label.
Select the green plus symbol to add a field node. Then type the field name (for example, name). You can specify a field option such as **CheckBox** using the drop-down arrow. The following image illustrates the area for adding field nodes.
The following image illustrates the **Template** option in the SpreadJS designer.
Drag the nodes to the cell area to generate the layout. You can also use the **CellType** option to change the cell settings (such as removing a caption from the check box cell).
Save to a SpreadJS designer file (ssjson) if you wish to redesign the template later. Save to a js file to use in an HTML page. The JSON object is saved as a variable field. The field name is the same as the file name. Use the **Export** option under the **File** tab to save to an SSJSON or Javascript file.
The following code sample shows how to add code to the page that references the js file. This example uses a file named binding.js. Add code similar to the following:
```html
SpreadJS Binding
```
The completed sample appears as follows:
