Create a Filterable Table

Table filters are a powerful tool that help you sort and analyze information quickly. This tutorial shows you how to get started creating table filters. In this example, we’ll create a table listing Opportunities and then create a conditions that allow us to filter it by Stage, Lead Source, and Amount. Remember that you can follow these steps to create filters for any object standard or custom.

In this article you’ll learn how to:

  • Create automatic (Multi) Select Option filters on a picklist, reference, or multipicklist field (Step 2)
  • Create a condition and use it for a Toggle Filter (Step 3)

For more complicated use cases, see the Filters section.

What are Filters?

image0

Skuid filters allow you to quickly narrow down a list of records to only the ones you want to see. Skuid filters work together, so with a few clicks you can display major deals that came from the web, see how many deals your company won that came from Partner Referrals, etc. With filters like these, you can basically run reports without leaving your table.

  1. This is a toggle filter. It has two states: on and off
  2. This is a Select Option filter, it displays a list of possible options that users can choose from.
  3. You can also use the standard search feature to help narrow down your list.

Want to show column summaries like this in your table? Check out the column summaries field property.

Step 1: Create a Table.

image1

For detailed instructions on building a table, see Table.

Step 2: Create Filters based on picklist fields.

image2

Skuid makes it easy to create dropdown filters based on picklist fields, where the options in the list are all the possible options for that picklist field.

  1. Click Add Features.
  2. Click Add Table Filter.

A. Choose Select Option or Multi-select Option as the Filter type.

image3

We want to create a filter that will allow users to display different Opportunities based on the Source picklist, so we’ll create a Select Option Filter on the Lead Source picklist.

  1. Choose Select Option or Multi-select Option as the Filter Type.
  2. Choose to Pick Options and Condition(s) Automatically.

B. Choose the field you want to filter on.

image4

Note: Picking Options Automatically only works for Multi-select Picklists, Picklists, and Reference fields, so these are the only field types that you will see in the field-selector.

C. Configure other filter properties.

image5

  1. By default, this filter will Remember last-selected filter value, so when a user returns to this page, it will remember their previously selected options. (For more information on how this works, see Optimize Personalization and Caching.
  2. (Optional) Choose a Maximum Height for your filter, in px, em, %, vh, or vw.
  3. By default, this filter will be displayed to the user as a list of options to choose from, and change to an autocomplete (typeahead) once there are 25 items in that list. You can choose a smaller or larger number as you wish.
  4. Choose whether or not you want to Show Label above Filter. You can choose to show the Field’s label, a custom label, or no label at all.
  5. Enter “None Selected” Option Text e.g. Any Source or “All Sources”

Repeat for other picklist, multi-picklist, or reference fields you want to filter on.

image6

Again, all the options in this filter will be automatically populated with the available options in a picklist or multipicklist, or, if you build this filter on a reference field, with all the records from that related object. If you want to combine and/or hide some of these options, you can do that by setting your filter to a Select Option filter that picks options and conditions manually. For more information, see the Filters topic.

Step 3: Create a condition to use for your Toggle filter.

image7

Before we can create a Toggle filter, we must create a condition on our table model. All Skuid filters use conditions to narrow down the records in a list based on user input, but the automatic ones created the conditions for us. If you save and refresh your page, you will see these autofilter conditions. For Manual and Toggle type filters, you need to create the conditions yourself.

  1. Click Models.
  2. Click Conditions under the table model, and then click to Add a new condition.

A. Choose a field to use for your condition.

image8

For this example, we’ll create a “Big Deal” button that users can press to only display Opportunities with an amount over $50,000, so we need to create a condition where Amount >= 50,000 that our filter can then turn on and off.

  1. For Field, click on the field selector and choose the Amount field.

B. Specify Operator and Value.

image9

The key for toggle filters is to specify the Value for your condition.

  1. For this example, click Operator and choose >= (greater than or equal to).
  2. Click Value.
  3. For Content, choose either Single Specified Value or Multiple Specified Values.
  4. Enter the desired Value(s). For this example, we’ll enter 50000.

C. IMPORTANT Set State to Filterable Default Off.

image10

Your condition state must be Filterable so that filters can access it. You can choose whether it is on by default, or off by default. For this example, we’ll have our condition be off by default.

  1. Click State.
  2. Choose Filterable Default Off (or Filterable Default On, if you so desire).
  3. Name your condition so you can easily remember which one it is when you’re setting up your filters. This defaults to the field name, but in this example we’ll call it BigDeals, since when this condition is active it only shows “Big Deals” i.e. deals that are over $50,000.

Step 4: Click on your Table, Add Features, and Add Table Filter.

image11

A. Choose Toggle as the Filter Type.

image12

Toggle filters don’t have options; a user clicks to turn them on and off. This toggle filter will be our “Big Deal” button.

  1. Select Toggle as the Filter Type.
  2. Create a Label for this filter that will be displayed to users, e.g. Big Deals.
  3. Click on the plus sign to add a condition to this filter.

B. Add the Amount Condition to this filter.

image13

  1. Click on the new condition to edit it.
  2. Choose Activate as the action; we need this toggle filter to turn on the condition we created in Step 3 which is turned off by default. If you choose “Activate and Set Value” then you can specify the value of the field here, e.g. 50000, but if you’ve already specified it on the condition there’s no need.
  3. For the condition, choose the condition you created in Step 3 (e.g. BigDeals).

Now, when a user clicks on this toggle filter, it will Activate the Big Deal condition that we created on our model. Skuid allows you to create complex toggle filters with multiple conditions so that users can quickly find the information they need (e.g. “My New Opportunities,” “My Hot Leads” etc.)

Step 5: Click Save and then click Preview.

image14

Result: Your filtered table will be displayed.

image15

  1. Click on your Select Option filters to select an option from the list.
  2. Click on the Big Deals filter to toggle it on and off.
  3. You can also narrow down the results in the table using the Search box.

Now, you have fast and powerful filters for your opportunities that apply across all pages of your table. In a few clicks, you can display major deals that came from the web, see how many deals your company won that came from Partner Referrals, etc. Want to export data from this table as a spreadsheet? See Export Data from a Table for more information.

Want to show column summaries like this in your table? Check out the column summaries field property.

More Filter Properties

image16

When you have multiple filters on a table, and you want to be able to keep the table from refreshing until all the filters have been modified, you can choose not to apply the filters immediately.

  1. Click on your Table.
  2. Click Filters & Search.
  3. Uncheck Apply Filters and Search Immediately.

Running into trouble? Check out these troubleshooting tips and find more on community.skuid.com.

  • Go back through and make sure your filters are connected to the appropriate fields and conditions.
  • Check out the troubleshooting advice below.
  • Go to community.skuid.com to browse similar issues, ask questions, and report problems.

Go into the Web Developer Console to check errors.

image17

This sounds scary, but it’s pretty easy. In Chrome, you can right click and choose Inspect Element > Console. In Firefox, it’s in menu bar under Tools > Web Developer. If there’s an error, it may make no sense to you. But if the error has “Id” in it, than it probably means there’s something wrong with your models.