Data Binding

Data binding is one of the fundamental building blocks of Squirrel. It is simply the linking of component properties to data contained in one or more spreadsheet cells.

As data in the spreadsheet updates, any component properties bound to that data will also update.

Each component in Squirrel has properties that can be set by binding to data in the spreadsheet; be sure to browse the properties of each component to see what you can do.

Watch the following video to see how you can easily incorporate data binding into your Squirrel projects, or you can follow along using a different example in the step-by-step instructions if you prefer.

Video

Step-by-step

Step-by-step:

1. Open up the spreadsheet in a new Squirrel project.

2. In cell A1, add the value 14.

3. In cell B1, add the value 53.

4. Add a pie chart component to the canvas and ensure that it is selected.

5. In its properties panel, expand the DATA drawer.

6. Move your cursor over the Values property and click on the data binding icon that appears above.

Move your cursor over any property field. If the data binding icon appears directly above the field, then this property can be bound to data in the spreadsheet.

1. The spreadsheet will open in binding mode and it will fill the central area of the Squirrel interface. The header is blue and contains a range field and confirm and cancel buttons.

While in binding mode, the spreadsheet cannot be edited; data cannot be changed, added or removed.

1. You can select the data in two ways:

   • Click on cell A1, with the mouse button down click and drag the blue bounding box until it also includes cell B1.

   • Type Sheet1!A1:B1 into the range field at the top of the spreadsheet.

2. Click the Confirm button.

3. Check that the Values property of the pie chart contains the cell addresses and that the pie chart has been updated to show these new values.

That’s how we can quickly and easily bind a component property to data in the spreadsheet. But there is more that we can do to make this even more dynamic:

1. Add a spinner control to the canvas and ensure that it is selected.

2. Expand the DATA INSERTION drawer in the properties panel.

3. Click the data binding icon above the Value field.

4. Select cell A1 and click the confirm button.

5. Add a second spinner control to the canvas.

6. This time, bind the Value property to cell B1.

7. Change to Preview mode.

8. Change the values of the spinners by typing in new values or clicking the spinner buttons and watching the pie chart component react to the new values.

That’s the end of this tutorial on Data Binding. Although this is a very simple example, you can begin to see how binding data to component properties can start to make your projects come alive. Then, you can take it a step further by adding control components into that mix to produce powerful, interactive applications.