Define behavior

Imagine you'd like to show a different page when the user presses a key or clicks the mouse.

We do this by defining a behavior in our design. The behavior is defined by linking a specific end-user event (like a click of the mouse or the press of a key on the keyboard) to the running of a spreadsheet cell in response.

Defining a behavior consists of three steps:

1. Choosing the component that the user interacts with, for example, a button.
2. Choosing the thing the user will do, like onClick (we call it a UI event).
3. Picking the action cell in the spreadsheet that will run in response to the user's UI event.

The concept of defining a behavior is shown in the diagram below.

Examples of behaviors

The following shows some examples of behaviors.

Show matching companies

This video demonstrates the following behavior:

When the user types letters, show matching companies.

Try it now

Add an item to the list of stock cards

This video demonstrates the following behavior:

When the user types a stock symbol and clicks a button, add the related stock card to a list on the screen.

Show a dialog, add a new entry, and populate form fields

This video demonstrates the following behaviors:

• When the user clicks a button, show a dialog containing a form.
• When the user fills in form fields and clicks a button, add a new entry to a list on the screen.
• When the user types in a ZIP code and presses Enter, automatically populate the city and state fields in the form.

Go to a page, sort items

This video demonstrates the following behaviors:

• When the user clicks an icon, go to a different page.
• When the user clicks a column arrow, sort the column item in ascending and descending order

Show a popup on mouseover

This video demonstrates the following behavior:

When the user hovers the mouse over a stock card, a popup with the stock details appears on the screen.