8.6.6 Editing a Smart Filters Page

Learn about how attributes can change the behavior of a smart filters page.

Tip:

Many examples in this section are built on the EBA_PROJECT_TASKS table available in the sample dataset, Project Data, or the EMP table available in the sample dataset, EMP / DEPT. To install a sample dataset, see Using Sample Datasets in Oracle APEX SQL Workshop Guide.

8.6.6.1 Reviewing Smart Filters Page Components

Review the components that comprise a smart filters page by viewing attributes in Page Designer.

A smart filters page features a single search field at the top of the page with filters. Search Results can display as a classic report, cards, map, or calendar.

Tip:

You must create maps and calendars manually since the Create Application and Create Page Wizards only support creating smart filter pages with a classic report and cards report.

To review the components of a smart filters page:

  1. View the page in Page Designer:
    1. On the Workspace home page, click the App Builder icon.
    2. Select an application.
    3. Select a page.
    Page Designer appears.
  2. Review the Search region. In the Rendering tab, locate and select the Search region.

    Note the Search region Type is Smart Filter. In this example, the Search region contains six filters. Filters display in runtime as suggestion chips with counts that show how often the specific value occurs. The value shown in the suggestion chip is configured with the attributes in the Suggestions group. Filters are similar to items but feature the following unique characteristics:

    • Naming Conventions - Filters use the same naming convention as items. By default, wizards prefix filter names with P<page no>_<item name> (for example, P2_SEARCH).

    • Associated with a Column - Filters are associated with a column from the Search Results (or report) region.

    • Checkbox Group Filters - The filters with the Type Checkbox Group create a UI for selecting or entering the filter values. They are not implemented the same as page items even if they have the same type name. For this reason, most dynamic actions do not apply to filters.

  3. Select a filter and explore the configurable options.
    To view Help, select the attribute and click the Help tab.
  4. Review the report region. In the Rendering tab, locate and select the Search Results (or report).

    In the previous example, note that the attributes indicate the report Type is a Classic Report built on the EBA_PROJECT_TASKS table in a local database:

8.6.6.2 Understanding a Smart Filters Page

Learn about the regions that comprise a smart filters page.

About the Search Region

A smart filters page features a Search region which enables users to narrow down the search result and a report region such as classic report or cards report.

In Page Designer, the Search region displays in the left pane or Rendering tab. Selecting the Search region displays attributes in the Property Editor. In the following image, the Search region Type is defined as Smart Filters. The Filtered Region attribute identifies the Search Results region. In this example, Filtered Region is as a classic report named Search Results.

Tip:

Remember that each attribute in the Property Editor has associated Help. To view Help, select the attribute in the Property Editor and then click the Help tab in the central pane. Help describing the attribute appears in the central pane.

About Filters

Search filters display under Filters in the Rendering tab. When you select a filter, the associated attributes display in the Property Editor. Filters use the same naming convention as items. By default, wizards prefix filters names using the following convention: P<page no>_<item name>. For example, in the previous example, the first filter is named P2_SEARCH).

Filters are similar to items but feature the following unique characteristics:

  • Associated with a Column - The filters are associated with a column from the report region.

  • Checkbox Group Filters - Filters with the Type Checkbox Group create a UI for selecting or entering the filter values. They are not implemented the same as page items even if they have the same type name. For this reason, most dynamic actions do not apply to filters.

About the Search Results

A smart filters page includes a Search Results region. If you create a smart filters page using either the Create Application Wizard or Create Page Wizard, the Search Results region is either a classic report or cards report. If you create a smart filters page manually, the Search Results region can also be a manually created map or calendar. In the following example, Search Results is a classic report built on the EBA_PROJECT_TASKS table.

About Cards Page Search Results

The Search Results on a smart filter search page can display as a cards report. A cards page functions as a colorful way to display a subset of information and then enable the user to link to more detail. You can create an action to link from a full card, a title, a subtitle, media, or a button. To see an example, see Using Actions to Link from a Cards Page.

8.6.6.3 Adding a New Filter

Add new filters in Page Designer by right-clicking filter and selecting Create Filter from the context menu.

Filters map to specific database column. When creating a new filter, you can create the following types: Checkbox Group, Input Field, Radio Group, and Range.

You can control the filter order in the UI by reordering the filters in the Rendering tab. Note that there must always be one Search type filter.

The following example demonstrates how to create Range filter to filter employee salary. In this example, the filter maps to the SAL column in the EMP table available in the sample dataset, EMP / DEPT.

To create a Range filter:

  1. View the smart filters page in Page Designer.
  2. In the Rendering tab, right-click Filters and select Create Filter.
  3. Select the new filter and edit the following filter attributes in the Property Editor:
    1. Identification, Name - Enter PX_SAL where X represents the page number.
    2. Identification, Type - Select Range.
    3. Label, Label - Enter Salary
    4. Source, Database Column - Verify that the column is SAL.
    5. Source, Data Type - Select NUMBER.
    6. Settings, Select Multiple - Enable Select Multiple.
  4. Define the filter as a static list of values:
    1. List of Values, Type - Select Static Values.
    2. List of Values, Static Value - Click Display1, Display2.

      In the Static Values dialog, define the following:

      • Row 1:

        Display Value - Enter <900

        Return Value - Enter |900

      • Row 2:

        Display Value - Enter 900 - 1#G#300

        Return Value - Enter 900|1300

      • Row 3:

        Display Value - Enter 1#G#300 - 2#G#000

        Return Value - Enter 1300|2000

      • Row 4:

        Display Value - Enter 2#G#000 - 2#G#500

        Return Value - Enter 2000|2500

      • Row 4:

        Display Value - Enter 2#G#000 - 2#G#500

        Return Value - Enter 2500|

      • Click OK to save your changes.

  5. Configure the Suggestions attributes for the the PX_SAL filter:
    1. Select the the PX_SAL filter (if not already selected).
    2. Suggestions, Static Values - Select how suggestions are determined for this filter. Options include:
      • Dynamic - Picks the first visible entry from the List of Values.

      • Static Values - Enter a comma delimited list of values.

      • SQL Query - Values are returned from the SQL Query entered.

      For this example, select Static Values.

    3. Suggestions, Static Values - Enter 2000|2500

      This will display 2,000 - 2,500 on the suggestion chip at runtime.

    4. Save your changes. Click Save.
  6. View the page.
    1. Click Save and Run Page in the upper right corner.
    2. If prompted, enter your workspace username and password and click Sign In.

      The revised page appears. Notice that a Salary suggestion chip appears that reads:

      Salary 2,000 - 2,500 (1)

    3. Select the Salary on the Salary suggestion chip.

      The revised page appears. Notice that the Salary suggestion chip has become an applied filter chip and moved to the Applied Filters Area.

    4. Test the new filter. To remove a filter, click the X after the filter name.

8.6.6.4 Editing Filter Attributes

Edit attributes to change filter behavior.

The following example demonstrates how to review and edit the Client-Side Filtering and Depending On attributes and change filter behavior. Enabling Client-Side Filtering adds a search field which enables users to filter the list. Depending On makes the display of one filter dependent upon another. The following example is also built on the EBA_PROJECT_TASKS table available in the sample dataset, Project Data.

Tip:

To view help for an attribute, select the attribute in the Property Editor and click the Help tab in the central pane.

To view and edit filter attributes:

  1. View the smart filters page in Page Designer.
  2. View the filter attributes, P2_PROJECT_ID:
    1. In the Rendering tab (or left pane) locate the Search region and select the filter, P2_PROJECT_ID.
    2. In the Property Editor (or right pane) find the List Entries group.

      Tip:

      The maximum amount of items which can be returned by an LOV, or by Distinct Values, is 5,000. If an LOV returns more than 5,000 items, search cuts the LOV silently at 5,000 values. When logged in as a developer, APEX raises a runtime error once more than 2,000 LOV items are returned. These errors indicate that the LOV returns too many values for a useful search UI.
    3. In the Property Editor, find the Source group.

      The Source group indicates that the P2_PROJECT_ID filter is based on the PROJECT_ID column which has a data type of Number.

  3. Update P2_PROJECT_ID and enable the Client-Side Filtering attribute:
    1. In the Rendering tab, select the P2_PROJECT_ID filter (if not already selected).
    2. In the Property Editor, find List Entries and enable Client-Side Filtering. Enabling this option renders a search field above the list entries.
    3. Review your changes. Click Save and Run Page.

      Click the name Project on the Project suggestion chip. Notice a Filter Project search field appears above the list.

    4. Test the new Filter Project field. For example, entering the keyword "develop" will update the Project list to only include filters containing that phrase.
    5. Click Page XX on the Runtime Developer Toolbar to return to Page Designer, where XX is the page number.
  4. Only show Milestones for the selected Project by enabling the Depending On attribute.
    1. In the Rendering tab locate the Search region and select the P2_MILESTONE_ID filter.
    2. In the Property Editor, find Depending On, Filter and select P2_PROJECT_ID.
    3. Review your changes. Click Save and Run Page.

      The Smart Filters page appears. Note that the Milestone suggestion chip no longer displays.

    4. Click Project on the Project suggestion chip and then select a project such as Develop Production Partner Portal

      Note the Milestone suggestion chip displays again.