Product Selector

Fusion 5.9
    Fusion 5.9

    Observable and stateful functionsSearch Store API client

    Table of Contents

    Observable functions, such as subscribe, accept callback functions—​sometimes referred to as subscribers—​that are called when the Search Store is updated.

    The Search Store is updated by stateful functions, such as setQuery, which retrieve data from a Query API endpoint.

    The table below details each function, including a description of its usage.

    Function Usage

    Observable

    window.getSearchStore().subscribe(OBJECT)

    Subscribe to changes to stateful functions. Replace OBJECT with the name you assign to the response object.

    Stateful

    window.getSearchStore().setQuery('QUERY')

    Pass a string to set the query.

    window.getSearchStore().setFacets([{ field: 'FIELD', values: ['VALUE_1', 'VALUE_2'] }])

    Pass a JSON object to set the facets returned in the response.

    window.getSearchStore().setPage(PAGE_NUMBER)

    Pass an integer to set the page number of results to return. If the page number value is greater than the actual number of pages of results, the response is an empty docs array.

    window.getSearchStore().setSort('FIELD', 'VALUE')

    Pass two comma-separated strings to set the sort value.

    window.getSearchStore().setSearch(JSON_OBJECT)

    Pass a JSON object that includes, at a minimum, a query.

    The Query API configuration spec includes full descriptions of the parameters used by stateful functions, including the allowable values.

    Examples

    Basic

    Use setQuery to set the query to books and use the query in a searchahead or search function. As an example use case, you can pass the query to the searchahead function right away while storing the value for the search function until the user presses Enter to submit the query.

    window.getSearchStore().setQuery('books')

    Similarly, you can use setPage to set the results page value to 2 and use the value while performing a search or browse operation.

    window.getSearchStore().setPage(2)

    Advanced

    Use setSearch to set the values for multiple search fields using a JSON object. See the Query API configuration spec for full descriptions of the parameters, including the allowable values.

    window.getSearchStore().setSearch({
    "query": "books",
    "page": 1,
    "sort": [{
        "sortField": "relevancy",
        "sortOrder": "asc"
    }],
    "fieldList": [
        "document.title",
        "document.url"
    ],
    "highlight": true
})

    Then, use other observable functions to override the values set by setSearch. For example, you can change the query to movies using the setQuery function and the page value to 5 using the setPage function. The request JSON sent uses these values for the query and page number but still uses the other fields set by setSearch.

    Functions
    window.getSearchStore().setQuery('movies');
window.getSearchStore().setPage(5);

    The full JSON request object includes the updated values.

    {
    "query": "movies",
    "highlight": true,
    "facets": ["file.extension", "document.languageCode", "datasourceLabels", "type"],
    "utcOffset": "-06:00",
    "sessionId": "864782f0-af36-4dee-8430-9e73d6006eaa",
    "sort": [{
        "sortField": "relevancy",
        "sortOrder": "asc"
    }],
    "page": 5
}

    Subscribe

    Use the subscribe function to define actions to take when a stateful function makes a change. The example below demonstrates how to update the page number with a button.

    <script>
    window.onload = async () => {
        window.getSearchStore().subscribe((searchStoreResponse) => {
            console.log('Your results:', searchStoreResponse); (3)
        });
        window.getSearchStore().setSearch({
            "query": "books",
            "page": 1, (2)
            "sort": [{
                "sortField": "relevancy",
                "sortOrder": "asc"
            }],
            "fieldList": [
                "document.title",
                "document.url"
            ],
            "highlight": true
        });
    }
</script>

<button onclick="window.getSearchStore().setPage(2)">Page 2</button> (1)
    1 When a user clicks the button, the setPage function sets the page value to 2.
    2 This overrides the page value 1 in the setSearch function.
    3 The subscribe function is triggered, and the response is logged to the console.