Skip to content

Commit 65e6e37

Browse files
authored
Include README and usage
1 parent ea424bb commit 65e6e37

File tree

1 file changed

+32
-0
lines changed
  • Client-Side Components/UX Client Script Include/Reusable Debounce

1 file changed

+32
-0
lines changed
Lines changed: 32 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,32 @@
1+
## Add a debounce to search fields or other inputs with a client script
2+
Inputs, Typeaheads, and other components that can be used for searching the database, caches, or local storage. However, performing a search for every keypress or other change is often unnecessary and uses more resources than strictly necessary. This UX Client Script Include is a small utility for managing debounces, allowing a 'cool-off' from inputs before performing the activity.
3+
4+
### Steps
5+
1. Create a new UX Client Script Include (`sys_ux_client_script_include`), using the script from the associated snippet
6+
2. Create a new Client Script in UI Builder, and add the include you created in 1 as a dependency
7+
3. Within the Client Script, import the Script Include as follows, replacing `global.DebounceUtilName` with the scope and UX Client Script Include name:
8+
```js
9+
const DebounceUtil = imports["global.DebounceUtilName"]();
10+
```
11+
4. Within the Client Script, declare a `function` to be called inside the debounce function
12+
13+
### Example usage
14+
```js
15+
/**
16+
* @param {params} params
17+
* @param {api} params.api
18+
* @param {any} params.event
19+
* @param {any} params.imports
20+
* @param {ApiHelpers} params.helpers
21+
*/
22+
function handler({api, event, helpers, imports}) {
23+
const DebounceUtil = imports["global.DebounceUtil"]();
24+
var debounceSearch = DebounceUtil.debounce(takeAction, 500, helpers);
25+
debounceSearch();
26+
27+
function takeAction(){
28+
const searchTerm = event.payload.value;
29+
api.setState('fullRefQuery',`nameLIKE${searchTerm}`);
30+
}
31+
}
32+
```

0 commit comments

Comments
 (0)