Search

The Search API offers two distinct functionalities: you can use it to create both search providers and search clients. Search providers are apps that respond to search queries, whereas search clients are apps that initiate searches. For instance, a search provider may return a list of instruments as a response to a search query, and may also support one or more actions - like showing a chart for the selected instrument. Actions may be executed when the user clicks on a result in the UI of a search client app. You may present multiple actions as options to the user via the search client UI, so that they may choose how to handle the search result depending on their current needs. The Search API also enables you to define search types, set debounce time for search queries, set limits for search results and more.

To be able to use the Search API in your interop-enabled apps, install the @interopio/search-api library in your project and reference it in your app. Depending on whether you want to use the Search API in your Main app, or in a Browser Client app, see the respective initialization examples in the following sections.

Install the necessary packages:

npm install @interopio/browser-platform @interopio/search-api

Initialize the @interopio/browser-platform library enabling the Search API by passing the IOSearch() factory function to the libraries array of the configuration object:

import IOBrowserPlatform from "@interopio/browser-platform";
import IOSearch from "@interopio/search-api";

const config = {
    browser: {
        libraries: [IOSearch]
    }
};

const { io } = await IOBrowserPlatform(config);

// Now you can access the Search API through `io.search`.

To enable the Search API in your Browser Client apps, install the @interopio/browser and @interopio/search-api libraries and initialize the @interopio/browser library by passing the IOSearch() factory function in the configuration object. When IOBrowser() resolves, the Search API will be accessible via the search property of the returned object - e.g., io.search. The following examples demonstrate how to enable the Search API in JavaScript, React and Angular apps.

JavaScript

Install the necessary packages:

npm install @interopio/browser @interopio/search-api

Initialize the @interopio/browser library enabling the Search API:

import IOBrowser from "@interopio/browser";
import IOSearch from "@interopio/search-api";

const config = {
    libraries: [IOSearch]
};

const io = await IOBrowser(config);

// Now you can access the Search API through `io.search`.

By default, the IOBrowser() and IOSearch() factory functions are injected in the global window object.

React

Install the necessary packages:

npm install @interopio/react-hooks @interopio/search-api

Initialize io.Connect in one of the following ways:

• using the <IOConnectProvider /> component:

import IOBrowser from "@interopio/browser";
import IOSearch from "@interopio/search-api";
import { IOConnectProvider } from "@interopio/react-hooks";

const settings = {
    browser: {
        factory: IOBrowser,
        config: {
            libraries: [IOSearch]
        }
    }
};

ReactDOM.render(
    <IOConnectProvider fallback={<h2>Loading...</h2>} settings={settings}>
        <App />
    </IOConnectProvider>,
    document.getElementById("root")
);

• using the useIOConnectInit() hook:

import IOBrowser from "@interopio/browser";
import IOSearch from "@interopio/search-api";
import { useIOConnectInit } from "@interopio/react-hooks";

const App = () => {
    const settings = {
        browser: {
            factory: IOBrowser,
            config: {
                libraries: [IOSearch]
            }
        }
    };

    const io = useIOConnectInit(settings);

    return io ? <Main io={io} /> : <Loader />;
};

export default App;

Angular

Install the necessary packages:

npm install @interopio/ng @interopio/search-api

Pass the IOSearch() factory function to IOBrowser() using the config object:

import { BrowserModule } from "@angular/platform-browser";
import { NgModule } from "@angular/core";
import { AppComponent } from "./app.component";
import { IOConnectNg } from "@interopio/ng";
import IOBrowser from "@interopio/browser";
import IOSearch from "@interopio/search-api";

@NgModule({
    declarations: [
        AppComponent
    ],
    imports: [
        BrowserModule,
        IOConnectNg.forRoot({ browser: { factory: IOBrowser, config: { libraries: [IOSearch] } } })
    ],
    providers: [],
    bootstrap: [AppComponent]
})
export class AppModule { }