How does it work?
SearchBase
is a provider component that provides the SearchBase context to the child components. It binds the backend app (data source) with the UI view components (elements wrapped within SearchBase), allowing a UI component to be reactively updated every time there is a change in the data source or in other UI components.
Props
To configure the Appbase environments
-
index
string
[required] Refers to an index of the Elasticsearch cluster.Note:
Multiple indexes can be connected to by specifying comma-separated index names. -
url
string
[required] URL for the Elasticsearch cluster -
credentials
string
[required] Basic Auth credentials if required for authentication purposes. It should be a string of the formatusername:password
. If you are using an appbase.io cluster, you will find credentials under theSecurity > API credentials
section of the appbase.io dashboard. -
appbaseConfig
Object
allows you to customize the analytics experience when appbase.io is used as a backend. It accepts an object which has the following properties:- recordAnalytics
Boolean
allows recording search analytics (and click analytics) when set totrue
and appbase.io is used as a backend. Defaults tofalse
. - enableQueryRules
Boolean
Iffalse
, then appbase.io will not apply the query rules on the search requests. Defaults totrue
. - enableSearchRelevancy
Boolean
defaults totrue
. It allows you to configure whether to apply the search relevancy or not. - userId
string
It allows you to define the user id to be used to record the appbase.io analytics. Defaults to the client's IP address. - useCache
Boolean
This property when set allows you to cache the current search query. TheuseCache
property takes precedence irrespective of whether caching is enabled or disabled via the dashboard. - customEvents
Object
It allows you to set the custom events which can be used to build your own analytics on top of appbase.io analytics. Further, these events can be used to filter the analytics stats from the appbase.io dashboard. - enableTelemetry
Boolean
When set tofalse
, disable the telemetry. Defaults totrue
.
- recordAnalytics
To customize the query execution
-
headers
Object
[optional] set custom headers to be sent with each server request as key/value pairs. -
transformRequest
Function
Enables transformation of network request before execution. This function will give you the request object as the param and expect an updated request in return, for execution.
<template>
<search-base
index="gitxplore-app"
url="https://@arc-cluster-appbase-demo-6pjy6z.searchbase.io"
credentials="a03a1cb71321:75b6603d-9456-4a5a-af6b-a487b309eb61"
:transformRequest="transformRequest"
/>
</template>
<script>
export default {
name: "App",
methods: {
transformRequest(elasticsearchResponse) {
return Promise.resolve({
...request,
credentials: include,
})
}
}
}
</script>
- transformResponse
Function
Enables transformation of search network response before
rendering them. It is an asynchronous function which will accept an Elasticsearch response object as param and is expected to return an updated response as the return value.
<template>
<search-base
index="gitxplore-app"
url="https://@arc-cluster-appbase-demo-6pjy6z.searchbase.io"
credentials="a03a1cb71321:75b6603d-9456-4a5a-af6b-a487b309eb61"
:transformResponse="transformResponse"
/>
</template>
<script>
export default {
name: "App",
methods: {
async transformResponse(elasticsearchResponse) {
const ids = elasticsearchResponse.hits.hits.map(item => item._id);
const extraInformation = await getExtraInformation(ids);
const hits = elasticsearchResponse.hits.hits.map(item => {
const extraInformationItem = extraInformation.find(
otherItem => otherItem._id === item._id,
);
return {
...item,
...extraInformationItem,
};
});
return {
...elasticsearchResponse,
hits: {
...elasticsearchResponse.hits,
hits,
},
};
}
}
}
</script>
Note: transformResponse function is expected to return data in the following structure.
{
// Elasticsearch hits response
hits: {
hits: [...],
total: 100
},
// Elasticsearch aggregations response
aggregations: {
}
took: 1
}
Advanced Usage
While the vue-searchbox
library should give you good controls out of the box to build the powerful search UIs, there can be times when you need access to the state (context) of the components.
Example Use Cases
One would need to use the state (context) of the search components, e.g. to show a list of all active user query inputs including the ability to unselect an input to affect the particular search component's input as well.
Another use can be to create a saved query feature where it's important persist the state of all the search and filter components.
Basic Usage
<script>
export default {
name: "App",
inject: ['searchbase'],
render() {
console.log("component instance", this.searchbase.getComponent('component-id'))
return null
}
}
</script>
Properties
-
getComponents
Function: () => Object<string, Object>
returns an object, which is a list of allSearchComponent
instances contained within theSearchBase
Context as key-value pairs withkey
as component ids. -
getComponent
Function: (String) => Object
returns an object contained within theSearchBase
Context, which is theSearchComponent
instance for the provided componentid
.
Example
The below example renders the active filters using a separate <selected-filters />
component, which uses the searchbase
context injected in the component.