Filter and Sort a List

Topic

One of the most common user interfaces found in Honeycode apps are lists. They typically show top level information and display multiple rows of data from a table.

To demonstrate how a table serves as the data source for a list in a Honeycode app, check out the image below:

When looking at a list in a Honeycode app, users may want to see certain rows and/or view the rows in a particular order. To put it simply, they might want the ability to filter and sort the list. Let's take a closer look at these.

Filter

When an app user filters a list, they are temporarily hiding some of the rows, so they can focus on just the data they want to see. Users can choose a column and then select certain values within a column that they want to focus on.

:movie_camera: Filter example: This video shows how a user can filter the list by certain values in the Amount and Project columns.

:hammer_and_wrench: Builder tip: Users will be able to filter up to a maximum of 10 columns at a time.

Sort

When an app user sorts a list, they are reordering it based on the column of their choosing. They can do this two ways:

  • Ascending: Alphabetically (A to Z), numerically (low to high), or chronologically (oldest to newest)
  • Descending: Alphabetically (Z to A), numerically (high to low), or chronologically (newest to oldest)

:movie_camera: Sort example: This video shows a user can sort the list by the values in the Project column in a descending, alphabetical fashion.

:hammer_and_wrench: Builder tip: Unlike filtering, sorting can only be applied to one column at a time.

The steps below will show you how to add these features to your app.

Steps

:hammer_and_wrench: Builder tip: These steps assume you already have a table with data that serves as the source for a list within an app. For instructions on how to do this, check out this article.

  1. In the app Builder, click on the list that you would like to allow users to filter and/or sort.

  2. In the Properties panel, go to the Display tab to access the App User Controls.

  3. Click the checkboxes for Filter and/or Sort, and select the columns of your choosing. You should notice the icon added to your list.

  4. Click the View app button, to try out your new filter/sort functionality.

:movie_camera: Video: This video shows a walkthrough of the steps above.

Was this article helpful?
  • Yes
  • No

0 voters

1 Like