Dynamic pages Integrating Search Functionality

Using the Without Code Search widget is a great way to add search functionality to your site using dynamic pages. See an example of the search widget on the home page of our Dynamic Pages-driven site template, Heights.
If you’ve used our Search widget before, you’ll know that it utilizes a spreadsheet to contain the search data. Likewise, if you’ve used Dynamic Pages, you’ll know that all dynamic content is generated from spreadsheets as well. This creates a great opportunity to  use the same spreadsheet for both purposes.
If you’ve already began a site using dynamic pages, and now want to add search functionality, we’ll show you how to simply add a few new columns to your existing dataset spreadsheets to add search data, and in turn, search functionality.
Please note that advanced search features (such as filtering) are not possible at this time. The Search widget can search titles, descriptions, tags, images, and links.

ADDING SEARCH COLUMNS TO DATASETS

Dynamic Pages use “datasets” to serve content to dynamic widgets and pages. Datasets use Google Sheets or Airtables to contain the data. If you’ve already built a dataset for Dynamic Pages, it’s easy to add a few columns to your Google Sheet or Airtable to enable it to properly contain data that can be used with the Search widget as well.

Here is an example of an Airtable that includes the appropriate search columns: https://airtable.com/shr5OwNhM5YSXn1vM

If you’re new to Dynamic Pages, be sure to see our Dynamic Pages documentation.

The following instructions can be applied to both Google Sheets and Airtable. The goal is to simply add a few new columns to your spreadsheet. In this example, we will use an Airtable.

  • Open your Airtable (or Google Sheet)
  • Add the following fields:search_title search_description search_tags search_image search_link
  • Start by clicking “Add field”
  • Name the field “search_title”
  • Continue adding all the fields.
  • Be sure that the each field name is entered correctly. There should be no capitalization and no spaces. Only underscores should be used between words.search_title search_description search_tags search_image search_link
  • Note: you cannot add your own search categories. Our search widget was built to look for these exact categories.

POPULATING THE SEARCH COLUMNS

The next step is to populate the new search columns you’ve created. This is the data that the search widget will scrape in order to display search results.

If you’ve already populated your spreadsheet for Dynamic Pages, you can probably re-use information already in the spreadsheet. In our real estate Airtable example [this is the exact Airtable used in our Heights template], we’ve copied the existing titles, descriptions, images and links that were already in the table.

You’re free to enter specific, custom data in your own dataset. However, in these instructions, we will use data already in our table.

  • Select all the cells in the listing_titles column
  • Paste the entire column into the search_title column.
  • Repeat this process until you’ve populated all new search columns

USING THE SAME SPREADSHEET FOR DYNAMIC PAGES AND SEARCH

Our Search widget has been updated to accept both Google Sheets and Airtable as sources. This means that the Search widget can utilize the exact same Google Sheet or Airtable you’ve used for Dynamic Pages (or Connected Data used in other widgets). To do this, simply select the appropriate Google Sheet or Airtable in the Search widget options. See our Search widget documentation for details.

UPDATING COLLECTIONS

When you add new search columns to a dataset (Google Sheet or Airtable), you will need to update your Collection in the Without Code builder. While we won’t go into detail on Collections, keep in mind that Collections are what the builder uses to connect your datasets to Dynamic Pages and Connected Data (see our Dynamic Pages documentation for details)

While Collections update automatically when new data is added or changed, Collections do not automatically add new Collection Fields that reflect new columns. This means that when new columns are added to a Google Sheet or Airtable already linked to a collection, you must add these as Collection Fields.

To add a new Collection Field, go to your Collection (Content > Collections). Select the appropriate Collection, and click the “Add field” link at the bottom of the Collection Fields.

Name the new field exactly as the column is named, i.e. “search_title”. Repeat this process as needed to add all search fields.

Note that you can also delete the collection and add it again as a new collection to save some time. Just be sure that any existing Dynamic Page or widgets using Connected Data link up with the collection afterward.