RUAL Library
Custom Components have the ability to request specific JavaScript functions from the RUAL library. This page is dedicated to documenting the functions that are directly accessible, along with scenarios in which they might prove beneficial.
How to Use
Accessing RUAL Library functions is straightforward using window.RUAL. You can then spread the functions from the Library into your component. See the example provided below for guidance.
rual-lib.jsx
const { runBlueprintFunction } = window.RUAL;
export default function CustomButtonComponent ({ onclick }) {
function triggerFunction () {
runBlueprintFunction(onclick, {
'value': 'custom-value'
});
}
return (
<button
onClick={ triggerFunction }
>Click me</button>
);
}
List of Functions
Below is a list of functions available from the RUAL library for use within any Custom Component:
| Call | Params | Description |
|---|---|---|
globalState |
Class | This function exposes the globalState along with its functions. Below is a list of functions related to globalState. |
globalState.set |
key, newValue |
Sets a new value for the specified global key, updating the backend and refreshing the relevant pins and components. |
useGlobalState |
defaultValue, globalKey, uid |
Enables the use of a global state key within your Custom Component. The return value functions similarly to React's useState. |
translate |
key |
Attempts to translate the specified key using the currently active language. |
fetchJS |
uid, hash |
Retrieves fresh JavaScript data from the backend using the supplied hash. This function is typically used internally. |
ws |
Class | Exposes the WebSocket and its functions. Below is a list of functions related to ws. |
ws.request |
method, uri, options as { body, query } |
Performs the specified request to the backend, enabling API execution within the Custom Component. Returns a Promise. |
settings |
Object | Provides globally available RUAL settings, such as timezone and other relevant rendering information. |
fetchComponent |
componentFile |
Returns a valid cached React Component for use, given a path to the static custom component. This is mainly used in iterative contexts like Advanced Datatables. |
utils.getDeepvalue |
data, key, defaultValue |
Accesses the specified key within an object and returns the defaultValue if it is not found. |