State Pages Deprecated

Deprecated: use Web Pages for new work State pages and UI components still run, but new pages should use Web Pages: faster, simpler and fully indexable. The migration guide shows which web block replaces what.

RUAL Library

Custom Components reach the RUAL helper functions through window.RUAL: global state, translations, requests to the backend and cached components. This page lists every function for maintaining existing components.

Spread the functions from window.RUAL

Spread the functions you need from window.RUAL into your component:

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

Available within any Custom Component:

Call	Params	Description
`globalState`	Class	Exposes the `globalState` along with its functions.
`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`	Uses a global state key within your Custom Component. The return value works like 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`. Typically used internally.
`ws`	Class	Exposes the WebSocket and its functions.
`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, given a path to the static custom component. 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.

Migrate from State Pages Move a page from state blocks and components to web blocks.

Frequently asked

How do I call RUAL functions from a custom React component?

Through window.RUAL. You spread the functions from the RUAL library into your component and call them directly, for example translate, useGlobalState or fetchComponent.

How do I make an API request from a RUAL custom component?

Use ws.request with the method, the uri and an options object holding body and query. It performs the request to the backend from inside the custom component and returns a Promise.

How do I use a global state key inside a RUAL custom component?

Call useGlobalState with a default value, the global key and a uid. The return value works like React's useState, and globalState.set writes a new value that updates the backend and refreshes the relevant pins and components.