2

Filters and keywords in your spreadsheet

Filters and keywords must be located in the second row of your spreadsheet. This row must not contain any data.

If you need more than one element in the second row (a filter and a keyword, for example), separate the elements with a hyphen. For example: ElementA - ElementB.

You can make a copy of our sample file with filters and keywords already added. 

• Google Sheets
• Microsoft Excel for Office 365

Alternatively, you can use the spreadsheet you created or downloaded in step 1 of this tutorial and add the filters and keywords yourself.

You can access your spreadsheet directly from the Awesome Table interface by clicking the Open button in the Spreadsheet Source section.

Add filters to refine your search results

Filters help your users find the data they are looking for. In this tutorial we're going to add the following filters: 

• stringFilter
• categoryFilter
• csvFilterAnd
• numberRangeFilter

Add stringFilter

The stringFilter lets users filter the search results by entering a text string in a search bar.

We want to set up a filter on the First Name and Last Name columns. We'll use stringFilter because these columns contain text.

To do this:

1. If you haven't already done so, add a row to your spreadsheet below the first row containing the headers.

2. Enter stringFilter in the second row, in the First Name and the Last Name columns.

Add categoryFilter

The categoryFilter lets users select from a set of values in a dropdown menu.

We want to set up a filter on the Department column. We'll use categoryFilter because this column contains category values. 

To do this: enter categoryFilter in the second row, in the Department column.

Add csvFilterAnd

The csvFilterAnd lets users select one or more values from a list. Results that contain the selected values are displayed.

We want to set up a filter on the Expertise column. We'll use csvFilterAnd because this column contains values corresponding to different types of expertise separated by commas. 

To do this: enter csvFilterAnd in the second row, in the Expertise column.

Add numberRangeFilter

The numberRangeFilter lets your users filter your data by selecting a range of numbers. Results that contain any values within the selected range are displayed.

We want to set up a filter on the Professional Experience column. We'll use numberRangeFilter because this column contains numerical numbers. 

To do this: enter numberRangeFilter in the second row, in the Expertise column.

Add keywords to define how your data is displayed

Keywords let you specify how to present your data.

For example, you can tell Awesome Table that you want an entire column to be displayed as an image, link, button, or chart without writing a single line of code. That means you can create a fully functional app using just keywords!

In this tutorial, we're going to add the following keywords:

• imageType
• listType
• iconType
• buttonType

Photo column: imageType

The imageType keyword displays images from a column containing links to images. 

We want to add a keyword in the Photo column. We'll use imageType because this column contains image links. 

To add this keyword: enter imageType in the second row, in the Photo column.

Expertise column: ListType

The ListType keyword displays entries as separate bullet points. 

We want to add a keyword in the Expertise column. We'll use ListType because this column contains values that are separated by commas.

To add this keyword: enter ListType in the second row, in the Expertise column.

Phone columns: iconType and buttonType

Columns H and I are used to create a column in the app containing phone numbers with a click-to-call button. Your users can click to set up a phone call.

To do this, add these keywords to the following columns:

• The Phone column (column H) contains the text that will be displayed on the button. We have used the phone number, but you can choose any text, for example, "Call"
  • iconType(call) – displays a phone icon next to the phone number
  • buttonType(I, cadetblue) – displays a cadetBlue colored button with a click-to-call function referencing column I
• The Phone_ column (column I) contains the standard telephone link in HTML; since column H references column I, when the user clicks the button, a call is triggered with the number listed in column I
• Finally, add Hidden to the Phone_ column (column I) as you only want to display the Phone column (column H) in your app.

Final results of your People Directory

Your spreadsheet should look like this:

Your app should look like this:

Copy this template