Filter Data Displayed in a Component

When you bind a component to an endpoint, you can filter the data displayed in the component by defining filter expressions in the Service Data Provider used to retrieve the data. You can use expressions and static content to set the filter criteria values and Oracle JET operators to define the logic.

To display data in a collection component such as a list or table, you usually bind the component to an endpoint using a variable that is assigned the built-in Service Data Provider (SDP) type. This variable is created for you when you use the Add Data Quick Start to bind the component to an endpoint. The SDP type manages requesting and receiving data from an endpoint, and supports a filterCriterion property that can be configured to filter the data stored in the variable and displayed in the component. The filterCriterion structure can be used to express many of the filter expressions you might want to use when retrieving data. For more details, see Service Data Provider.

Note:

For more advanced filtering you can write JavaScript filtering functions that you can call from an action chain. See Work with the Functions Editor and Add a Call Module Function Action.

You build a filter expression by defining the properties of the three filterCriterion attributes (attribute, op, value). The filter expression is converted into an appropriate "q" query string when sent to the endpoint. You can make complex filters by combining multiple filter expressions. You can create a filter expression using the Assign Variables window of an action, or you can edit the JSON file where the action is defined (for example, main-start-page.json). The following table describes the filterCriterion attributes that you define in a filter expression.

Attributes Description

attribute

Name of the attribute. Typically this is the name of the field that the filter will process.

op

Supported Oracle JET operator. Common operators are, for example, $co (The entire operator value must be a substring of the attribute value for a match.), $eq (The attribute and operator values must be identical for a match.) and $ne (The attribute and operator values are not identical.). The operator $regex is not supported.

For a list of Oracle JET operators, see https://www.oracle.com/webfolder/technetwork/jet/jsdocs/oj.AttributeFilterOperator.html.

value

Value of the attribute. This is the value that is used to filter the request. This value can be mapped to an expression (for example, a page variable) or a static value (for example, a string or number).

You can define filterCriterion attributes by editing the SDP properties in the Variables editor, or you can build a filter function in the page using variables, components and action chains. For example, you can create a filter for a collection such as a table using filterCriterion and use a page variable to store a string that a user enters in an input field. When the SDP sends a request to the endpoint, the filter processes the request and only the records that meet the filter criteria are returned and displayed.

Create a Filter for Component Data

You filter the data displayed in a component by defining the filterCriterion property used when calling the Service Data Provider to retrieve the data. You can use the Filter Builder to help define the filter criteria values and Oracle JET operators used to define the logic of the filter.

When you use the Add Data Quick Start to bind a collection component to a data source, you can use the Filter Builder in the Define Query step to filter data that you do not need to retrieve. For example, you can build a filter to only retrieve the business objects where the value of a field named "Active" equals "true", or equals some page variable.

To assign a page variable as a filter criterion in an action chain:

  1. Create a page variable (for example, filterVar) to store the filter string.

    The value of the page variable can be pre-defined (for example, an input parameter), or you can bind it to a page component such as an Input Text or Combobox component to allow users to enter text strings, numbers or select from a list.


    Description of filter-input-variable.png follows
    Description of the illustration filter-input-variable.png
  2. Create an action chain or open an existing action chain.

    The action chain will use the Assign Variables action to map a page variable to the value attribute in the filter expression. The action chain can be triggered by a component event or a page event.

    Tip:

    To create a filter using an Input Text component, you could use the Quick Start in the component’s Events tab to add a Property Change event to the component. The Quick Start will automatically create a new action chain that is triggered by the event.


    Description of filter-input-event.png follows
    Description of the illustration filter-input-event.png
  3. Add the Assign Variables action to the chain.

    You configure the Assign Variables action to assign values to each of the attributes of the filter expression.


    Description of filter-action-assignvariable.png follows
    Description of the illustration filter-action-assignvariable.png
  4. Click Assign in the action property editor to open the Assign Variables window.
  5. Expand the Service Data Provider in the Target pane and select filterCriterion to open the Filter Builder.

    The Filter Builder contains a Builder tab where you build expressions with the help of drop-down lists, and a Code tab where you build or edit them in a code editor.



    Alternatively, you can expand the filterCriterion node in the Target pane and build your filter by specifying values for attribute, op and value individually.

  6. In the Filter Builder, create a condition by specifying the Attribute, Operator and Value.

    When you create an filter in the Builder tab, you create one or more filter conditions by selecting items in the Attribute, Operator and Value drop-down lists. You can add more conditions to build more complex filters.



    You can use the Code tab to view and edit the filter. After defining a condition in the Builder tab, in the Code tab you will see that it contains an attribute,op and value. For example, your definition of filterCriterion might have two conditions and be similar to the following:

    {
     "op": "$and",
     "criteria": [
      {
       "op": "$eq",
       "attribute": "name",
       "value": "{{ $page.variables.filterVar }}"
      },
      {
       "op": "$eq",
       "attribute": "id",
       "value": "{{ $page.variables.idVar }}"
      }
     ]
    }

    In this example, the value attribute ($page.variables.customerListSDP.filterCriterion.criteria[0].value) is mapped to a page variable expression ($page.variables.filterVar), the Oracle JET operator is "$eq" (it must include the dollar sign (“$”)), and the attribute value is the name of the field that you want to filter on.