UI - Olive Developer Documentation

Starting with the v0.25 release of Olive Helps, if a Loop utilizes listenSearchbar or listenGlobalSearch, the search bar will focus when the Loop is selected from the dropdown. If a Loop does not use these methods, the search bar will not focus when the Loop is selected from the dropdown.
API
Example
Permissions
listenGlobalSearch
Creates a listener receiving updates whenever the user enters a search in the Olive Helps Global Search. The Global Search is different from the search bar at the top of Olive Helps, and is triggered by using Command+O on Mac or Ctrl+O on Windows.
1
import { ui } from '@oliveai/ldk';
2
​
3
ui.listenGlobalSearch((text) => {
4
    // Code to run using the text that the user
5
    // entered into the Global Search
6
})
Copied!
listenSearchbar
Creates a listener receiving updates whenever the user enters a search in the Olive Helps Searchbar. The searchbar can be found at the top of Olive Helps, by clicking the magnifying glass icon.
1
import { ui } from '@oliveai/ldk';
2
​
3
ui.listenSearchbar((text) => {
4
    // Code to run using the text that the user
5
    // entered into the Searchbar
6
})
Copied!
loopOpenHandler
Registers a handler function for the Olive Helps Loop Open Button. This function runs when you open the Searchbar, click All, and select your loop. Click here for more detail.
1
import { ui } from '@oliveai/ldk';
2
​
3
ui.loopOpenHandler(() => {
4
    // Code to run when the user selects your loop
5
    // from the Searchbar list
6
})
Copied!
In this example, we trigger a whisper to show when the user selects your loop from the Searchbar list
1
import { ui } from '@oliveai/ldk';
2
​
3
ui.loopOpenHandler(() =>
4
    whisper.create({
5
        label: 'Start Whisper',
6
        components: [
7
            {
8
                type: whisper.WhisperComponentType.Markdown,
9
                body: "I'm a whisper that only opens when loopOpenHandler is called",
10
            },
11
        ],
12
    })
13
);
Copied!
In this example, we open a whisper when the user enters "/example" in either the Global Search or the Searchbar.
1
import { ui } from '@oliveai/ldk';
2
​
3
const searchHandler = (text) => {
4
    if (text === '/example') {
5
        whisper.create({
6
            label: 'Start Whisper',
7
            components: [
8
                {
9
                    type: whisper.WhisperComponentType.Markdown,
10
                    body: "I'm a whisper that only opens when loopOpenHandler is called",
11
                },
12
            ],
13
        })
14
    }
15
};
16
​
17
ui.listenGlobalSearch(text => handler(text));
18
ui.listenSearchbar(text => handler(text));
Copied!
To use the UI aptitude, simply set the following permissions in your package.json under the ldk object.
1
...
2
"ldk": {
3
  "permissions": {
4
    "ui": {},
5
    ...
6
  }
7
},
8
...
Copied!
​

APTITUDES - Previous

System

Loop UI Handlers

Last modified 28d ago

Copy link