Technical preview
Workplace Search connector for Search UI is currently in technical preview status. It is not ready for production use.
This guide will walk you through getting up and running with a Search UI using Elastic Workplace Search as a backend.
Have problems with the setup? Let us know in the feedback issue, and we'll try to help.
Before continuing with this guide, make sure you:
The best way to get started with Elastic Workplace Search is to follow our Getting Started guide.
To index data into Workplace Search, read the Content Sources Overview and follow a guide for any content source available there.
Have you indexed data into Workplace Search? Great! Let's create a search page in your application.
We'll use React components in this tutorial, but you can use Search UI with any UI framework and even vanilla JavaScript. Read about our Architecture to learn more about using Search UI outside of React.
First, let's install Search UI packages:
npm install @elastic/react-search-ui @elastic/search-ui-workplace-search-connector
Next, create a new page in your application and add the following code:
import React from "react";
import WorkplaceSearchAPIConnector from "@elastic/search-ui-workplace-search-connector";
import {
SearchProvider,
SearchBox,
Results,
Paging,
WithSearch
} from "@elastic/react-search-ui";
import { Layout } from "@elastic/react-search-ui-views";
import "@elastic/react-search-ui-views/lib/styles/styles.css";
const connector = new WorkplaceSearchAPIConnector({
kibanaBase: "",
enterpriseSearchBase: "",
redirectUri: "",
clientId: ""
});
const config = {
apiConnector: connector,
alwaysSearchOnInitialLoad: true
};
export default function WorkplaceSearch() {
return (
<SearchProvider config={config}>
<WithSearch
mapContextToProps={({ authorizeUrl, isLoggedIn, logout }) => ({
authorizeUrl,
isLoggedIn,
logout
})}
>
{({ authorizeUrl, isLoggedIn, logout }) => {
return (
<div>
{isLoggedIn ? (
<button onClick={logout}>Log out</button>
) : (
<a href={authorizeUrl}>Log in</a>
)}
<Layout
header={<SearchBox />}
bodyContent={<Results />}
bodyFooter={<Paging />}
/>
</div>
);
}}
</WithSearch>
</SearchProvider>
);
}
This page shouldn't work yet. To connect to the Workplace Search backend, you need to provide some details in the connector configuration.
Here's where to get the required configuration parameters:
kibanaBase
and enterpriseSearchBase
You can get both values on the API Keys page in Workplace Search:
kibanaBase
— from the url,enterpriseSearchBase
— from the Endpoint panel.redirectUri
Use the path to the page where Search UI is going to live.
clientId
To get a clientId, you need to create a new OAuth application in Workplace Search.
redirectUri
value from the previous step.Client id
from the Credentials section.After finishing these steps, you should have a configuration that looks something like this:
const connector = new WorkplaceSearchAPIConnector({
kibanaBase:
"https://my-deployment-10151b.kb.us-central1.gcp.cloud.es.io:9243",
enterpriseSearchBase:
"https://my-deployment-10151b.ent.us-central1.gcp.cloud.es.io",
redirectUri: "http://localhost:3001",
clientId: "d06a6d2db34ac6f6315cb5e37f84186fa84279371b5fd44186ed84afba14c70e"
});
You should now be able to authorize.
Click on the "Log in" link in the Search UI and authorize the application to search your data.
Once you click the Authorize button, you should be redirected back to your application and see the search results.
Congratulations! You have successfully connected to Workplace Search.
The UI we have now is very minimal. That is intentional to get you started quickly.
Some of the next steps you could take to improve your search experience are:
Check out our example page where we added some of these items, or follow other guides in this documentation.