Skip to content
Merged
Show file tree
Hide file tree
Changes from all commits
Commits
File filter

Filter by extension

Filter by extension

Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
Original file line number Diff line number Diff line change
@@ -0,0 +1,18 @@
function include() {
class DebounceUtil {

/**
* @param callbackFunc - callback function following timeout
* @param timeout - debounce timeout
* @param helpers - the helpers object passed from a UX Client Script
*/
static debounce(callbackFunc, timeout = 750, helpers) {
let timer;
return (...args) => {
helpers.timing.clearTimeout(timer); // Clear anything currently in place
timer = helpers.timing.setTimeout(() => { callbackFunc.apply(this, args); }, timeout);
};
}
}
return DebounceUtil;
}
Original file line number Diff line number Diff line change
@@ -0,0 +1,32 @@
## Add a debounce to search fields or other inputs with a client script
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.

### Steps
1. Create a new UX Client Script Include (`sys_ux_client_script_include`), using the script from the associated snippet
2. Create a new Client Script in UI Builder, and add the include you created in 1 as a dependency
3. Within the Client Script, import the Script Include as follows, replacing `global.DebounceUtilName` with the scope and UX Client Script Include name:
```js
const DebounceUtil = imports["global.DebounceUtilName"]();
```
4. Within the Client Script, declare a `function` to be called inside the debounce function

### Example usage
```js
/**
* @param {params} params
* @param {api} params.api
* @param {any} params.event
* @param {any} params.imports
* @param {ApiHelpers} params.helpers
*/
function handler({api, event, helpers, imports}) {
const DebounceUtil = imports["global.DebounceUtil"]();
var debounceSearch = DebounceUtil.debounce(takeAction, 500, helpers);
debounceSearch();

function takeAction(){
const searchTerm = event.payload.value;
api.setState('fullRefQuery',`nameLIKE${searchTerm}`);
}
}
```
Loading