> For the complete documentation index, see [llms.txt](https://docs.navigaglobal.com/dashboard-utility-agent/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://docs.navigaglobal.com/dashboard-utility-agent/master-19/portals/suggest-search.md).

# Suggest search

## About

Returns a component that handles suggest searches towards Open Content and builds up a query that will return a set of requested items

<div align="left"><img src="/files/-LqFhRhqng-jDnczy9tx" alt=""></div>

Can also be configured to handle date searches:

<div align="left"><img src="/files/-LqFh2qNzRDArJWMKq_f" alt=""></div>

Handles created date sorting by default but through config can add multiple sorting fields

## How to use

{% tabs %}
{% tab title="Class component" %}

```javascript
import { Component } from 'react'
import { usePortal, getMappedId } from 'Dashboard'
import SSConfigFunc from './SuggestSearchConfig'


class MyClass extends Component {
    constructor(props) {
        super(props)
        
        this.autoSearch = true
        this.ocInstance = {} //instance of Content Agent oc instance
        this.suggestSearch = null
        
        this.state = {
            isSearching: false,
            start: 0,
            limit: 15
        }
    }

    componentDidMount() {
        this.suggestSearch = usePortal(getMappedId('@plugin_bundle', 'portal', 'MY_SS_PORTAL_ID'))
    }
    
    render() {
        const {localize} = this.props
        const {start, limit} this.state
        const SuggestSearch = this.suggestSearch
        const suggestSearchConfig = SSConfigFunc({
            start: start,
            limit: limit
        })
        
        return (
            {SuggestSearch &&
                <SuggestSearch
                    dateSearch
                    cacheLastSearch
                    cacheKey={this.props.id}
                    onSearch={this.onSearch}
                    ocInstance={this.ocInstance}
                    autoSearch={this.autoSearch}
                    suggestSearchConfig={suggestSearchConfig}
                    className={"@plugin_bundle_class-suggest-search"}
                    searching={isSearching => this.setState({ isSearching })}
                    localizations={{
                        searchAgain: localize.searchAgain,
                        saveSearch: localize.saveSearch,
                        savedSearches: localize.savedSearches,
                        from: localize.from,
                        to: localize.to,
                        placeholder: localize.placeholder,
                        updated: localize.updated,
                        created: localize.created
                    }}
                />
            }
        )
    }
}

```

{% endtab %}

{% tab title="index.js" %}

```javascript
import { register } from 'Dashboard'

(() => {
    register({
        bundle: "@plugin_bundle",

        application: MyApplication,
        settings: MySettings,

        requirements: {
            actions: [],
            portals: [
                {
                    id: 'MY_SS_PORTAL_ID',
                    name: 'Suggest search portal',
                    description: 'A portal to render suggest search',
                }
            ]
        }
    })
})()
```

{% endtab %}

{% tab title="SuggestSearchConfig.js" %}

```javascript
export default ({start, limit}) => {
    suggestFields: [
            {
                name: 'PubStatus', 
                order: 10
            }, 
            {
                name: 'Tags', 
                order: 15 
            },
            {
                name: 'Authors',
                order: 20
            }
        ],
        suggestLabels: {
            'PubStatus': 'Status', 
            'Tags': 'Tagg', 
            'Authors': 'Författare'
        },
        searchOptions: {
            start: start,
            limit: limit,
            property: [
                'uuid', 
                'PubStatus', 
                'Tag', 
                'Authors',
                'ConceptRelations.headline'
            ],
            filters: [
                {
                    property: 'ConceptRelations',
                    q: 'ConceptStatus: usable',
                    start: 0,
                    limit: 1
                }
            ],
            defaultQuery: '*:* NOT PubStatus:draft',
            filterQuery: 'contenttype:Article',
            sortField: 'updated',
            sortAscending: false
        },
        dateOptions: {
            properties: [
                {
                    sortable: true,
                    label: 'Publish date',
                    value: 'WriterPubStart'
                }
            ],
        },
        freeTextOrder: 0
}
```

{% endtab %}
{% endtabs %}

| Property                | Description                                                                           | Default |
| ----------------------- | ------------------------------------------------------------------------------------- | ------- |
| **dateSearch**          | A boolean whether dateSearch should be displayed                                      | false   |
| **cacheLastSearch**     | A boolean whether last search will be cached                                          | false   |
| **cacheKey**            | A string to identify the specific cache payload                                       |         |
| **onSearch**            | Callback function when a search has occurred                                          |         |
| **ocInstance**          | A instance of Content Agent open content object                                       |         |
| **autoSearch**          | Trigger a search when component did mount                                             | false   |
| **suggestSearchConfig** | Search config *(see below)*                                                           |         |
| **searching**           | A callback function when searching is triggered, returns searching state (true/false) |         |
| **localizations**       | A object for translating strings                                                      |         |

```javascript
const suggestSearchConfig = {
    suggestFields: [
        {
            name: 'PubStatus', 
            order: 10
        }, 
        {
            name: 'Tags', 
            order: 15 
        },
        {
            name: 'Authors',
            order: 20
        }
    ],
    suggestLabels: {
        'PubStatus': 'Status', 
        'Tags': 'Tagg', 
        'Authors': 'Författare'
    },
    searchOptions: {
        start: 0,
        limit: 15,
        property: [
            'uuid', 
            'PubStatus', 
            'Tag', 
            'Authors',
            'ConceptRelations.headline'
        ],
        filters: [
            {
                property: 'ConceptRelations',
                q: 'ConceptStatus: usable',
                start: 0,
                limit: 1
            }
        ],
        defaultQuery: '*:* NOT PubStatus:draft',
        filterQuery: 'contenttype:Article',
        sortField: 'updated',
        sortAscending: false
    },
    dateOptions: { // requires dateSearch true as a property
        properties: [
            {
                sortable: true,
                label: 'Publish date',
                value: 'WriterPubStart'
            }
        ],
    },
    freeTextOrder: 0
}
```

| Key               | Value                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                        |
| ----------------- | -------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
| **suggestFields** | <p>Array of objects containing information what to trigger suggestions on</p><p><code>{</code><br>    <code>name: 'indexfield to to suggest against',</code><br>    <code>order: integer to determine order of output in list</code><br><code>}</code></p>                                                                                                                                                                                                                                                                                                                                   |
| **suggestLabels** | Object containing labels for the suggestions fields                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                          |
| **searchOptions** | <p><code>{</code><br>    <code>start: search start index,</code><br>    <code>limit: number of hits to get back,</code><br>    <code>property: properties to fetch with the search,</code><br>    <code>filters: array of objects containing sub filters for query,</code><br>    <code>defaultQuery: the default query to search for,</code><br>    <code>filterQuery: a filter that will always be added,</code><br>    <code>sortField: a property that the query will be sorted on,</code><br>    <code>sortAscending: a boolean to determine sorting order</code><br><code>}</code></p> |
| **dateOptions**   | <p><code>{</code><br>    <code>properties: \[</code><br>        <code>sortable: boolean if the property is sortable</code><br>        <code>label: label to output</code><br>        <code>value: OC date property</code><br>    <code>]</code><br><code>}</code></p>                                                                                                                                                                                                                                                                                                                        |
|                   |                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                              |