@glue42/launchpad-ui-react

Glue42 Launchpad and Global Search ·

This @glue42/launchpad-react-ui component library contains Glue42 enabled React components that let you create a Glue42 toolbar. It exports two main components: <Launchpad/> and <GlobalSearch/>. The primary purpose of a Glue42 toolbar is managing the applications, workspaces and various Glue42 Enterprise settings available to the user. In addition to that, you can create an application that implements the Search Provider protocol and be able to send your own custom search results to the <GlobalSearch/> component, which can do whatever you program them to do, when a user clicks on them!

Currently @glue42/launchpad-react-ui components only work with Glue42 Enterprise. Glue Desktop for Enterprise should already be running in order for the toolbar to be usable.

Quick Start

---

Getting started with the default settings

You need to a create a React application using create-react-app cli tool. Run the following command in a directory of your choice:

npx create-react-app awesome-glue-toolbar

The toolbar is a Glue Desktop Application that is configured to run on http://localhost:3008 by default. The <Launchpad /> component is served on the URL path /launchpad and the <GlobalSearch /> component is served on the URL path /global-search. You must instruct create-react-app to launch the awesome-glue-toolbar application on port 3008. You can do that by creating a .env file at the root of the project directory with the following text:

PORT=3008
SKIP_PREFLIGHT_CHECK=true

After setting up on which port the application should run on, install the following dependencies:

npm i -S @glue42/launchpad-ui-react @glue42/react-hooks react-router-dom

The toolbar expects that the Glue object is initialized using the @glue42/react-hooks library. You need to import the <GlueProvider /> component from it. It uses the React Context API to pass the initialized Glue object down the React tree. You need to pass the following object { appManager: 'full', layouts: 'full' to the config prop of the <GlueProvider />, because they are required for proper operation. Go to the index.js file of the awesome-glue-toolbar project and add the following code:

import React from 'react';
import ReactDOM from 'react-dom';
import '@glue42/launchpad-ui-react/dist/vnext.css';
import Glue from '@glue42/desktop';
import { GlueProvider } from '@glue42/react-hooks';

import { LaunchPad, GlobalSearch } from '@glue42/launchpad-ui-react';

ReactDOM.render(
  <GlueProvider config={{ appManager: 'full', layouts: 'full' }} glueFactory={Glue}>
    <BrowserRouter>
      <Route exact path="/launchpad" component={LaunchPad} />
      <Route path="/global-search" component={GlobalSearch} />
    </BrowserRouter>
  </GlueProvider>,
  document.getElementById('root')
);

and run the following command:

npm start

You should now be able to open Launchpad when you press the Wnd + G keyboard combination and Global Search when you press the Ctrl + Space keyboard combination.

Launchpad Features Overview

---

Displaying all applications and layouts of type Global and Workspace in <Lanchpad/> which are not hidden

Upon starting the application that uses the <Launchpad/> component, it will load all of the Glue42 applications and layouts that are avaliable to the current user.

Grouping applications and layouts by folders

Folder names can be specified in the configuration files of different layouts and applications which Launchpad will automatically detect and group the applications and layouts by their corresponding folders. Layouts and applications without folders will be grouped at the bottom of the list

Searching by application/layout name

At the top there is a search bar which allows for searching applications and layouts by name.

Constrain the search to layout names only

When you click on the Show layouts only button next to the search bar, <Launchpad/> will show you only the layouts whose name includes the search term.

Marking applications and layouts as favorites

You can mark every application and layout in the list as favorite by clicking on the star icon next to it's name, so that you can have easy access to it in the future. Clicking on the star icon again will unmark the given application as favorite.

Track recently used applications and layouts

Every time you click on applications and layouts they will be marked as recently used.

Use the context-sensitive menu

You can right click on items in the list of applications and layouts, on the favorite and recently used applications and layouts as well, which will bring up a context-sensitive menu. You can mark an application or layout as favorite, unmark it, and you can even delete layouts using this menu, when you click on a layout

Saving the current layout

When you have a few open applications, you can save them as a layout by pressing the keyboard combination Ctrl + S while the Launchpad part of the toolbar is open. This will bring a dialog which will prompt you to enter the layout's name and then save it when you click on the save button. If you enter a layout's name which already exists, the dialog will offer to replace the existing layout. You can close the dialog ot any time by clicking on the Cancel button, by clicking on the close button at the top of the window, or by pressing the Escape key.

See notifications and open the notifications bar

You have a bell icon at the top left corner of the Launchpad window which shows the current number of unread notifications. By clicking on it, you can view them in the notifications bar, which will be opened.

Hamburger menu

Next to the notificaions bell, there is a hamburger menu which contains usefull information and a coule of features. The information included is:

• Glue42 Version
• Current user
• Gateway URL
• Environment and region

The functionality provided by the hamburger menu is:

• Save Layout - which will open the previously mentioned layout dialog
• Launch Global Search - which will open the Global Search window
• Switch Themes
• Feedback - which will open the Glue42 Feedback form
• About - which will open the Glue42 About form
• Restart
• Shutdown

Global Search Features Overview

---

Loading results from Search Providers

Global Search will make a request to all Glue 42 Search Providers when you start typing in the search box. All the results will be displayed in a list at the bottom of the search box.

Mark result as favorite

You can mark the returned results as favorites by clicking on the star icon next to their name. They will be presented in Launchpad.

Mark resutls as recently used

Whenever a search result is clicked or opened in any way through Global Search, it will be marked as recently used in Launchpad.

Provide your custom search results

You can create your own Search Provider! Global Search follows a protocol when making requests to and getting results from search providers. The protocol uses the Glue42 Interop API as a communication medium. If you properly implement the given protocol and supply data in the appropriate format, you can send results to Global Search whenever someone starts searching for something! The protocol is not limited to just returning items as search results. You can specify an action that should happen when someone clicks on the result that has been returned by your search provider! The only limitation is that the action must happen through the Glue42 Interop API.

Customizations

---

LaunchPad

• logo
• renderBusinessObjectItem
• renderFavoriteItem
• renderRecentItem

Global Search

• renderGlobalSearchItem