Search UI with Workplace Search

Deprecation Notice

Workplace Search connector for Search UI is deprecated and will no longer be supported. Please migrate to Elasticsearch Connector for continued support.

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.

Prerequisites

edit

Before continuing with this guide, make sure you:

have a running Elastic deployment with Enterprise Search and
indexed some data in Workplace Search.

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.

Creating a search page

edit

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 API reference 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.

Adding connector configuration

edit

Here’s where to get the required configuration parameters:

`kibanaBase` and `enterpriseSearchBase`

edit

You can get both values on the API Keys page in Workplace Search:

kibanaBase — from the url,
enterpriseSearchBase — from the Endpoint panel.

`redirectUri`

edit

Use the path to the page where Search UI is going to live.

`clientId`

edit

To get a clientId, you need to create a new OAuth application in Workplace Search.

In Workplace Search, go to Settings, then OAuth application.
In the Redirect URIs field, add the redirectUri value from the previous step.
Deselect Confidential toggle.
Save changes.
Copy the 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"
});