Previous Next JavaScript must be enabled to correctly display this content

## 8.7.5 Creating a Faceted Search Manually

Create a faceted search page by manually adding the page and facet components.

Using the Create Application Wizard or Create Page Wizard is the easiest way to create a faceted search page. However, you can create a faceted search page manually. At a minimum, creating a faceted search page manually involves the following steps:

- Create a classic report or cards region.

- Add a faceted search region.

- Add individual facets or facet groups to the search region.

- Add a reset button.

The following example creates a faceted search page which contains a classic report built on the `EMP` table. The `EMP` table is available in the sample dataset, EMP / DEPT.

To create a faceted search manually.

1. Run the Create Application Wizard:
   1. On the Workspace home page, click the App Builder icon.
   2. Click Create.

      The wizard prompts you to select a method of creating an application.

   3. Click Use Create App Wizard.
2. On Create an Application:
   1. Set Icon - Click Set Icon to select an application icon. The icon you select is used as the Favicon, the PWA icon, the Apple touch icon, and the App Builder icon.
   2. Name - Enter a name to identify the application. For example, enter `Faceted Search - Manual`
   3. Appearance - Accept the default Theme Style and menu layout (Vita, Side Menu). To change it, click the Set Appearance icon adjacent to the Appearance field.
   4. Under Pages, click Add Page. Expand Additional Pages at the bottom of the window and select Classic Report.
   5. On Add Report Page:

      - Page Name - Enter a name for this page. For example, enter `Employees`

      - Set Icon - Accept the default, or select an icon to display in the navigation menu for this page.

      - Table or View - Select a table or view on which to build the page. Select EMP.

      - Click Add Page.

   6. Click Create Application.
      The Application home page appears.
3. View the new page.
   1. On the Application home page, select the new page, 2 - Employees.
      The page displays in Page Designer.
   2. Click Save and Run Page on the right side of the Page Designer toolbar.
   3. When prompted, enter your workspace username and password and click Sign In.

      The Employees report appears.

      Description of the illustration employees_classic_report.png
   4. Return to Page Designer. Click Page X on the Developer toolbar where X is the page number.
4. Add a search region:
   1. In the Rendering tab (or left pane), right-click Components and select Create Region.
   2. Select the new region. Edit the following Region attributes in the Property Editor (or right pane):
      - Identification, Name - Enter `Search`
      - Identification, Type - Select Faceted Search.
      - Source, Filtered Region - Select Employees.
   3. Update the region appearance:

      - Appearance, Template Options - Click Use Template Defaults, Scroll - Default.

        The Template Options dialog appears.

      - Common, General - Select Remove Body Padding.

      - Common, Header - Select Hidden but accessible.

      - Click OK.

5. Update the facet for searching multiple columns:
   1. Select `PX_SEARCH` where `X` represents the page number.
   2. Source, Database Column(s) - Enter `ENAME,JOB,MGR,DEPTNO`
   3. Save your changes. Click Save.
6. Add a facet to filter the `DEPTNO` column:
   1. In the Rendering tab, right-click Facets and select Create Facet.
   2. Select the new facet and edit the following attributes in the Property Editor:

      - Identification, Name - Enter `PX_DEPTNO` where `X` represents the page number.

      - Identification, Type - Accept the default, Checkbox Group.

      - Label, Label - Enter `Department`

      - List of Values, Type - Select SQL Query.

      - List of Values, SQL Query - Enter `SELECT dname, deptno FROM dept`

   3. Save your changes. Click Save.
7. Add a facet to filter the `MGR` column:
   1. In the Rendering tab, right-click Facets and select Create Facet.
   2. Select the new facet and edit the following attributes in the Property Editor:

      - Identification, Name - Enter `PX_MGR` where `X` represents the page number.

      - Identification, Type - Accept the default, Checkbox Group.

      - Source, Database Column - Verify that the column is MGR.

      - Label, Label - Enter `Manager`

      - List of Values, Type - Select Shared Component.

        The Create Application Wizard created a lookup list of values named `EMP.ENAME` so that the `MGR` column displays the manager name instead of the employee number.

      - List of Values, List of Values - Select EMP.ENAME.

   3. Save your changes. Click Save.
8. Add a facet to filter the `JOB` column:
   1. In the Rendering tab, right-click Facets and select Create Facet.
   2. Select the new facet and edit the following attributes in the Property Editor:

      - Identification, Name - Enter `PX_JOB` where `X` represents the page number.

      - Identification, Type - Accept the default Checkbox Group.

      - Source, Database Column - Verify that the column is JOB.

      - Label, Label - Enter `Job`

      - List of Values, Type - Select Distinct Values.

   3. Save your changes. Click Save.
9. Add a facet to filter the `SAL` column:
   1. In the Rendering tab, right-click Facets and select Create Facet.
   2. Select the new facet and edit the following attributes in the Property Editor:

      - Identification, Name - Enter `PX_SAL` where `X` represents the page number.

      - Identification, Type - Select Range.

      - Label, Label - Enter `Salary`

      - Source, Database Column - Verify that the column is SAL.

      - Source, Data Type - Select NUMBER.

      - Settings, Select Multiple - Enable Select Multiple.

   3. Define the facet as a static list of values:

      - List of Values, Type - Select Static Values.

      - List of Values, Static Value - Click Display1, Display2.

        In the Static Values dialog, define the following:

        - Row 1:

          Display Value - Enter `< 1000`

          Return Value - Enter `|1000`

        - Row 2:

          Display Value - Enter `1000 to 3000`

          Return Value - Enter `1000|3000`

        - Row 3:

          Display Value - Enter `3000 to 4500`

          Return Value - Enter `3000|4500`

        - Row 4:

          Display Value - Enter `> 4500`

          Return Value - Enter `4000|`

        Description of the illustration static_list_of_values.png

      - Click OK to save your changes.

   4. Save your changes. Click Save.

   Notice that the Search region displays below the Employees region.

   Description of the illustration region_position.png

   Next, move the Employees report so it displays adjacent to the Search region.

   Tip:

   The procedure that follows explains how to reposition a region by editing Region attributes. You can also move components by selecting them in the Layout tab (central pane) and dragging and dropping them to a new position.

10. Select the Employees region and update the following Region attributes:
    1. Layout, Sequence - Enter `20`
    2. Start New Row - Disable this option.
    In the Layout tab, notice the Search and Employees regions now display adjacent to one another.
11. Make the Search region narrower and then update region appearance. Select the Search region and update the following Region attributes:
    1. Layout, Column - Enter `1`
    2. Layout, Column Span - Select 3.
    3. Save your changes. Click Save.
12. 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 the Search region contains the following facets: Search, Department, Manager, and Salary.

       Description of the illustration faceted_search_manual_1.png
    3. Return to Page Designer. Click Page X on the Developer toolbar.
    Next, add a button to refresh the page.
13. Add a region to contain a reset button:
    1. In the Rendering tab, right-click Body and select Create Region.
    2. Select the new region. In the Property Editor under Region, edit the following attributes:

       - Identification, Name - Enter `Button Bar`

       - Identification, Type - Accept the default Static Content.

       - Layout, Sequence - Enter `10`

    3. Update the Appearance attributes:

       - Appearance, Template - Select Buttons Container.

       - Appearance, Template Options - Click Use Template Defaults.

         The Template Options dialog appears.

       - Common, Body Padding - Select No Padding.

       - Common, Style - Select Remove UI Decoration.

       - Click OK.

14. Add a button:
    1. In the Rendering tab, right-click the Button Bar region and select Create Button.
    2. Edit the button. Select the button and edit the following attributes in the Property Editor:

       - Identification, Button Name - Enter `RESET`

       - Layout, Slot - Select Next.

    3. Update the Appearance attributes:

       - Appearance, Button Template - Select Text with Icon.

       - Appearance, Template Options - Click Use Template Defaults, Left.

         In the Template Options dialog:

         - Common, Style - Select Remove UI Decoration.

         - Click OK.

       - Appearance, Icon - Click List of Values - Icon and find and select fa-undo.

    4. Update the Behavior attributes:

       - Behavior, Action - Select Redirect to Page in this Application.

       - Behavior, Target - Click No Link Defined.

         In the Link Builder - Target dialog:

         - Target, Page - Select the current page. For example, select 2.

         - Clear/Reset, Clear Cache - Select the current page. For example, select 2.

         - Clear/Reset, Action - Select Reset Regions.

         - Click OK.

    5. Save your changes. Click Save.
15. View the revised page.
    1. Click Save and Run Page.
    2. If prompted, enter your workspace username and password and click Sign In.

       The faceted search page appears. Notice the new Reset button displays in the upper right above the report.

       Description of the illustration faceted_search_manual_2.png
    3. Test the page. Select facets and then click Reset.

Parent topic: Managing Faceted Search