Build-On Tutorial:

Upcoming Tasks

Upcoming Tasks: Lesson 2

Filter Upcoming Tasks List

Lesson Overview

In this lesson you will modify the upcoming task list so users can easily filter the list by staff member. Here is a sneak peak of what you will build:

Step 1 - Create filter field

Add a new field to the Global table to use as a filter field.

  1. Open the Manage Database dialog (File > Manage > Database...).
  2. Select the Fields tab and add the following field to the Global table:

    • g_Filter_Staff — Set the Type: to Text, click Create and then with the new field highlighted, select Options. Select the Storage tab and check Use global storage (one value for all records).

Step 2 - Add filter field and "Clear" button to the layout

Next, you will modify the Upcoming Task List layout to include the filter field and a Clear button.

  1. In Layout mode, navigate to the Upcoming Task List layout.
  2. Add the g_Filter_Staff field to the header by performing the following steps:
    1. Resize the header to fit the filter field. Select the Header layout part, and in the Position tab of the Inspector, set Height: 192pt.
    2. Move the column labels down closer to the Body, to make room for the filter field.
    3. To add your new field to the layout, open the Fields tab of the Objects pane and change the table to _GLOBAL so you see that table’s fields. Then drag the g_Filter_Staff field into the header of the layout. The field label is not needed. You can delete it if one was automatically created.
    4. With the g_Filter_Staff field selected, navigate to the Data tab of the Inspector panel, and set the control style to Pop-up Menu.
    5. Show Values from: the list Staff ID and Name.
    6. Set the placeholder text to "Filter by Staff".
    7. Make sure to select the options to Include arrow to show and hide list and Override data formatting with value list.
  1. Add a button with the text "Clear" next to the filter field. Later in this lesson, you will attach a script to clear the filter and show all upcoming tasks.
    1. With the Clear button selected, navigate to the Styles tab of the Inspector panel, and select btn Minimal.Blue.Previous style.
    2. Navigate to the Position tab of the Inspector panel. Set the Width of the button to 70pt and Height to 48 pt. The layout should look like this:

Step 3 - Add task filtering to the Find script

Now you will amend the script you created in Lesson 1, Find Upcoming Tasks, to add filtering. To allow the script to work for both purposes — either finding all upcoming tasks or filtering them down — you will use script parameters: "find all" or “filter".

  1. Open the Script Workspace, then select the Find Upcoming Tasks script to edit it.
  2. If the user chooses to find all upcoming tasks, the filter field on the layout should be cleared. Add the following steps to the the script:

    NOTE: See screenshot below for placement of script steps.

Set Variable [$action ; Value: Get ( ScriptParameter ) ]

If [ $action = "find all" ]
   Set Field [ _GLOBAL::g_Filter_Staff ; "" ]
End If

  1. When the filter field is not empty, its contents should be included in the search for upcoming tasks. Add these steps before the existing Perform Find script step:

    NOTE: See screenshot below for placement of script steps.

If [not isEmpty ( _GLOBAL::g_Filter_Staff ) ]
   Set Field [Task::ID_Staff ; _GLOBAL::g_Filter_Staff ]
End If

  1. A naming convention that is used in your file is that scripts that accept a parameter should show that parameter in their name. Rename the script to "Find Upcoming Tasks (action)”, so it’s clear from the title that the script needs a parameter of “action”.
  2. Amend the Parameters comment at the top of the script to note your new optional parameter.


    At this point, the Find Upcoming Tasks (action) script should look like this:

Step 4 - Set up filter buttons

When a user modifies the filter field, your app should filter and sort the list. You will attach a script trigger to the filter field to make this happen. You will also set the script for the Clear button.

  1. Open the Upcoming Task List layout in Layout mode.
  2. In order to have the found set update every time a user modifies the g_Filter_Staff field, right-click or control-click the field to a set script trigger. Choose the OnObjectModify event.

    In the following Specify Script window, select the Find Upcoming Task (action) script. Include the parameter “filter".
  1. The final Set Script Triggers window of the filter field should look like this:
  1. Set the Clear button to perform the script Find Upcoming Task (action) also, but with a different Optional script parameter: "find all".

Step 5 - Review your work

  1. You should be able to filter the Upcoming Task List by staff member.
  2. The Clear button should clear the filter field and show all upcoming tasks.