Simple Example of Wix Data Hooks

Photo by Mihail Tregubov on Unsplash

Let’s discuss a handy feature of Wix Data Collections: Data Hooks. Data hooks allow you to run code before or after interactions with your Wix data collections. This is particularly useful if you want to store some computed data, meaning data that changes based on what is in the data collection record. In the example, let’s use a data hook to fill in a column named fullName comprised of firstName and lastName.

Let’s say we have a collection that is used to populate a page that looks like this.

A webpage with names and pictures

The collection that populates this data is a collection named people that look like this.

First version of the “people” data collection

Notice that the named displayed under each picture is on the first name. We want the full name! Let’s address this by first adding a new column named fullName.

Adding the fullName field

Now that we have that, the next step is to add the Data Hooks to this collection. We want to populate the fullName field every time we insert or update a record in the people collection. To do this, click on the ellipses to the right of the people collection and choose Add/Remove Hooks.

UPDATE 2023–06–20: You’ll need to turn on Dev Mode while editing the site to see this.

Menu to Add/Remove Hooks

This will bring up a dialog box asking you what events you are interested in. In our case, we care about Before Insert and Before Update.

Selecting the hook events we want

Pressing the Add & Edit Code button will bring up a block of code where you can add the behavior you want. Make the code look like this.