Add a Custom Attribute to the Partner Finder Filter

In this example, let's look at how to add a custom Region filter to your Partner Finder application. This will let users filter partner search results by region.

In VBCS, complete these steps:

  1. Navigate to Web Applications > partnerfinder > Flows > partner-finder.

  2. Click the Variables and Types icon (x) > Variables tab > aggregations.

    This is a screenshot of the values to select to add a custom field to the Filter region in the Partner Finder search results.
  3. In the Default Value region, add the custom Region field to the aggregations using the below code:

    "Region": {
            "ignore": true,
            "terms": {
                "attribute": "Region_c",
                "minBucketCount": 1,
                "maxNumberOfBuckets": 4,
                "other": false,
                "missing": false,
                "localize": true
            }
        },
    
    This is a screenshot of manually adding the custom Region field to the Default Value region.
  4. Navigate to Web Applications > partnerfinder > Flows > partner-finder-search.

    This is a screenshot of the values to select to update the partner-finder-search flow.
  5. Click the Variables and Types icon (x) > Variables tab > additionalCriteria.

    This is a screenshot of the values to select to update the additionalCriteria variable.
  6. In the Default Value region, add the custom attribute to additionalCriteria using the below code:

      "ElasticCustAggregation": {
            "attribute": "Region_c",
            "op": "$in",
            "values": []
        },
    This is a screenshot of manually adding the custom Region field to the Default Value region.
  7. Add the custom field name, Region, to the string repository so that it can be referenced within the application.

    This is a screenshot of how to add the Region field name to the string repository so that it can be referenced within the application.
    This is a screenshot of how to add the Region field name to the string repository so that it can be referenced within the application.
  8. Navigate to Web Applications > partnerfinder > Flows > partner-finder > partner-finder-search > Designer > click the Code button.

    This is a screenshot of the Code button.
  9. Add the custom attribute to the partner finder search html page using the below code:

    <oj-bind-if test="[[ $variables.buckets.Region && $variables.buckets.Region.length>0 ]]">
         <div>
             <oj-label id="odps-pf-search-filter-region-Label" class="odps-pf-search-results-filter-label"><oj-bind-text value="[[ $application.translations.app.searchresults_filter_region ]]"></oj-bind-text></oj-label>
             <oj-checkboxset id="odps-pf-search-filter-region-checkbox" labelled-by="odps-pf-search-filter-region-Label" class="odps-pf-search-results-filter-checkbox" value="{{ $variables.additionalCriteria.Region.values }}">
             <oj-bind-for-each data="[[ $page.variables.buckets.Region ]]">
                  <template>
                     <oj-option value="[[$current.data.key]]">
                     <oj-bind-text value="[[ $current.data.localizedKey + ' (' + $current.data.count + ')' ]]"></oj-bind-text>
                     </oj-option>
                   </template>
             </oj-bind-for-each>
             </oj-checkboxset>
          </div>
    </oj-bind-if>
    This is a screenshot of adding the custom attribute to the partner finder search html page.
  10. Navigate to Web Applications > partnerfinder > Flows > partner-finder > partner-finder-search > Actions > SearchKeywordValueChangedAction.

    This is a screenshot that displays clicking the Actions icon > SearchKeywordValueChangedAction option.
  11. Update the condition for ifFilterIsEmpty as follows:

    [[ $page.variables.additionalCriteria.Country.values.length === 0 && $page.variables.additionalCriteria.Tier.values.length === 0 && $page.variables.additionalCriteria.Type.values.length === 0 && $page.variables.additionalCriteria. Region.values.length === 0]]
    This is a screenshot of updating the condition for ifFilterIsEmpty.
  12. Navigate to Web Applications > partnerfinder > Flows > partner-finder > partner-finder-search > Actions > refreshFilters.

    This is a screenshot that displays clicking the Actions icon > refreshFilters option.
  13. Add an additional refresh condition for the custom attribute as mentioned below:

    1. Add an if condition to "Run in Parallel" as follows:

      [[ $page.variables.buckets.Region && $page.variables.buckets.Region.length > 0 ]]
      This is a screenshot of adding an if condition to "Run in Parallel."
    2. Add the call component method and link it to the corresponding check box component (odps-pf-search-filter-region-checkbox):

      This is a screenshot of adding the call component method, and linking it to the corresponding check box component.
  14. Click the Play icon to run the application to verify the change.

    This is a screenshot of the Play icon in VBCS.
  15. Verify the change. Notice that there is now a custom Region filter in your Partner Finder application.

    This is a screenshot of the final result of adding a custom Region filter to the Partner Finder application.