1. Refine your search results with filters
To follow along in this tutorial, please make a copy of our sample file (or copy and paste the content) to your Google Sheets or Microsoft Excel for Office 365 datasheet.
First, we need to add a Search filter column. We will use StringFilter since this column contains text. This allows us to filter our search results based on the text-string you entered.
In our example, we want to add a search bar for the First Name and Last Name columns.
The Department column has different categories. Using categoryFilter will allow us to display only the values that are selected from the dropdown menu.
Optionally, you can use a dependent Category Filter to refine your search results.
The Expertise column has different tags or labels related to skills that are separated by commas. A csvFilter will show items that contain or matches ALL the selected (multiple) values.
The Professional Experience column has numeric numbers. Use numberRangeFilter to filter your People Directory by year of experience.
2. Use keywords to make your apps functional and beautiful
Now, it’s time to make your app presentable with the use of keywords. Keywords specify the way you want to handle and display your data.
For instance, you can tell Awesome Table that you want an entire column to be displayed either as an image, link, button, charts, etc. - all without writing a single line of code.
This means you can create a fully functional app using just keywords!
• Photo column
Keyword used: imageType - will display images from a column referencing the link-column as your image-source.
• Expertise column
Keyword used: listType - will display entries as separate bullet points.
• Phone column
- iconType(call) - will display a phone icon beside the phone number.
- buttonType(I, cadetblue) - will display a cadetBlue colored button with a click-to-call function referencing column I (phone number formatted using the tel: schema).
3. Final results of your People Directory
All columns containing filters & keywords
Your app should resemble the one below: